Fixing Timing Issues in Optimizely

Because Optimizely custom code uses Javascript to edit elements on the site, we need to make sure the elements are there before we can edit them.  To account for timing issues, Optimizely has a utils library to call different methods (via snippet below).

var utils = optimizely.get('utils');

It is best practice to write all custom code in an Optimizely wait statement so we can be sure the elements we need to edit are already present on the page.   Below are two of the most common methods - here is the official documentation for context or more specific reference.

// Method to wait for dataLayer properties to load:
utils.waitUntil(function(){
    return dataLayer.objectProperty // waits until this is loaded
}).then(function(){
    // do something
});

// Method to wait for DOM element to load:
utils.waitForElement('.css-selector').then(function(elementToLoad) {
    // do something with elementToLoad
});

NOTE: Although it is supported, jQuery is not recommended to be used with Optimizely as it may introduce timing issues or slow down Custom Code load times.

verifying timing

To test our Optimizely experiment variation with custom code, we can use a test cookie. By using the test cookie, we can test the timing of the whole experience, as the preview URL does not always simulate accurate load time for the Audience Targeting or Page Targeting in conjunction with custom experiment code.

To configure a test cookie, create the following Optimizely audience, and save it to your experiment.

Bucket yourself into the Test Cookie Audience by pasting the following snippet into the console, and refresh the page to see your changes.

javascript:(function(){ var hostname = window.location.hostname; var parts = hostname.split("."); var publicSuffix = hostname; var last = parts[parts.length - 1]; var expireDate = new Date(); expireDate.setDate(expireDate.getDate() + 7); var TOP_LEVEL_DOMAINS = ["com", "local", "net", "org", "xxx", "edu", "es", "gov", "biz", "info", "fr", "gr", "nl", "ca", "de", "kr", "it", "me", "ly", "tv", "mx", "cn", "jp", "il", "in", "iq"]; var SPECIAL_DOMAINS = ["jp", "uk", "au"]; if(parts.length > 2 && SPECIAL_DOMAINS.indexOf(last) != -1){ publicSuffix = parts[parts.length - 3] + "."+ parts[parts.length - 2] + "."+ last} else if(parts.length > 1 && TOP_LEVEL_DOMAINS.indexOf(last) != -1) {publicSuffix = parts[parts.length - 2] + "."+ last} document.cookie = "optly_"+publicSuffix.split(".")[0]+"_test=true; domain=."+publicSuffix+"; path=/; expires="+expireDate.toGMTString()+";"; })();