Rich-text Reply

jQuery for Identifying Active and Activated Experiments in the Browser

cubelodyte 01-15-15
Accepted Solution

jQuery for Identifying Active and Activated Experiments in the Browser

Just wanted to pass along some little jQuery snippets I keep handy for identifying Experiments in a browser.

 

During the validation phase of writing and running Optimizely experiments, it's often helpful to be able to verify which experiments are Running or Active during any given browser session. I keep a set of jQuery code blocks handy for cutting and pasting into the developer console of Chrome or Firefox *.

 

In case there is any confusion over my use of the terms "Active" and "Activated":

 

  • Active - refers to the Optimizely Dashboard list category which includes "Running, Paused and Draft".
  • Activated - refers to Experiments and Variations that match targeting conditions and are applied to the current browser page. 

 

These code blocks will produce the following lists (shown with image of console results):

 

Experiment IDs for Active and Running experiments 

ExpIDs.jpg

Note: If your project is set to exclude Paused and Draft experiments, both lists should be identical.

 

//Array of Experiment IDs for CURRENTLY ACTIVE Experiments
var currExpArray=[];

//array of all experiments in project
var optyExpArray = Object.keys(optimizely.allExperiments);

for (var i = 0; i < optyExpArray.length; i ++) {
if (typeof(optimizely.allExperiments[optyExpArray[i]].enabled) !== 'undefined') //check for enabled property
currExpArray.push((optyExpArray)[i]);
}
console.log('IDs for Running, Paused, and Draft Experiments: ' + optyExpArray);
console.log('IDs for Running Experiments: ' + currExpArray);

 

Experiments and Corresponding Variations (2 versions: Active and Running)

ExpIDVarIDs.jpg

Active:

 

console.log('List of Experiments Running, Paused and Draft')
var optyExpArray = []; 
optyExpArray = Object.keys(optimizely.allExperiments);

if (optyExpArray && optyExpArray.length) { 
	var oData = window.optimizely.data;
	var mCnt = optyExpArray.length;
  var mExp = '';
  var tCount = 0;
  
  for (var i=0;i<(mCnt);i++) {
    mExp = optyExpArray[i];
    var curTest = oData.experiments[mExp].name;
	  console.log('Experiment #' + i + ': ID=' + mExp + ' Name="' + curTest + '"');

    var vExp = '';
    var varArray = [];
    varArray = oData.experiments[mExp].variation_ids;
    var vCnt = varArray.length;
    for (var ii=0;ii<(vCnt);ii++) {
    	vExp = oData.experiments[mExp].variation_ids[ii]
    	var curVar = oData.variations[vExp].name;
    	console.log('    Variation #' + ii + ': ID=' + vExp + ' Name="' + curVar + '"');
    }
    tCount += 1;
  }
}

 

Running:

 

console.log('List of Running Experiments')

//array of all experiments in project
var optyExpArray = [];                      																					
optyExpArray = Object.keys(optimizely.allExperiments);

//Array of Experiment IDs for Currently Enabled Experiments
var currExpArray=[];      

for (var i = 0; i < optyExpArray.length; i ++) {
     if (typeof(optimizely.allExperiments[optyExpArray[i]].enabled) !== 'undefined') 	//check for enabled property
     currExpArray.push((optyExpArray)[i]);
}

if (currExpArray && currExpArray.length) { 
	var oData = window.optimizely.data;
	var mCnt = currExpArray.length;
  var mExp = '';
  
  for (var i=0;i<(mCnt);i++) {
    mExp = currExpArray[i];
    var curTest = oData.experiments[mExp].name;
    tCount += 1;
	  console.log('Experiment #' + i + ': ID=' + mExp + ' Name="' + curTest + '"');

    var vExp = '';
    var varArray = [];
    varArray = oData.experiments[mExp].variation_ids;
    var vCnt = varArray.length;
    for (var ii=0;ii<(vCnt);ii++) {
    	vExp = oData.experiments[mExp].variation_ids[ii]
    	var curVar = oData.variations[vExp].name;
    	console.log('    Variation #' + ii + ': ID=' + vExp + ' Name="' + curVar + '"');
    }
  var tCount = 0;
  }
}

 

Experiments activated for the current browser page

ActivatedExp.jpg

 

console.log('Experiments activated on this page')
var oData = window.optimizely.data;
var activeExperiments = oData.state.activeExperiments;

if (oData.state.activeExperiments && oData.state.activeExperiments.length) {
  activeExperiments = oData.state.activeExperiments;
  
  var mCnt = activeExperiments.length;
  var mExp = '';
  var tCount = 0;
  
  for (var i=0;i<(mCnt);i++) {
    mExp = activeExperiments[i];
    var curTest = oData.experiments[mExp].name;
    var curVar = oData.state.variationNamesMap[mExp];
    var curVarID = oData.state.variationIdsMap[mExp];

    tCount += 1;
	  console.log('    Experiment #' + tCount + ': ID=' + mExp + ' Name="' + curTest + '" Variation: ID=' + curVarID + ' Name="' + curVar + '"');
  }
}

* - These will not work in IE because IE doesn't play well with console.log.

Scott Ehly
Manager of Site Optimization
sehly@rentpath.com

'The single biggest problem with communication is the illusion that it has taken place.' - George Bernard Shaw
Aisha 01-15-15
 

Re: jQuery for Identifying Active and Activated Experiments in the Browser

Thanks for these, cubelodyte. I tested them out, and they worked for me. These are useful snippets to use in conjunction with those in our Javascript API: http://developers.optimizely.com/javascript/#experiments-25
Customer Success and Technical Support @ Optimizely!
Optimizely
Aicke 02-05-16
 

Re: jQuery for Identifying Active and Activated Experiments in the Browser

[ Edited ]

One-liner to show currently active variations on the page:

 

$.each(optimizely.activeExperiments, function(index, experimentId) { console.log({'id': experimentId, 'variant': optimizely.variationNamesMap[experimentId]}); });

 

Everything is hard, before it is easy.
Level 2