Previewing Variation of Your A/B Test in VWO

Before making the variation of your A/B test live, it is a good practice to ensure it retains all the changes you've made. The Previews tab in your VWO Test campaigns provides a convenient way to quickly check and validate your variations without having to dig through the test settings. It typically ensures that your variation has no broken links or sections and functions as expected for your website visitors.

You can preview your variations in two ways:

• Via the Previews tab
• Via VWO Visual Editor

Previewing a Test Variation via the Previews Tab

1. To preview the variations of your A/B test campaign via the Previews tab, open the campaign and perform the following steps:

   1. From the campaign control pane on the left, go to Review > Live Preview to access the live preview of your variations.
   2. In the Preview URL field, the default campaign URL is auto-populated. You can override this URL if you want to load the previews for a different page.
      
      NOTE: If your campaign is running on multiple pages, you can preview them individually.
   3. To preview the variations without applying the campaign-level segmentation conditions, select the Ignore campaign targeting conditions in previews option. You can view the segmentation conditions by expanding the View targeting conditions section.
      
      NOTE: The Ignore campaign targeting conditions in previews option appears only when you have applied a pre-segmentation condition on the Audience and Traffic page.
   4. Once done, click Preview in a new tab. The preview opens in a new tab displaying the variation that you have selected.

   In the preview window, a Preview Mode debugger pop-up appears in the lower right corner, which displays the information about your campaign.
   The Preview debugger popup comes with the following options:
   

   	To copy the direct preview link to be pasted elsewhere or shared with someone. This option comes in handy when you’re looking to verify the variations across different browsers or devices. You can choose to use the direct preview link or scan the QR code from your mobile to verify the variations in mobile browsers.
   	To switch the position of the pop-up to the left of the screen
   	To switch the position of the pop-up to the right of the screen
   	To minimize the pop-up
   	To close the pop-up

   Click on the campaign name on the preview popup and select a variation from the dropdown adjacent to it to view the following details correspondingly:

   • Logs- Displays the following details for the selected variation or control:
     • The number of unique visitors who have accomplished the metric
     • If the displayed page matches the test page pattern
     • If the modified elements are hidden
     • If the visitor targeting condition is matched
     • Name of the metric that is triggered
   • Campaign Info - Displays the following information about the campaign:
     • Type of the test campaign
     • Running status of the campaign
     • Status of activation of Heatmap
     • Overall traffic allocation for the campaign
     • URL pattern that is specified for defining the pages for running the campaign
     • Status of activation of cross-domain tracking in the campaign

   You can trigger a goal/metric to verify if it is working fine. If the goal/metric is triggered, the corresponding status will be updated under the Logs for page visits section.

   TIP: Before verifying the goal, clear the page visit logs by clicking on the CLEAR option in the Logs for page visits section. This helps you identify if the goal is being tracked.

Previewing Screenshots of Your Variations

Using the Variation Screenshots section under the Review tab, you can view the screenshots for your variations based on the modifications that you have made. Here, the screenshots of all your variations appear as thumbnails. To preview the screenshots of your variations, perform the following steps:

1. Go to Review > Variation Screenshots.

2. To view a screenshot, hover on the screenshot thumbnail and click View Screenshot.
   

3. On the screenshot that appears, you have the option to view the screenshot of your variation in specific browsers. To do this, select the variation and the browser from the respective dropdowns and click Go. Alternatively, you can also use the Select Browsers dropdown present in the top right corner of the Variation Screenshots section to load screenshots of your variations in different browsers.

   NOTE: If you’re viewing the screenshots for the first time, they may take a few seconds to generate, depending on the server load.

Additionally, you can also group your variations based on the Browsers and Variations using the Group By screenshot settings present in the panel on the right.

Previewing a Test Variation via VWO Visual Editor

Previewing your changes in the Visual Editor is the quickest way to verify your changes right away, once you make them. To preview the variations of your A/B test via VWO Visual Editor, perform the following steps:

1. From the A/B Test dashboard, select the test you want to preview and go to Configurations > Variations.
2. Click the Edit button corresponding to the variation that you want to preview. This takes you to the VWO Visual Editor.
   
3. From the Variations panel inside the Visual Editor, click the vertical ellipsis corresponding to the variation that you want to preview and select the Preview option.
   
4. By doing so, an alert pop-up is displayed informing that any unsaved change that is made to the variation will be auto-saved as soon as the preview is displayed. If you are fine with proceeding further, click the Preview button in the alert pop-up. The preview of the variation opens in a new tab.
   
   NOTE: You need to configure your browser to allow pop-ups in order for the previews to open.
   INFO:

   • You can have only one preview tab open per version (control or variation), irrespective of how you access the option.

   • The title of the browser tab indicates the version number of the variation ([v1], [v2], etc.) that you’re currently previewing. This way you can identify the variations when you have several preview tabs open on your browser.

   • The preview tab of a given variation will automatically reload with any further change that is saved in the Visual Editor for that variation.

   Related Concepts How to Verify Test Goals Setup Using Live Previews? How to Check Segmentation Through Live Previews?