relevant products:
  • Optimizely Classic
this article will help you:
  • Force a portion of your variation code to evaluate immediately when Optimizely is loaded, instead of after DOM ready
  • Prevent your page from flashing by evaluating "pure" JavaScript before DOM ready

Optimizely uses a special algorithm to determine when it is safe to execute variation code. If you wish to override this behavior and force a portion of your variation code to evaluate immediately when Optimizely is loaded, you can do so by adding the optimizely_evaluate code to your variation like this:

   /* _optimizely_evaluate=force */
   window.myGlobalVariable = 25; 
   /* _optimizely_evaluate=safe */

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

This will work with both Experiment JavaScript and Variation Code.

In this example variation code the global variable window.myGlobalVariable will be defined as soon as Optimizely is loaded, and may be referred to in any JavaScript code that executes later on the experiment page in question. The modification of $j("img#hplogo"), however, will occur only after that element has been loaded into the DOM.

Conditional Statements

You can also force conditional statements (for example, “if” statements) to execute as soon as Optimizely is loaded. When using the force variation method to evaluate conditional statements, it is important to encapsulate the entire conditional statement or function and not just a single line within the conditional statement.

The correct way to force conditional statements to run immediately:

/* _optimizely_evaluate=force */ 
if(value = true){ 
/* _optimizely_evaluate=safe */ 

The incorrect way to force conditional statements to run immediately:

if(value = true){ 
/* _optimizely_evaluate=force */ 
/* _optimizely_evaluate=safe */ 

Notice that in the second example, the force variation comments are placed inside of a function or conditional statement (for example, inside of the “if” statement). In this situation, the code that is encapsulated by the comments will be removed from the conditional logic and executed immediately.

In other words, console.log(“Action”) will be forced to execute immediately, regardless of whether it passes the “if” condition. Functionally, the “if” condition will be broken, since the code inside the comments will always run. To avoid this, make sure to place the entire conditional statement inside the force evaluate comments.

Prevent Page Flashing

You should use this technique to prevent "page flashing," which is when your original page loads briefly before your variation appears. A root cause of page flashing may be "pure" JavaScript inserted in between lines of jQuery, which will cause Optimizely to wait for DOM Ready.

Example: Declaring or modifying a global variable in experiment JavaScript

You can manually edit the JavaScript code that causes a given variation to appear on your page during an experiment using Optimizely's <Edit Code> feature. In this section we describe how you can define or modify global variables using the Edit Code feature.

There are many reasons you might want to modify a global variable in an Optimizely variation:

  1. You might wish to modify the URL of a dynamically-loaded flash module or video in a given variation
  2. You might wish to modify the parameters sent to the server in an AJAX request in a given variation
  3. You might wish to add a special Google Analytics custom variable to your visitors in a given variation

In this example, let's pretend we're testing two different flash videos on a page:
- originalvideo.flv - video2.flv and we want to understand which video induces more visitors to purchase our product. The video in question is loaded dynamically on our landing page with this function, which is called at the bottom of the <head> section of our landing page:

var videoUrl = "/static/media/originalvideo.flv";

To create an Optimizely variation in which the second video is loaded instead of the first, we create an Optimizely variation like this:

/*  _optimizely_evaluate=force  */
window.videoUrl = "/static/media/video2.flv";
/*  _optimizely_evaluate=safe  */

and modify the video loading code to look like this:

if (typeof(window.videoUrl) == "undefined") {
  window.videoUrl = "/static/media/originalvideo.flv";

Here, the optimizely_evaluation comments force Optimizely to execute this code immediately after Optimizely is loaded (as opposed to when the DOM is ready), and adding the videoUrl variable to the window object defines it in a global context.

The alternative, which would not have worked, is to rewrite the section to look like this:

  <script src="//"></script>
  <script src="/static/js/mediaplayer.js"></script>
    if (typeof(window.videoUrl) == "undefined") {
      window.videoUrl = "/static/media/movie.flv";

and then create an Optimizely variation with the following code (remember, this WILL NOT work):

	window.videoUrl = "/static/media/movie2.flv";


The reason this won't work is that this variation code will not be executed until the DOM is ready. However, we can use the optimizely_evaluate flag to force this variation code to execute immediately.

Why can't you just use var to define your variables? Optimizely variation code does not execute in the global context, so any variables declared with var inside Optimizely variation code will not be reference-able outside of the variation code. For that reason, when using Optimizely as a split testing tool, you'll need to attach global variables to the window object (or any other global object) in order to refer to them outside Optimizely's context.  


Join in a discussion with fellow developers in the Optimizely Community and see how others are customizing Optimizely to meet unique business needs.