This article will help you:
  • Execute JavaScript globally across all variations in an experiment
  • Apply CSS globally across all variations in an experiment

Optimizely allows you to use custom JavaScript and CSS in your experiments. In addition to variation code, which runs for a certain variation, you can use Experiment JavaScript and Experiment CSS to execute JS or CSS across all variations, including the original.

 
Tip:

Project JavaScript, available to select Enterprise accounts, allows you to insert custom JavaScript at the project level, without having to make direct changes to your site's code.

To access Experiment JavaScript and Experiment CSS, go to the Editor, then open the Options menu:

Experiment JavaScript

Experiment JavaScript allows you to write JavaScript that is accessible to all variations, including the original page.

Most commonly, you could use this to:

  • Send Optimizely information to your analytics service.
  • Add API calls for custom goals.
  • Add functions that can be used across multiple variations and call them with different parameters in the variation code.

For example, the code below sends a custom event API call when visitors scroll to a certain depth:



This code will send the tracking call with the correct variation index for each variation, but only needs to be implemented once.

As another example, this code would create an alert containing any string value and could be entered in the Experiment JavaScript:

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


Then, in the variation code for any given variation, you could just call the function with the value of your choice:

bringUpAlert("Variation #1")

Experiment CSS

Experiment CSS is a powerful tool that can help you define CSS properties of brand new content on the page without having to write it inline.

Experiment 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 differently.

The most effective use of Experiment CSS tends to be defining new classes and using those classes to either create new content or modifying existing elements by adding those classes.

For example:



In the screenshot above, we are defining a class called purchaseForm which sets a background-image property for whatever element it is assigned to. We are also defining the hover state of that class. You could use this CSS to create a rollover in your variations.

If we then add the following line of code to the <Edit Code> section, we will assign those properties to the element that has the id 'buyButton'. 



This is just one way you can use Experiment CSS to style existing content. You can define multiple classes and then insert some brand new HTML using the Edit Code section, which could reference those classes to create brand new content with very little effort.

If you'd like to create variation-specific CSS, then you should enter it into the Edit Code box using this jQuery selector:

$("body").append('<style> YOUR_CSS_HERE</style>');

Note that you can't enter CSS directly into the Edit Code box. Insert your CSS into the <style> tag, so that it looks something like this:

If you need to compact your CSS, use a tool like the HTML Minifier to condense your CSS before entering it into the variation code.