Skip to main content

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

Optimizely Knowledge Base

Custom code in Optimizely X Web

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

  • Add custom code to your Optimizely X experiments 

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

When you add custom code to an experiment, you'll use the Visual 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.

Here are a few things to keep in mind about custom code in Optimizely X:

  • Custom code runs immediately. Because visual and code changes were mixed together, Optimizely Classic polled for each line separately and tried to run it when elements were ready. In Optimizely X, we removed this behavior so that your code runs exactly as written, often before the DOM is ready. This gives you as much control as possible over the timing of custom code execution. You can modify that timing by including code that specifies when things should run.

  • Custom code and visual changes are separated. If you've been using Optimizely Classic, you're probably used to the changes you make in the Visual Editor turning immediately into jQuery in the Edit Code box. For example, if you changed a headline’s text using the Visual Editor, you’d see code like $(‘h1’).text(‘New Headline’); in the Edit Code box.

    In Optimizely X, we’ve changed this behavior. The visual changes that you make aren’t instantly translated to code. Instead, we store the full structure of what you change in the Visual Editor and simply list a summary of those changes in the left sidebar. These changes do NOT show up in the custom code box the way they did before.

  • There is no jQuery dependency in Optimizely X. If you don’t need jQuery for your custom code (in variation code, experiment code or project code) you can remove jQuery from the Optimizely snippet.

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

You can still add your own jQuery in Optimizely X. Check out this article to learn more about jQuery and the $ variable in Optimizely X. For more information about custom code, check out our 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 (and remember, custom code runs immediately):

$(‘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’);

If you want to make changes to your variation without worrying about timing, use the custom CSS option. 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.

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

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 icon (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.