JavaScript execution

Develop campaigns and experiments

Optimizely Web Experimentation 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 have 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 Web Experimentation, so developers familiar with our testing products 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 will not 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 Web Experimentation polls for each line separately and tries to run it when elements are ready. In Optimizely Web Experimentation, we have removed this behavior so that your code runs exactly as written, often before the DOM is ready.

This means that some code that works in Optimizely Classic may not work in Optimizely Web Experimentation. For example, the following code will have no effect if the Optimizely snippet is in the head tag because the body element does not 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 Web Experimentation experiments can execute in parallel. Be careful assuming any dependencies between them or optimizing the same element in multiple campaigns/experiments.

Get function

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

📘

Note

Unlike push, get is not available before the Optimizely snippet executes or in Project JavaScript. It is available in all other custom code and after the Optimizely snippet has been executed.