Shared code: Run custom JavaScript and CSS across all variations

  • Updated
  • 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 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 an experimentation product that delivers faster performance than previous versions of Optimizely. It does this by using a streamlined microsnippet which limits the range of available features.

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.

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.

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

  1. Click on an experiment or campaign.
  2. Click Shared Code.
  3. Go to the JavaScript or CSS tab, depending on which type of code you want to add.
  4. Type or paste your code into the text window and click Save or click Revert to Saved to discard your changes and start over.