Problem Statement
I opened Live Preview to check how the variation looks when the campaign goes live, but the variation is not displaying any change at all.
Resolution Steps
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 the case of slow networks, the Preview Mode window may display the message “VWO test settings timed out.”
If mobile is the main source of your website incoming traffic, increase the default time-out values of settings_tolerance and library_tolerance variables from 2000 and 2500 to 5000 and 5000, respectively, as shown in the following VWO code snippet.
To know more about time-out, refer to Why Does VWO SmartCode Time-out and How to Resolve It?
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.
-
VWO applies changes to an element as soon as the tracking code is loaded and doesn’t wait for the full page to be ready. In case you add an element later on the page through AJAX, from the Add JavaScript section in Code Editor, click the Add code to poll for elements option to add the function.
- If you used the editor operations to make all the changes, configure the SPA/SSR editor settings to handle the scenarios wherein the element changes on the webpage don't get applied.
If styling changes do not get saved in Editor
If CSS changes are not saved or applied in the editor, it’s likely that the existing CSS of the page would not be overwritten. In such a case, add the changes manually in the CSS section with the !important property. For example:
#id
{
Color:red !important;
}
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.
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, we recommend you to configure the Selector Path Options in Editor Settings for Your Website in VWO.