This article will help you:
  • Figure out why you aren’t seeing your variation
  • Figure out why you aren’t seeing conversions on a certain variation
  • Check the integrity of your variation code
  • Check the timing and scoping of your experiment

Are you experiencing any of the following issues? Then this article will help you get to the root cause:

  • Your Optimizely experiment is running, but you can’t see your variation (or certain changes you made) on your live page in the browser.
  • Your Optimizely experiment is running, and you see visitors on your Results page, but no conversions in a certain variation.

Usually, this problem has to do with the variation code execution timing or scoping. We’ll walk you through what that means and how to troubleshoot it.

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

  • You’re not seeing visitors or conversions on the Results page, or you’re seeing no results for any of your variations. If that’s the case, see our article on troubleshooting experiment activation.
  • You’re having trouble with goal tracking. If that’s the case, see our article on troubleshooting goals.
  • Your variation content appears, but it is offset or appearing incorrectly. This is more likely an issue with the way the browser is rendering Optimizely's changes. Watch our video or read our article on Editor Best Practices to learn more about how to make more precise changes in the Editor.

1. Make sure the experiment is running on the page, and you're bucketed into the variation

First, confirm that the experiment is active and that you are bucketed into the correct variation. Here’s how to do that:

  1. Make sure that your experiment is in Running status on your Home page. 
  2. Check your Diagnostic Report to make sure your snippet is installed and your experiment is live.
  3. Optimizely provides an easy way for determining whether an experiment is running. Go to the URL where you’re running the experiment, and then open your browser's console.
  4. Now, we’ll need to ask Optimizely, “Which experiments are active on this page?“ To do this, examine the Optimizely data object in the next two steps.
  5. Type optimizely.activeExperiments into the console. This will return a list of all experiments currently running on the page for you.

    1. If you see your current experiment ID, you are bucketed into the experiment. You can find an experiment ID by going to your Home page > Overview > Experiments, then click that experiment and scroll down in the right-hand panel).
    2. If you see an empty array ‘[ ]’ then your experiment isn’t active on the page. See our experiment activation article for more information.
  6. Type optimizely.variationNamesMap into the console. This will return a mapping of experiment IDs to variation names for all experiments on the page into which you are currently cookied, both active and inactive.


     
    1. If this returns the “Original” variation for your experiment, then your experiment is running, but you’re simply looking at the Original variation.
    2. Use the force parameter to toggle to another variation, and see whether it appears.
 
Note:

If there are multiple active experiments, make sure they are not colliding (in other words, making different changes to the same element on the page). If there is interference, you can make simultaneous experiments mutually exclusive.


If you see the correct Experiment ID in activeExperiments AND the correct variation name in variationNamesMap, but this hasn’t resolved your issue, continue to the next section.

2. Check for code issues

If your experiment is running on the page and you’re bucketed into the right variation, but you still can’t see some or all of your changes, the problem may be with your code.

Paste your variation code directly into the console. The variation code in your Optimizely experiment works similarly to the JavaScript console in your browser. 

  • If you run your experiment’s variation code in the console, and you see the changes correctly reflected on the page, then the issue is with timing or scoping, so move on to the next section on timing issues.
  • If the changes don’t reflect on the page, then you’ll need to go back and review your variation code in Optimizely’s Code Editor, as well as Experiment JavaScript and Project JavaScript if necessary.

3. Check for timing issues

 
Note:

This might also help solve timing issues when your page loads slowly or "flashes" (original appears briefly before variation).

 
Note:

The code in this section only applies to experiments set to Immediate Activation Mode, not to experiments set to Manual Activation Mode or Conditional Activation Mode.

If experiment activation and your variation code are fine, the issue may have to do with the order in which Optimizely runs on your page. In other words, the elements you want to change do not yet exist when the page first loads.

Some web pages don’t load all of their content at the same time. For example, part of the content may depend on AJAX requests or the content is automatically loaded but there is some delay after the page is loaded. If this is the case, then your variation will load as expected in the Editor, but not on your live site.

 
Tip:

Do you have an Optimizely Enterprise Plan? Then you can load AJAX-based content with Conditional Activation Mode, which lets you specify a code condition, which Optimizely will poll every 50ms to see if it's true! Go to that article instead if you have an Enterprise plan.

In the case where elements are added to your page as a consequence of a visitor’s action, then you should read the article on manual activation.


