In VWO you have the functionality to preview any variation that you create before starting your test. You can preview variations in two ways:
1. Live previews
You can view live previews inside VWO preview window which will open after you click on the Preview button in “Preview Variations” tab as show in the below screenshot.
Quick tip: Click on the test name inside the widget for some more details. Read more about it.
Live previews provide an option to simulate various test conditions in previews under Advanced settings. By default, previews ignore test settings and will always show you the variation. However, you could account for following settings in the previews:
- Target Test to a Segment: this setting you would have set in the test in order to run it only for a specific segment of visitors.
- Variation Targeting: this setting allows you to show different variations to different segment. You will only see a preview of a variation if you qualify that segment.
- Percentage traffic: this test setting lets you include only a percentage of traffic in the test. For previews, it means that you will only see previews if you happen to get selected for the test.
- Traffic distribution: if you choose to see variations preview in random order, upon enabling this setting, variation previews will appear in proportion that you have specified in the test settings.
You can also choose to open preview in a new window by checking the option besides the Preview button. This is specially useful if your website has issues with opening in iframe. Eg. if it has an iframe breaker.
To view preview screenshots click on the thumbnails for the desired variation/combination.
To preview how your variation will look in a different browser, first select Screenshot, then click on the Variation name and finally select the browser you want the screenshot for. Depending on the server load, the screenshot may take a few seconds to be generated.
3) You also have two buttons to mark whether a screenshot is showing properly in a browser or not. Press the green “Looks Good” button is to indicate that for a particular browser, the variation displays fine. Press the red “Not Good” button to indicate that the variation is not displaying properly and needs some work.
4) Based on your feedback on the variation, you can ensure that the test doesn’t run on browsers where the variations are not displaying correctly.
How to preview variations on specific browser(s)?
To preview variations on specific browsers, here are the steps.
1) If you have any test created, then go to ‘Previews Variations’ tab otherwise create the test and on the final page select ‘View Variation Previews’.
Here you’ll find a ‘Select browsers’ button, click on this button, it will open the browser list. From here please select the browsers on which you want to check/verify screenshots.
If you want to verify only on major browsers, then you can select recommended browsers by checking ‘Select recommended list of browsers’. It selects one version for each different browser.
Once you are done with selection of browsers, click on ‘show screenshots’ to check screenshots for the selected browsers. If your test page doesn’t have VWO code installed, then you’ll see a warning message. You can either add correct VWO code on your pages, or just click on ‘Confirm’ to ignore this warning.
If your test page URL is incorrect, then your request for generating screenshot will not be send and you’ll see following error message -
‘Test page URL is incorrect. Please correct the test page URL and then try again.’. So please correct your URL and remove any * or any other incorrect character appearing in URL.
You’ll see the thumbnails added with ‘loading’ sign and estimated time it will take to fetch screenshots.
For now requests for fetching screenshot are queued in batches of 32, so if you have say 10 variations and you have selected 4 browsers, first request will go for fetching 8 variations initially, once some of these are fetched, request for remaining variations will be automatically send.
If some browser is down or for some other reasons your screenshot could not be fetched, then you’ll get the error message ‘Browser is down. Your request is queued.’ So whenever browsers come up, your queued screenshot will be generated.
Also now you can change the way thumbnails are grouped. The sort by button let you change the grouping field. You can choose either ‘combinations’ or ‘browsers’.
Screenshots grouped by variation:
Screenshots showing preview status i.e if they are rejected or not. Green circle shows that preview is approved. Red circle shows that preview was not approved.
In screenshot mode, you will see a browser selector, using which you can check the screenshot of selected combination in that browser. Also you can save your feedback about the screenshots, i.e if it looks ok, then you can save this by clicking on ‘Looks good’ button displayed in top menu bar of modal box. If you think that its not correct, then you can click on thumbs down button.
Also when you thumbs down any displayed screenshot, you’ll get an option to exclude that browser i.e test won’t run on that browser.
To include any excluded browser, please click on ‘Include Browser’ button in modal box: