Custom audience targeting
You can use these code samples in the Custom JS Audience Condition. The JavaScript within this condition must evaluate to a Boolean value on the last line of the code.
📘 Note jQuery is not included in the snippet by default and is required for the following samples. This can be configured in the Settings tab.
Access data on page
This is an example of using JavaScript to access an object defined outside of the Optimizely snippet. The variable must be declared above the snippet, so it is defined before Optimizely Web Experimentation evaluates audience conditions or executes the experiment code. See Target audiences with custom JavaScript.
/*
* Usage
* Example showing how to reference a variable defined natively on the page from inside Optimizely.
*
*/
// Audience condition example checking the 'category' property of the 'exampleObject'
window.exampleObject['category'] == 'shirts';Target pages based on meta values
The following condition only runs an experiment when a certain meta value is present on the page.
/*
* Usage
* Replace "desired_value" with the name of the meta value you're testing for.
*/
$('meta[name="desired_value"]').length > 0Target visitors based on screen size
The first condition will ensure that the experiment only runs if the screen width is greater than 1400 pixels and the height is greater than 800 pixels. The second condition will ensure the experiment only runs if the viewport width is between 320 and 480 pixels and the height is less than or equal to 640 pixels.
/*
* Usage
* Specifies window size (in pixels) to target visitors.
*/
//target desktop viewports
//matches CSS media queries for height/width or max/min-height or -width
window.innerWidth > 1400 && window.innerHeight > 800
//target mobile phones
//matches CSS media queries using device-height and device-width
screen.width >= 320 && screen.width <= 480 && screen.height <= 640Target specific user agents
The following condition will only run for visitors using the Google Chrome web browser.
/*
* Usage
* Targets visitors based on user-agent.
*/
window.navigator.userAgent.indexOf("Chrome") !== -1Bind events
Bind events to each product on a category page. This example is intended for an ecommerce site.
function variationCode() {
// select your product item elements
$('<selector>').each(function(){
// can be used to target elements inside the product item container
$(this).find('<selector>').css('color','red');
// can be used to bind events to elements inside the product item container
$(this).find('<selector>').bind("click", function() {
window['optimizely'].push({
type: "event",
eventName: "<event name>"
});
});
});
};