Custom code in Optimizely Web Experimentation and Optimizely Performance Edge

  • Updated
Relevant products:
  • Optimizely Web Experimentation
  • Optimizely Performance Edge
This topic describes how to:
  • Decide whether your experiments can benefit from adding custom code
  • Distinguish between variation-level code and experiment-level (shared) code
  • Add custom code to your Optimizely experiments

Optimizely Web Experimentation and Optimizely Performance Edge lets you use custom JavaScript or CSS code to make powerful changes to your site and extend your testing capabilities beyond Optimizely's standard toolkit. With custom code, you can:

  • Execute your custom code only for visitors bucketed into a particular variation instead of all visitors.

  • Use CSS selectors to change multiple similar elements simultaneously instead of making individual changes.

  • Load an external JavaScript file as part of a variation. For example, to add an Olark or ClickDesk widget. You cannot add code that includes a <script> tag using the Edit HTML feature in the Visual Editor, but you can paste external JavaScript into the <Edit Code> box. Optimizely executes your custom JavaScript by appending it as a <script> tag to the body of your page.

Variation-level code vs. experiment-level (shared) code

You can apply custom code at the variation level or apply it to an entire experiment across all variations (including the original). Common use cases for experiment-level JavaScript code include:

  • Sending Optimizely Experimentation information to your analytics service.

  • Adding API calls for custom events.

  • Adding functions that can be used across multiple variations and calling them with different parameters in the variation code.

Check out our shared code article to learn more about applying custom code to an entire experiment.

Add custom code to a variation

Add custom code to a variation with the step-by-step instructions below:

custom-code-javascript.gif

  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 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 have successfully added custom code to a variation.

Custom code timing: synchronous and asynchronous

Synchronous timing

Include the custom code in the snippet, applying the change before the page is visible. Use for lighter changes that need to run right away without flashing, like a headline swap.

Asynchronous timing

Download changes after the snippet, applying the change while the page loads. Use for heavier changes where a delay is not noticeable, like a popup or a section below the fold.

Change a custom code's timing with the steps below:

asynch2.gif

  1. Open the Variation Code Editor.

  2. Select the drop-down list next to the Help button. It should say either Synchronous Timing or Asynchronous Timing.

  3. Select the timing you want.

  4. Click the Save & Apply button.

Custom code in Optimizely Web Experimentation and Optimizely Performance Edge

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

  • Custom code runs immediately. 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 the timing by including code that specifies when things should run.

  • Custom code and visual changes are separated. Your visual changes are not instantly translated to code. Instead, we store the entire structure of what you change in the Visual Editor and list a summary of those changes in the left sidebar. These changes do not appear in the custom code box as they did before.

  • There is no jQuery dependency. If you do not need jQuery for your custom code (in variation code, experiment code or project code), you can remove jQuery from the Optimizely Web Experimentation snippet.

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

In traditional Optimizely Web Experimentation, optimizely.get(‘utils’) provides access to utilities like waitForElement, observeSelector poll, and waitUntil, all of which are documented here.

On a page running Optimizely Performance Edge, a reduced set of utilities is available on window.optimizelyEdge.get('utils'). The utilities available are documented in the Optimizely Performance Edge API Reference.

You can add your own jQuery. Check out this article to learn more about jQuery and the $ variable in Optimizely Web Experimentation. For more information about custom code, check out our developer documentation.

The following code does not work in Optimizely Personalization because the body element does not 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’);
});

Use the custom CSS option to make changes to your variation without worrying about timing. These CSS changes are applied by appending a <style> tag to the end of the <head> tag, which is more efficient than making style changes than JavaScript or jQuery.

Since there is no jQuery dependency in Optimizely Web Experimentation, you can remove jQuery from the Optimizely Web Experimentation snippet if you do not need it for your custom code (in variation code, experiment code or project code).