Cannot see the variation

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Personalization
  • Optimizely Performance Edge
  • Optimizely Personalization

Your Optimizely Web Experimentation experiment is running, but you cannot see your variation (or certain changes you made) on your live page. Usually, this problem is with the variation code execution timing or scoping. 

Check that recent changes are published

First, make sure your variation content is published.

If you made changes to a running experiment, you must publish the changes and start the experiment again to see them live.

If your experiment contains unpublished changes, you will see them listed.

Click Publish Experiment  to publish variation content to your site.

Check the changes in Preview mode and your site

  1. Are you able to see your changes using the Preview tool?

    The Preview tool automatically qualifies you for the right audience conditions and traffic allocation, so you can view the experiment as if you are in it. You may have a timing issue if you can see the changes in the editor but not in the Preview tool. Skip down to Check for a timing issue to learn more or see timing issues.

  2. Visit your site without the Preview tool. Do you see the variation when you expect to?

    If not, you may have an issue with your experiment setup. Check the page settings, audience conditions, and traffic allocation.

  3. Do you have an ad blocker installed? It may be preventing you from seeing the right changes.

    If so, pause or disable the ad blocker or allow-list Optimizely Web Experimentation to see your variation content.

Ensure you are in the experiment and variation

Use the JavaScript API to check that the experiment is active and you are bucketed in the right variation. See The JavaScript API in Optimizely Web Experimentation and Optimizely Performance Edge.  

  1. Check for active experiments with this call:
    optimizely.get('state').getActiveExperimentIds()

    If the experiment name or ID is returned, then your experiment is active on the page.

  2. Use this call to check whether you are bucketed into the right variation:
    optimizely.get('state').getVariationMap()

    If you see your variation's name (or ID), you are bucketed into the right variation.

Seeing an experiment or variation ID returned instead of a human-readable name? You probably enabled masked IDs for privacy purposes. See Find IDs for API calls.

If you see your experiment, are bucketed into the right variation, and can see your changes in the Visual Editor but not on your site, you likely have a timing issue.

Check for a timing issue

  1. If you do not see any issues with experiment activation or your variation code, the issue may have to do with the order in which Optimizely Web Experimentation runs on your page. In other words, the elements you want to change do not yet exist when the page first loads. See fix a timing issue.
  2. If flashing is not an issue because the change happens below the fold or to an element (for example, a banner) that does not display until later, for specific variation changes, you can have a browser load them asynchronously. Asynchronous loading makes the Optimizely Web Experimentation snippet itself slightly smaller as it does not contain the information needed to make that change, but it greatly increases the chances of flashing. See Fix flashing or flickering variation content.

Check for a scoping issue

You may reference a JavaScript variable or function defined outside Optimizely Web Experimentation. Similar to troubleshooting timing issues, you will want to cover your bases:

  1. If the JavaScript variable or function is defined outside of Optimizely Web Experimentation, can you confirm they are defined before the Optimizely Web Experimentation snippet? To reliably use a variable or function defined outside of Optimizely Web Experimentation, make sure that they are available by the time Optimizely Web Experimentation executes the code referencing the JavaScript assets.
  2. How are you calling the JavaScript variable or function? If the variable or function is defined outside of Optimizely Web Experimentation and scoped to the window object, reference the JavaScript asset correctly by using window.variableName or window.functionName, as appropriate.

On the other hand, perhaps you have other code outside of Optimizely Web Experimentation that references a JavaScript variable or function defined within Optimizely Web Experimentation (for example, Project JS, Experiment Shared Code, Variation Custom Code). To properly reference these JavaScript assets in code outside Optimizely Web Experimentation, you can scope them to the window object to make them accessible.

You can test whether your code is running as expected in the console while in Preview Mode.