This article will help you:
  • Understand how Optimizely executes on a page, including segmentation, targeting, traffic allocation, variation code, and goals
  • Understand how Optimizely evaluates variation code for an experiment
  • Diagnose timing issues with experiments

Optimizely creates campaigns on your site by executing a one-line JavaScript snippet that contains your unique Project ID. Once you implement the snippet, you can start building experiments and campaigns on your site. This snippet automatically updates to run any campaign you create in the Editor.

Read on to learn how the snippet makes decisions and executes changes on the page. 

Optimizely's snippet uses persistent visitor-level cookies to uniquely identify visitors and track their actions. It sets a number of cookies, each storing a different set of data. Learn about cookies and localStorage in Optimizely Testing and Personalization.

Non-Technical Explanation

How does Optimizely work, without getting into a technical explanation? Simple: Optimizely allows you to perform A/B testing (also known as split testing), and multivariate testing on web and mobile, so that you can compare different versions of an experience to determine which leads to a better user experience and more conversions.

Optimizely runs on your website by executing via a one-line JavaScript  snippet -- one line of code that will load Optimizely on your site and change the experience for visitors who are bucketed into the "variations" (but not for visitors who are meant to see the "baseline" or "original" experience).

If you're testing your mobile apps, Optimizely runs through an SDK (Software Development Kit) for iOS and/or Android.

Finally, Optimizely collects data on your visitors and conversions and runs them through our Stats Engine to show you which variations were winners or losers, compared to your baseline, so that you can make decisions about which changes to implement on your site.

Here's a quick visual on how the process works:

How else can you use Optimizely? In addition to A/B and Multivariate testing, you can:

Technical Explanation

Optimizely Snippet Order of Execution

The following diagram illustrates the order of operations for the Optimizely code snippet as it would execute synchronously during page load. The cookies in this diagram are described below.

If Manual or Conditional activation are implemented, you must check activation mode before targeting conditions.

In this case, here is a diagram of the order of execution you would use:

Variation Code: How Optimizely modifies the page

In the above diagram, you see that there is a box labeled "Experiment Variation Code Execution." What is Variation Code? When you create a variation of your page in the Optimizely Editor, each action you take in the editor is encoded as a line of JavaScript.

After you've begun your experiment, this JavaScript is executed when your visitors load that page in order to display the variation. For example, when you swap one image out for another, the corresponding JavaScript code looks something like this:

$("img#hplogo").attr({"src":"//cdn.optimizely.com/img/a/05ac207c778548959fe1ff374d111296.gif"});

 

This line of code literally tells your visitor's browser to swap the image you highlighted in the editor with a new one you uploaded (which is now stored on Optimizely's servers, as for the above code example you can see here).

While creating variations in the Optimizely Editor you can always click "Edit Code" in the bottom righthand corner of the screen to see this code and, if you feel comfortable, edit it yourself.

The Optimizely Editor generates a line of JavaScript for each change you make in a variation of your experiment page. These auto-generated lines of JavaScript have the following structure:

$("img#hplogo").css({"width":254, "height":112});
|__IDENTIFIER_| |____________ACTION____________|

and comprise a jQuery identifier for the currently highlighted element (in this case, an image with id attribute "hplogo"), along with an action (in this case, adjusting the width and height dimensions).

How Optimizely evaluates variation code

Optimizely must deal with two constraints while evaluating variation code:

  1. The code must be evaluated as soon as possible, so that the "Original Page" content does not flash on the screen
  2. The code cannot be evaluated before the elements on the page to which it refers are loaded into a browser's memory

In order to navigate these constraints, Optimizely uses the following algorithm to evaluate variation code, line by line:

In the above diagram, you'll see that if you include "Pure" JavaScript (not jQuery) in your variation code, Optimizely will wait until DOM ready to evaluate all variation code afterward. The actual Regular Expression used to evaluate your variation code is:

^\$j?\((['"].+?['"]|document)\)\..+;(?:\s|(?:\/\/.*|\/\*(?:[^*]|\*(?!\/))*\*\/))*$


Optimizely's order of execution may cause the variation page to "flash" before loading. You can override this behavior and force part of your code to evaluate immediately after Optimizely loads by adding an optimizely_evaluate flag, as the linked article describes. Optimizely's evaluation flag follows this format:

   /* _optimizely_evaluate=force */
   your "pure JS" goes here
   /* _optimizely_evaluate=safe */
 
Tip:

You may be wondering whether comment code or empty lines will also delay loading until DOM ready. /* */ block-style comments on multiple lines will delay Optimizely evaluation until DOM ready. For instance:

/* 
  Comments written this way
  Will delay your code from executing until
  DOM ready
*/

// Comments written this way on a single line will have 
no impact on your tests


Blank lines and // comments will not delay loading, so use // as a best practice for comments.

When formatting complex jQuery, please note that jQuery written on multiple lines will delay Optimizely variation code from displaying on the page until DOM ready.