Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Troubleshooting: Variation content doesn't appear in Optimizely X Web

THIS ARTICLE WILL HELP YOU:
  • Figure out why you aren’t seeing your variation
  • Check the integrity of your variation code

Are you experiencing the following issue?

  • Your Optimizely experiment is running, but you can’t see your variation (or certain changes you made) on your live page

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

1. Check that recent changes are published

First, make sure your variation content is published.

If you've made changes to running experiment, you'll need to publish the new changes and start the experiment again to see them live.

publish-exp.png

If your experiment contains unpublished changes, you'll see them listed under Manage Experiment next to Variations.

Click Publish Experiment > Publish and Start to publish variation content to your site.

2. Check the changes in Preview mode and your site

Next, check your whether you may have an issue with your experiment setup.

  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're in it. If you can see the changes in the Editor, but not in Preview mode, you may have a timing issue. Skip down to Step 4 to learn more or go straight to our article on timing issues.

  2. Next, 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 whitelist Optimizely to see your variation content.

3. Make sure you're in the experiment and variation

Use the JavaScript API to check that the experiment is active and you're bucketed in the right variation. Here's a basic walkthrough of how to use the JavaScript API.

  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. Then, use this call to check whether you're bucketed into the right variation:

    optimizely.get('state').getVariationMap()

    If you see the name (or ID) of your variation, then you're bucketed into the right variation.

Seeing an experiment or variation ID returned instead of a human-readable name? You've probably enabled masked IDs for privacy purposes. Here's how to match masked IDs to names.

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

4. Check for a timing issue

1. If you don't see any issues with experiment activation or your variation code, 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. Here's how to fix a timing issue that causes variation content not to appear on your live site.

2. If flashing isn't an issue since the change happens below the fold, or to an element (e.g. a banner) that's not displayed until later, for specific variation changes, you can have a browser load them asynchronously. Asynchronous loading makes the Optimizely snippet itself slightly smaller as it doesn't contain the information needed to make that change, but it greatly increases the chances of flashing.

5. Check for a scoping issue

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

  1. If the JavaScript variable or function is defined outside of Optimizely, can you confirm they are defined before the Optimizely snippet? To reliably use a variable or function defined outside of Optimizely, you will want to make sure that they are available by the time Optimizely 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 and scoped to the window object, you will want to 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 that references a JavaScript variable or function defined within Optimizely (e.g., Project JS, Experiment Shared Code, Variation Custom Code). To properly reference these JavaScript assets in code outside of Optimizely, you can scope them to the window object so they are made accessible.

 
    You can QA your code is running as expected by testing in the console while in Preview Mode.