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:
-
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.
-
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:
- Project JS (learn more)
- Campaign JS
- Campaign CSS
- Experience / Experiment JS
- Experience / Experiment CSS
- 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.
Updated 6 months ago