Relevant products:
- Optimizely Web Experimentation
- Optimizely Performance Edge
This topic describes how to:
- Fix issues with timing that causes variation content not to appear on your live site
- Adjust the timing of variation code for elements that don't exist on the page when it first loads
Not all web pages load all content on a page at the same time. Sometimes, some of the content on a page may depend on an AJAXrequestor may be automatically loaded after some delay following the initial page load. If an element doesn't exist on a page when Optimizely Web Experimentation and Optimizely Performance Edge's variation code tries to change it, the change may not occur. This is a timing issue.
If you're seeing a timing issue, you'll see variation code load as expected in the Editor, but not on your live site.
To fix timing issues, you’ll essentially tell Optimizely Web Experimentation and Optimizely Performance Edge to both wait until the element is loaded on the page before changing it, as well as hide the element until Optimizely Web Experimentation and Optimizely Performance Edge is able to make the change. This article walks you through a couple of approaches.
Control variation code timing
We have a few utilities to help you control the timing of your variation code:
utils.waitForElement(selector);
Use the waitForElement
function to wait for an element before executing the variation code. The waitForElement
function waits for the element's opening and closing tag before executing the variation code. For example, if you wait for body
, waitForElement
waits for the opening and closing body tag before executing. This runs just once, when the element is found.
utils.observeSelector(selector, callback, options);
The observeSelector
function uses DOM mutation observers to constantly check if an element has changed and run the variation code when a change is detected. This is useful for dynamic content and SPAs, but it's not compatible with all browsers.
Here's where to use them:
-
Navigate to the experiment or campaign, select a variation, and click the Variation Code Editor icon (
).
-
Select JavaScript to add custom code. Use the utilities above to adjust the timing of your variation code, or find more utilities in our developer docs.
To see an example using a utility, click the Help icon below the Variation Code Editor window.
Here are some extra resources in case you’re not confident about what jQuery is and how Optimizely Web Experimentation and Optimizely Performance Edge use it, and how to manually find selectors on your page.