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. Read more here.

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 will only run an experiment when a certain meta value is present on the page.

JavaScript

/*
 * Usage
 * Replace "desired_value" with the name of the meta value you're testing for.
 */

 $('meta[name="desired_value"]').length > 0

Target 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.

JavaScript

/*
 * 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 <= 640

Target specific user agents

The following condition will only run for visitors using the Google Chrome web browser.

JavaScript

/*
 * Usage
 *  Targets visitors based on user-agent.
 */

 window.navigator.userAgent.indexOf("Chrome") !== -1

Variation code

These code samples will help you write Variation code in the visual editor.

Bind events

Bind events to each product on a category page. This example is intended for an e-commerce site.

JavaScript

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>"
      });
    });
  });
};