Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Custom code in Optimizely X

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
relevant products:
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

THIS ARTICLE WILL HELP YOU:
  • Add custom code to your Optimizely X experiments 

Optimizely X allows you to use custom JavaScript or CSS code to extend your testing capabilities even beyond Optimizely's standard toolkit.

When you add custom code to an experiment, you'll use the Editor to apply it to individual variations in your experiment. This way, you can make sure your custom code executes only for visitors bucketed into a particular variation, instead of running for any and all visitors.

Optimizely X executes your custom JavaScript by appending it as a script tag to the body of your page. Your custom code will run immediately, exactly as written, and often before the DOM is ready. This is to provide developers with as much control as possible over the timing of custom code execution; they can modify that timing by including code that specifies when things should run.

If you want to make changes to your variation that aren't timing-dependent, you can use custom CSS instead. These CSS changes are applied by appending a style tag to the end of the body tag, for a more efficient way of making style changes than JavaScript or jQuery.

For more information on custom code, check out the developer documentation.

Optimizely Classic did not run custom code immediately; instead, it waited for the specified element to be ready on the page. Because of this, custom code you've used in Optimizely Classic may not work in Optimizely X Web Experimentation or Personalization.

For example, the following code won't work in Personalization, because the body element doesn't exist at the time when the code runs:

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

To delay running the code until the whole page is loaded, use jQuery’s document.ready function:

$(document).ready(function() { 
$(‘body’).css(‘background-color’, ‘red’);
}); 

Since there is no jQuery dependency in Optimizely X, you can remove jQuery from the Optimizely snippet if you don't need it for your custom code (in variation code, experiment code or project code). 

Utility functions are now available. Learn more in our developer documentation.

Add custom code to a variation in Optimizely X

Here's how to add custom code to a variation, with step-by-step instructions below:

  1. From the Experiments dashboard, click the name of the experiment.

  2. Select the variation you want to enhance with custom code. This opens the Editor.

  3. Click the Variation Code Editor button (image03.png) in the top-right of the Editor window to begin adding custom code.

  4. The Variation Code Editor window opens to the JavaScript tab, where you can add custom JavaScript to the variation. Click the CSS tab to add custom CSS.

  5. Paste or type your code into the Variation Code Editor text box.

  6. Click Save & Apply (JavaScript) or Save (CSS) to save your custom code. To cancel your changes, click Revert to Saved instead.

Congratulations! You've successfully added custom code to a variation.