Here’s how to check:

  1. To fix timing issues, you’ll essentially tell Optimizely to both wait until the element is loaded on the page before changing it, as well as hide the element until Optimizely is able to make its change. You’ll do this through defining a function in Project JavaScript or Experiment JavaScript. When called from the experiment variation < Edit Code > section, this function will preemptively hide the delayed element and wait for the delayed content to be loaded on the page and will apply the variation code at the right time.
  2. There are two ways to set this up: either through Project JavaScript or Experiment JavaScript. It’s better not to edit this function and keep its code as it is.
    1. If you’re a customer with an Enterprise plan, you can paste this function into your Project JavaScript. From the Home page, navigate to Settings > JavaScript, then copy and paste the function below into the Project JavaScript code box.
      /* pollForDelayedContent function Project JS v1 */
      window.pollForDelayedContent=function(e,n,t){var i=+new Date,o=50;t=t||{};var l=t.selectorToHide||e,d=t.unhideDelayInMilliseconds||0,s=1e3*t.timeoutInSeconds||null,a=t.intervalInMilliseconds||o,r=function(e){var n="optlyHide_"+ +new Date;return $("head").prepend("<style id='"+n+"' type='text/css'>"+e+" {visibility:hidden !important;}</style>"),function(){$("#"+n).remove()}},u=r(l),c=function(){n(),setTimeout(u,d)},v=function(){var n=+new Date;$(e).length?c():s&&n-i>s?u():setTimeout(v,a)};v()};

      It will look like this:
    2. If you don’t have an Enterprise plan, you can paste this function at the top of your Experiment Javascript. In your experiment, navigate to Options > Experiment JavaScript. The extra comment lines force Optimizely to execute the code within it immediately when Optimizely loads. This already happens with code in Project JavaScript.
      /* pollForDelayedContent function Experiment JS v1 */
      /* _optimizely_evaluate=force */
      window.pollForDelayedContent=function(e,n,t){var i=+new Date,o=50;t=t||{};var l=t.selectorToHide||e,d=t.unhideDelayInMilliseconds||0,s=1e3*t.timeoutInSeconds||null,a=t.intervalInMilliseconds||o,r=function(e){var n="optlyHide_"+ +new Date;return $("head").prepend("<style id='"+n+"' type='text/css'>"+e+" {visibility:hidden !important;}</style>"),function(){$("#"+n).remove()}},u=r(l),c=function(){n(),setTimeout(u,d)},v=function(){var n=+new Date;$(e).length?c():s&&n-i>s?u():setTimeout(v,a)};v()};
      /* _optimizely_evaluate=safe */

      It will look like this:
  3. You can then call the pollForDelayedContent() function as many times as necessary within the experiment variation < Edit Code > section. Examples:
      1. Simple usage example (this does not use the optional options):
        /* pollForDelayedContent function variation code simple v1  */
        /* _optimizely_evaluate=force */
        window.pollForDelayedContent("selectorToChange", function() {
          variationCode
        });
        /* _optimizely_evaluate=safe */
        Paste the above code in your variation code, then update each of the following function parameters:
        • selectorToChange: replace this with the selector of the element that’s flashing, failing to be changed by your Optimizely changes or loading with a delay on your page. “variationCode” will execute when Optimizely sees that this element exists on your page.
        • variationCode: replace with your variation code (the code in the < Edit Code > section of your experiment variation).
     
    Note:

    Please note that while this doesn’t require a deep understanding of jQuery and JavaScript, the pollForDelayedContent() function is a technical workaround and may become slightly more complex for certain web pages or Optimizely experiments. The simple usage example above is probably what you’re looking for if you’re less confident about your technical knowledge, and the advanced usage example below it what you can use if you’re more technical and your experiment needs the advanced functionality (most experiments do not). Here are some extra resources in case you’re not confident about what jQuery is and how Optimizely uses it, and how to manually find selectors on your page.

     
    Note:

    You may want to consider not copying and pasting all of your variation code (the code in the < edit code > section of your experiment variation) in place of the variationCode placeholder. It is best to only add the lines of code that apply to the selectorToChange element. Pasting all variation code changes could cause your other pages changes to be delayed until the selectorToChange element is found.

    1. Advanced usage example (this does use the optional options):
      /* pollForDelayedContent function variation code advanced v1  */
      /* _optimizely_evaluate=force */
      window.pollForDelayedContent("#selectorToChange", function() {
        variationCode
      }, {
       selectorToHide : 'img',
       unhideDelayInMilliseconds: 500,
       timeoutInSeconds : 5,
       intervalInMilliseconds : 100
      });
      /* _optimizely_evaluate=safe */
      Paste the above code in your variation code, then update any needed, and remove any optional, unneeded function parameters:
      • selectorToChange: replace with the selector of the element that’s flashing or not appearing on your page. “variationCode” will execute when Optimizely sees that this element exists on your page.
      • variationCode: replace with your variation code (the code in the < Edit Code > section of your experiment variation).
      • selectorToHide: (optional) change value from img to the selector of the element that’s flashing or not appearing on your page. Replaces selectorToChange as the element to hide until variationCode has been executed.
      • unhideDelayInMilliseconds: (optional) Replace 500 in above example to set the time in milliseconds before selectorToChange (or selectorToHide if provided) is unhidden after variationCode runs. If this argument is not specified, there is no timeout.
      • timeoutInSeconds: (optional) Replace 5 in example above to set the time in seconds the pollForDelayedContent() function will take to "timeout" or stop trying. If this argument is not specified, the pollForDelayedContent() function will never timeout.
      • intervalInMilliseconds: (optional) Replace 100 to set the time in milliseconds the pollForDelayedContent() function will wait between checking for the selectorToChange (or selectorToHide if provided). If this argument is not specified, the pollForDelayedContent() function will be set up to poll every 50 milliseconds.
 
Note:

Technical Disclaimer:

The pollForDelayedContent() function uses a recursive JavaScript timeout instead of a JavaScript Interval. This is more performant than a JavaScript Interval, but still can affect page performance. If in question, it’s important that you work with your web development team to determine if this approach is right for you.

4. Check for scoping issues

If the previous solutions didn’t work, then you’re most likely experiencing a scoping issue. Here’s how to check:

  1. If you see “... is undefined” errors in the console when the experiment runs, $ may refer to something else on the page. For example, there may be another library that assigns significance to $. Try switching $ to either jQuery, optimizely.$ or window.$ in your variation code, then resave the experiment and run it again.
  2. Are you trying to call a function that is defined in the Experiment JavaScript via your variation code? If yes, make sure everything is set to the window level by adding a `window.` prefix to each line of variation code.
  3. Are you trying to reference jQuery commands which do not exist in Optimizely’s version of jQuery? Optimizely uses jQuery version 1.11.3 by default, and is also backwards-compatible with version 1.6.4. To find out what methods are available in this version, open up your console and type `optimizely.$.fn.` and a list should appear of all available methods. If you don’t see the one you would like to use, set jQuery on the window level (window.$).


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