Resolving an issue
Live previews provide a feature for debugging your preview issues. We recommend it as the first thing to try as soon as you see any issue in your test preview. Here are the steps to follow:
1. Select any variation and press the Preview button to see that variation’s live preview.
Quick tip: You can also select the Choose randomly option from the select box to let Visual Website Optimizer choose a random variation/combination for you.
2. Once your page opens in the modal, you’ll see a preview widget at the bottom right corner. If everything went right, you should see a success tick mark besides the test name. But if you see an alert icon, go ahead and click the test name to get some more details:
You’ll now see the logs for the current page. For example, in the image below, you see that we got a message saying “Matching Test Page Pattern: Failure“:
Ah, so I know that the issue is actually in my Test Page Pattern. I see that my current page is https://visualwebsiteoptimizer.com but my Test Page Pattern is https://visualwebsiteoptimizer.com/ab-testing/. I can now easily fix my Test Page Pattern to resolve the preview issue at hand. Easy!
Similarly, the logs will tell you about various other issues like cookie not being created, modified elements not being found on the page, etc.
Common reasons for preview issues
1. The VWO code snippet that you have added on the page is not from the same account in which you have created the test. Please first make sure that the VWO code is from the same account in which you have created the tests. If the code snippet is from the correct account ID go to step 2(see image below to learn where to find account id in your VWO account).
You pasted the code in a wrong way
2. Go to the developer’s tool in Chrome (press F12) or Firefox (use Firebug) and look into console and check if there is some error in console regarding the VWO code snippet. In case you see some errors in the console, it could possibly be because you introduced some undesirable changes in the VWO code while pasting it on your web page. You could have accidentally introduced some new lines while pasting the code snippet. Please remember to copy paste the code snippet as it is without changing anything in the code (not even pressing Enter Key accidentally).
Test page pattern is wrong
3. In case above two issue are absent, check your test page pattern again and make sure you have http or https or http* included in your test page pattern. Also check if there is a spelling mistake or incorrectness in the test page pattern. In case you are doubtful, use * as a test page pattern temporarily while debugging the issue.
Element doesn’t have a unique ID
5. In case all above reasons fail to explain the issue, it could very well be an issue with xpath’s.
It is much better to have a unique ID on the element on which you wish to make the change rather than change elements without ID’s. In case you do not have a unique ID on the changed element, it’s xpath will be derived from the last element that has an ID. In such cases inconsistencies may very well arise due some script tags not loading in the xpath and therefore the xpath becoming invalid.
It’s a thumb rule that changes on elements with unique ID’s work much better.