Fix a timing issue

Not every web page loads all content on a page at the same time. Sometimes, some of the content on a page may depend on an AJAX requestor may be automatically loaded after some delay following the initial page load. If an element does not 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 see a timing issue, you also see variation code load as expected in the editor, but not on your live site. 

To fix timing issues, instruct Optimizely Web Experimentation and Optimizely Performance Edge to both wait until the element is loaded on the page before changing it, and hide the element until Optimizely Web Experimentation and Optimizely Performance Edge can make the change. 

1. Go to the experiment or campaign, select a variation, and click Variation Code Editor (icon).
2. Select JavaScript to add custom code.

   

   Use the following utilities to adjust the timing of your variation code, or find more utilities in the developer docs.

   Control variation code timing with waitForElement

   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.

   Control variation code timing with observeSelector

   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 is not compatible with all browsers.

To see an example using a utility, click Help (icon) below the Variation Code Editor window.

See also what jQuery is and how Optimizely Web Experimentation and Optimizely Performance Edge use it, and how to manually find selectors on your page.