I opened Live Preview to check how the variation looks like when the campaign goes live, but the variation is not displaying any change at all.
If VWO code is not installed
If your website does not have the VWO tracking code installed, the preview debugger window does not appear on the bottom right of the previews, that is, only the original web page appears.
To install the tracking code snippet, copy it from http://app.vwo.com/#/settings/code and then paste it in the <head> section of the campaign page. To read more on how to add the code snippet, click here.
If VWO code times out
In case of slow networks, the Preview Mode window may display the message “Visual Website Optimizer test settings timed out.”
If mobile is the main source of your website incoming traffic, increase the default time-out values from 2000 and 2500 to 5000 and 5000, respectively, as shown in the following VWO code snippet:
If there’s inconsistency in the load timing of elements
At times, the elements on which changes have been made do not load at the same time as their corresponding scripts. Therefore, the changes do not take effect.
How to confirm: Copy the entire code from the editor and then fire it in the console tab of the developer tool in previews. If the changes are applied, it would mean that the elements did not load along with the JS scripts.
To open the console, right-click the web page, click Inspect, and then select Console.
The following best practices can help you ensure glitch-free loading of variations:
- If you used the editor operations to make all the changes, add the following code snippet to the code editor window:
_vis_opt_element_loaded(campaign_id); //change campaign_id as per the experiment ID
- If custom JS changes are involved, wrap the code snippet inside the setInterval() function, as shown here.
You can also try wrapping the code snippet in the DOM-ready function:
// changes here
- If you want to replicate the same change at multiple instances on the page or in pop-ups, remove clearInterval() from the setInterval() code. For example, the Add to cart button can be placed just below the products as well as on a pop-up that appears on clicking the product image; both the buttons have the same ID or class. This positioning ensures that changes keep getting applied whenever an instance of the button is found, not just at the first instance.
If styling changes do not get saved in Editor
If CSS changes are not saved or applied in editor, it’s likely that the existing CSS of the page would not overwritten. In such a case, add the changes manually in the CSS section with the !important property. For example:
If Preview Mode shows “Element not loaded”
The message “element not loaded” appears in the Preview Mode window, if the modified element is not present on the page, as shown:
Alternatively, you may fire the CSS path of the element in the console. If it returns blank, it means that the element is not present.
It may happen if the CSS paths of the elements are changed from the backend or the elements have dynamic IDs/classes attached. In such cases, find a static CSS path for the element and add the same to the code. You can refer to the Finding CSS path of an element section of this document.