This article will help you:
  • Check whether the Optimizely snippet is conflicting with your page
  • Figure out whether there's a problem with your experiment variation code 

Are you experiencing any of the following issues?

  • Your page isn't displaying as intended
  • You’re seeing duplicate elements on your page
  • An interactive element on your site doesn’t work anymore
  • Your experiment looks great in the Editor or Preview Mode, but not on your live site

This article will help you get to the root cause of discrepancies between your variation design and what you see on the live page. 

Here's when this article may not be for you: 

 
Tip:

Before reading further, make sure that your experiment is set up correctly. This article provides a thorough QA process to check that your experiment works as intended, prior to launch.


True conflicts with Optimizely are extremely rare, since all Optimizely functions and variables are defined in their own unique scopes and Optimizely’s jQuery runs in no-conflict mode. This article will help you investigate unusual behavior that coincides with Optimizely snippet implementation or experiment launch.

Check whether Optimizely is causing the issue

First, let’s determine whether the issue that you’re experiencing is linked to your Optimizely implementation. Compare two versions of your page: one with Optimizely running and one with Optimizely disabled.

  1. Navigate to the URL on which you’re experiencing your issue.
     
  2. Open the same page in a second tab.
     
  3. In the second tab, add the query parameter optimizely_disable=true to the URL and reload the page with this query parameter. For example, when your URL is https://app.optimizely.com/edit?expe..._id=1234567890, you should change it to https://app.optimizely.com/edit?expe...y_disable=true

The optimizely_disable=true query parameter completely disables Optimizely from rendering changes in your browser. Please note that this action is visible only to you; it does not pause or affect your running experiment.

Is the issue still appearing on your page? If so, the problem is not linked your Optimizely implementation. At this point, you should communicate with your development team to find out why your page isn’t rendering correctly.

If the problem does seem to be linked to your Optimizely setup, please continue troubleshooting.

Check the Snippet Implementation

If you’re seeing duplicate content or other anomalies on your site, it’s always good practice to check your snippet implementation.

  1. Check that only one snippet is on the page. If more than one snippet has been added, delete the duplicate.
     
  2. Check that your snippet is as high as possible in the <head> tag.

Isolate the issue to a specific experiment or variation

If you have multiple experiments running, isolate the issue to a single experiment. This article helps you check which experiments are running on the page. Pause the experiments one by one to figure out which one causing the problem.

If your experiment has multiple variations, isolate the issue to a single variation. Check your variations one by one by using a query parameter to force each variation to appear.

Does the issue appear in only one variation? Does it appear in all variations? If the issue appears in all variations, check the code in Experiment Javascript and Experiment CSS to find the conflict. If there's no code in Experiment Javascript or Experiment CSS, review the code for each variation for identical changes. 

Content that was formerly interactive no longer works (e.g. a form is broken)

If you have an interactive page, the Edit HTML and Edit Text options can overwrite your dynamic content and make it static. For instance, if you used Edit HTML to change dynamically-loaded content such as a product price, you may have hard-coded that price to all of your product prices. Check whether your dynamic content has been overwritten:

  1. Open your Optimizely experiment and select a variation.
     
  2. Open the code editor by clicking <Edit Code> in the lower right-hand corner.
     
  3. Search the variation code for “replaceWith”, “html” and “text”. When you use the Edit HTML command in the Visual Editor, a jQuery method .replaceWith is generated in your variation code. You can learn more about jQuery methods in this article.
     
  4. Repeat these steps for each of your variations.

If you find “replaceWith”, “html”, or “text”, your dynamic content might have been been overwritten. If you’re trying to move an interactive form on your page, you should use jQuery methods such as .append() or .prepend() to move the entire element to a new location.

The experiment looks right in the editor or in preview mode, but wrong on the live site

 
Note:

The force parameter method and the test cookie audience condition are the best ways to replicate the environment in which your experiment will run. Run both to thoroughly QA your experiment before setting it live.


Move and Resize may have created a compatibility issue. Move and Resize moves elements across absolute distances by pixel. As a result, the element may display differently, depending on browser and screen size, if the element was moved across a large distance (more than 20 pixels).

  1. Open your Optimizely experiment and select a variation.
     
  2. Open the code editor by clicking <Edit Code> in the lower right-hand corner.
     
  3. Search for .css in your variation code. When Move and Resize is used, this jQuery method is generated in your code. This may take one of the following forms:
     
    .css({"left":-180, "top":11}) 

    or
     
    .css({"position":"relative","left":-140,"top":111)}


    If the values of either "left" or "top" are 20 or more, the element has been moved across a large distance with Move and Resize.  
  1. Repeat these steps for each of your variations. 

If you find .css modifying an element that was moved across large distance, remove that line of code. Instead, move your element with Rearrange, then use Move and Resize to adjust the element’s final position.

Content is duplicated on your page

If an element is duplicated on the page and the Optimizely snippet is installed only once, it’s likely that your variation code is the source of the problem. Check whether your variation code is duplicating content:

  1. Open your Optimizely experiment and select the variation that contains the duplicate element.
     
  2. Open the code editor by clicking <Edit Code> in the lower right-hand corner.
     
  3. In a second tab, navigate to that page in your browser. Open a Developer Console in the second tab.
     
  4. Copy the variation code in your first tab.
     
  5. Paste the code into the browser’s Developer Console.
     
  6. Execute the code (press enter to run the code).

If you find that your variation code is duplicating content, you may have a selector that is pointing to multiple elements rather than a single element. If you’re having trouble identifying which line of code is adding the duplicate element, check your variation code line by line:

  1. Copy the first line and paste it into the Developer Console.
     
  2. Execute the code (press enter to run the code).
     
  3. Repeat steps 1 and 2 for all lines of code until you find a line that duplicates the element.

If you find a line of code that duplicates your element, modify your selector to point to the right element.

Check the console for errors

If none of the methods above reveal why your page isn’t displaying as intended, then it’s time to check your Developer Console for errors that occur when the page is loading. It’s possible that either a function is not defined or jQuery is not defined.

  1. Navigate to your page.
     
  2. Open the Developer Console.
     
  3. Search for any errors tagged “is undefined” or “is not a function.”

If you find this type of error, this article will help you to resolve it.

Still having trouble? Reach out to the Optiverse Community for additional assistance.