Troubleshooting: Changes Are Not Appearing in the Variation

Last updated

Problem Statement

I loaded live preview to check how the variation looks like 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.

changes-not1

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.”

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:

settings_tolerance=5000,

library_tolerance=5000,

tolerance

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.

change-not

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:
    vwo_$(function(){_vis_opt_element_loaded(campaign_id); //change campaign_id as per the experiment ID});

    This code looks for the elements and then applies the changes after they are found. It helps when an element is created later on the page through AJAX, embedded elements, or JavaScript (JS).
  • 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:
    vwo(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 any instance of the 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:

#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, as shown:

element-not-loaded

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.

cssnot

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.

Contact Us / Login

Product
Resources Home