Shared code: Run custom JavaScript and CSS across all variations

6 min

Optimizely Web Experimentation

Optimizely Performance Edge

Optimizely Personalization

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

Note

Optimizely Performance Edge and Optimizely Web Experimentation manage custom code the same way.

Shared JavaScript code

You can use shared JavaScript code to:

Send Optimizely information to your analytics service.

Add API calls for custom events.

Add functions that can be used across multiple variations and call them with different parameters in the variation code.

Note

Shared JavaScript evaluates first after a visitor is bucketed into the experiment and is run across all variations within the experiment or campaign.

For example, enter the following JavaScript code into your experiment's or campaign's Shared Code's JavaScript tab to create an alert that contains any string value:

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

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

bringUpAlert("Variation #1")

Shared CSS

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

Note

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

It is common to use shared CSS to define classes and then use those classes to create content or modify existing elements by adding those classes.

For example:

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

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

Click an experiment or campaign.

Click Design > Shared Code.

Go to the JavaScript or CSS tab, depending on which type of code you want to add.

Type or paste your code into the text window and click Save or click Revert****to Saved to discard your changes and start over.

See Custom code in Optimizely Web Experimentation and Optimizely Performance EdgeCustom code in Optimizely Web Experimentation and Optimizely Performance Edge.