JavaScript execution

Developing campaigns and experiments

Optimizely X lets you build experiences using a visual editor or make more sophisticated changes by writing your own custom code. To give you full control over the execution of that code, we've changed the timing of when code is applied and added new utility functions for adjusting that timing.

Timing

The execution model for JavaScript has been revamped in Optimizely X, so developers familiar with our Testing product should be careful copying over existing code. There are two key differences:

1. Custom code and visual changes are separated. When you make a change in the visual editor, you won't see the corresponding jQuery in the code box. Instead, the change is stored in a JSON data structure and applied at runtime. Each visual change is applied when the selector it applies to is ready.

2. Custom code runs immediately. Because visual and code changes are mixed together, Optimizely Testing polls for each line separately and tries to run it when elements are ready. In Optimizely X we've removed this behavior so that your code runs exactly as written, often before the DOM is ready.

Please note this means that some code that works in Optimizely Classic may not work in Optimizely X. For example, the following code will have no effect if the Optimizely snippet is in the head tag, because the body element doesn't exist at the time the code runs:

$("body").css("background-color", "red");

To delay running the code until the entire page is loaded, you can use jQuery's document.ready function or one of the utility functions below:

// Change the background when the DOM is ready (may cause flashing)
$(document).ready(function() {
  $("body").css("background-color", "red");
});

// Change the background as soon as the body element loads (no flash)
var utils = window.optimizely.get('utils');
utils.waitForElement('body').then(function(){
   $("body").css("background-color", "red");
});

You could also use the CSS option under Custom Code to make the same change without worrying about timing. CSS changes are applied by appending a style tag to the end of the head tag.

body {
  background-color: red;
}

Finally, there are several different places where you can write custom code. Changes are applied synchronously in the following order:

1. Project JS (learn more)
2. Campaign JS
3. Campaign CSS
4. Experience / Experiment JS
5. Experience / Experiment CSS
6. Visual editor changes

📘

Note

Personalization campaigns and Optimizely X experiments can execute in parallel. Be careful assuming any dependencies between them or optimizing the same element in multiple campaigns/experiments.

"Get" modules

In addition to updating the push APIs, Optimizely X also exposes a new function, get. This function allows you to access several useful properties and utilities after Optimizely has initialized.

📘

Note

Unlike push, get isn't available before the Optimizely snippet executes or in Project JavaScript. It's available in all other custom code and after the Optimizely snippet has executed.