Helper functions
Describes how to run experiments using helper functions.
The following are some helper functions you might find useful to run more customized experiments in Optimizely Web Experimentation. These code samples are typically used in Shared Code, Project JS, or the variation code in the Visual Editor.
Read cookie
This function reads a cookie from the visitor's browser and returns the value.
/*
* Usage
* This function returns the value of the cookie name passed in as the argument.
*
* @param {String} name - The name of the cookie.
*/
var getCookie = function(name) {
var match = document.cookie.match(name+'=([^;]*)');
return match ? match[1] : undefined;
};
Set cookie
This function sets a cookie and accepts the cookie's name, value, domain, and duration in days as arguments.
/*
* Usage
* This function sets a cookie on the visitor's browser.
*
* @param {String} c_name - The name of the cookie.
* @param {String} value - The value of the cookie.
* @param {Float} exdays - The number of days the cookie should last.
* @param {String} c_domain - The domain on which this cookie should be set and can be read.
*
*/
var setCookie = function(c_name,value,exdays,c_domain) {
c_domain = (typeof c_domain === "undefined") ? "" : "domain=" + c_domain + ";";
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value + ";" + c_domain + "path=/";
}
Poll for element
This function polls for the variable accountBalance and displays an appropriate message. This is useful when you want to modify an element that is not injected into the DOM until shortly after the document is ready.
var utils = window["optimizely"].get("utils");
var cancelPolling = utils.poll(function() {
if (typeof accountBalance !== 'number') {
if (accountBalance <=20) {
headerElement.innerHTML = 'Your account balance is low! Add funds';
} else {
headerElement.innerHTML = 'Your account balance is in good standing.';
}
cancelPolling();
}
}, 1000);
Load external JavaScript
This function appends an external JavaScript to the head of the document. You can optionally provide a callback function as well.
/*
* Usage
* This function appends an external JavaScript to the head of the document.
*
* @param {String} location - The location of the file you'd like to load.
* @param {Function} callback - [OPTIONAL] A function to call when the script has completed downloading.
*
*/
var loadScript = function(location, callback){
var fileRef = document.createElement('script');
fileRef.setAttribute('type','text/javascript');
if (callback) {
if (fileRef.readyState) { // IE
fileRef.onreadystatechange = function() {
if (fileRef.readyState == 'loaded' || fileRef.readyState == 'complete') {
fileRef.onreadystatechange = null;
callback();
}
};
} else { // Non-IE
fileRef.onload = function(){
callback();
};
}
}
fileRef.setAttribute('src', location);
document.head.appendChild(fileRef);
};
loadScript('http://www.example.com/test.js', function() {
// CALLBACK - code that does something with the data returned by loading the script
});
Get query parameter value
This function returns the value of a query parameter. This is useful if you want to render a query parameter value on the page itself.
For example, you can store a visitor's search term in a query parameter. You can use this function to render their search term on the page, providing a personalized experience.
/*
* Usage
* This function takes a query parameter name and returns its value.
*
* @param {String} name - The name of the query parameter, whose value you want returned.
*/
var getQueryParam = function(name) {
var match = window.location.search.match(name + '=([^&]*)');
return match ? match[1] : undefined;
}
// example showing the function called, with the return value inserted in the first h1 element
$('h1:eq(0)').text(getQueryParam('myParam'));
Sticky navigation bar
This JavaScript makes one element's position fixed once the visitor scrolls below its original position. You could also achieve this by leveraging Extensions. The following is a code sample of a Banner bar:
/*
* Usage
* Pass in the ID of an element whose position you want fixed once the visitor scrolls past the element's initial position.
* If the visitor scrolls up again, the element takes on its original position.
*
* @param {String} id - The CSS ID of the element you want to have fixed position.
*
*/
var makeSticky = function(id) {
var menuOffset = document.getElementById(id).offsetTop;
var docScroll = $(document).scrollTop();
$(document).bind('ready scroll', function() {
docScroll = $(document).scrollTop();
if(docScroll >= menuOffset) {
$('#'+id).css({'position':'fixed', 'top':'0', 'z-index': '1000'});
} else {
$('#'+id).css({'position':'initial','z-index':'0'});
}
});
}
// Usage example
makeSticky('mainNavBar');
Access data on page
This is an example of using JavaScript to access an object defined outside of the Optimizely snippet.
Note
The variable must be declared above the snippet so that it is defined before Optimizely Web Experimentation evaluates audience conditions or executes experiment code.
/*
* Example showing how to reference a variable defined natively on the page from inside Optimizely.
*/
// Variation code example injecting the 'visitorName' property of the 'exampleObject' in the h3 elements
$('h3').text('Hello,' + window.exampleObject['visitorName']);
Get active variations
This JavaScript gets active Experiment IDs and their Variation IDs for Optimizely Web Experimentation and Personalization campaigns.
/*
* Get active Experiment IDs and their Variation IDs for both Optimizely X Web Experiments and Personalization Campaigns.
*/
var activeCampaigns = optimizely.get('state').getCampaignStates({isActive:true});
for (var key in activeCampaigns) {
if (activeCampaigns.hasOwnProperty(key)) {
console.log("ExperimentId: " + activeCampaigns[key].experiment.id + ", variationId: " + activeCampaigns[key].variation.id);
}
}
Note
The experiment ID and variation IDs generated by Optimizely are 16-digit numbers. This can potentially cause issues with analytics integrations that might misinterpret these IDs as credit card numbers, resulting in data being flagged or removed.
To prevent this, consider incorporating a letter prefix or using a combination of name and ID (for example
expID(expName)
orvarID(varName)
) in your integration configuration. Adjustments may be necessary for custom integrations to ensure data is captured correctly
Get active tags
This JavaScript returns the values of all tags for all active pages using the getPageStates API.
function getActiveTags() {
var pages = optimizely.get('state').getPageStates()
var activePages = pages ? Object.values(pages).filter(function(page) {
return page.isActive && page.tags.length
}) : []
var tags = []
activePages.forEach(function(page) {
tags = tags.concat(Object.values(page.metadata))
})
return tags
}
Updated 10 days ago