Shared code: Run custom JavaScript and CSS across all variations

  • Updated

Relevant products:

  • Optimizely Web Experimentation
  • Optimizely Performance Edge
This topic describes how to execute JavaScript across all variations in an experiment, and apply CSS across all variations in an experiment.

With Optimizely Experimentation, you have the flexibility to add your own customized JavaScript or CSS code to your experiments. You can apply this custom code at the variation level, or you can use Optimizely's shared code feature to apply it to an entire experiment, across all variations.

Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It does this by relying on a streamlined "microsnippet" which limits the range of available features.

Optimizely Performance Edge and Optimizely Web Experimentation handle custom code the same way, so all information contained in this article applies to experiments created with either version of Optimizely.

Some common use cases for shared JavaScript code in Optimizely Experimentation include:

  • Sending Optimizely 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.

Shared JavaScript is the first thing to evaluate once a visitor is bucketed into the experiment and is run across all variations within the experiment.

shared-code-javascript.png

As an example, typing this JavaScript code into the shared code box would create an alert containing any string value:

window.bringUpAlert = function(value) {
  alert("You are in " + value);
};

Then, in the custom code for a particular variation, you could just call the function with the value of your choice:

bringUpAlert("Variation #1")

Shared CSS lets you define CSS properties of brand new content on the page without having to write it inline.

Shared CSS affects all variations, so modifying the CSS of an existing class or element will cause all the variations (including the original page) to display the new style or behavior.

Many Optimizely Experimentation users commonly use shared CSS to define new classes, and then use those classes to either create new content or modify existing elements by adding those classes.

For example:

shared-code-css.png

This code defines a class called purchaseForm, which sets a background-image property for whatever element it is assigned to. It also defines the hover state of that class. You could use this CSS to create a rollover in your variations.

Add custom JavaScript or CSS to an experiment's shared code

Adding shared code is a straightforward task. From your experiment's dashboard, click Shared Code.

shared-code-nav.png

Next, in the Shared Code dashboard, click on either the JavaScript or CSS tab, depending on which type of code you're adding.

shared-code.png

Now type or paste your code into the text window and click Save & Apply, or click Revert to Saved to discard your changes and start over.