Advanced experiment configuration
Code samples you can use to help advanced use cases in Optimizely Web Experimentation.
These code samples can be used within Shared Code or the variation code in the Visual Editor.
Execute code for a certain number of visits
The following JavaScript sample lets you execute code a certain number of times within an experiment. For example, you might want to show a popup to visitors only on their first three visits.
/*
* Usage
* The following lets you to set a limit on the number of times a
* Code Block executes for any given visitor.
*/
// the number of times the code should execute for a given visitor
var limit = 3;
// the number of days the evaluation limit should last
var days = 180;
// name of the cookie we use as the counter
var cookieName = 'counterCookie';
// function to fetch cookie values
var getCookie = function(name) {
var match = document.cookie.match(name+'=([^;]*)');
return match ? match[1] : undefined;
};
// function to create cookies
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=/";
}
// logic that counts and limits number of times code can evaluate for given visitor
if (!getCookie(cookieName)) {
setCookie(cookieName, 1, days, window.location.hostname);
} else {
var numberPops = parseInt(getCookie(cookieName)) + 1;
setCookie(cookieName, numberPops, days, window.location.hostname);
}
if (getCookie(cookieName) <= limit) {
// INSERT code to evaluate HERE
}
Change page title
The following JavaScript modifies the text of the browser tab when a visitor focuses and un-focuses on the tab. You can display one title when a visitor is focused on the tab and a different title when they toggle to a different tab or window.
/*
* Usage
* The following code modifies the title of the browser tab on the
* "blur" event and change it back to the original on the "focus" event.
*
*/
// store the original tab title
var origTitle = document.title;
// function to change title when focusing on tab
function oldTitle() {
document.title = origTitle;
}
// function to change title when un-focusing on tab
function newTitle() {
document.title = 'HELLO WORLD';
}
// bind functions to blur and focus events
window.onblur = newTitle;
window.onfocus = oldTitle;
Get Optimizely data for custom events
The following JavaScript provides the Optimizely Data Object with the information necessary to retrieve relevant data. You can use this data with internal tools, the Event API, or custom analytics integrations.
/*
* Usage
* Loops through the Optimizely Data Object to return the information
* necessary to construct the Event API payload.
*
*/
var campaign_data;
var state = optimizely.get('state');
// return all active campaigns
campaign_data = state.getCampaignStates({"isActive": true});
for (var campaign_id in campaign_data) {
if (campaign_data.hasOwnProperty(campaign_id)) {
// Returns campaign_id, experiment_id, variation_id
var data = state.getDecisionObject({"campaignId": campaign_id});
// code to use data
}
}
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
Updated 10 days ago