Custom JavaScript audience targeting

  • Updated
This topic describes how to:
  • Use custom JavaScript to determine whether visitors will be included in an experiment
  • Create customized audience conditions
  • Run experiments on a page not easily captured by URL Targeting
  • Run experiments for logged-in visitors
  • Run experiments only on certain days
  • Run experiments for visitors with certain meta values
  • Run experiments for visitors with certain screen sizes

Custom JavaScript Audience conditions allow you to target your experiment for a uniquely defined set of pages or visitors. Please check your Optimizely Web Experimentation package to learn whether this feature is available.

To create a Custom JavaScript condition, begin creating a new Audience, then add Custom JavaScript as a condition.

custom-js-audience.gif

Optimizely Web Experimentation's Custom JavaScript targeting condition allows you to write your own JavaScript that is evaluated for each experiment visitor. The condition must be a Boolean. If the condition evaluates to “true,” the experiment will run for the visitor. If the condition evaluates to “false,” the experiment will not run.  

The URL Targeting conditions for the experiment still apply. ALL specified URL Targeting and Audience conditions must be met in order for the experiment to run.
If you are using a specific variable defined on your page for Custom JavaScript Targeting, the variable MUST exist on the page ABOVE Optimizely Web Experimentation. Otherwise, when Optimizely Web Experimentation executes the condition will always evaluate to “false” since the variable or element does not yet exist.

A benefit of using Optimizely Web Experimentation as an AB testing tool is that you don't need to remove the flag from the page when you're done running a particular experiment. It's a relatively straightforward piece of code with zero side effects, and can be used for future experiments on the same group of pages!

Example: Running an experiment on pages that are not easily captured by URL targeting

Optimizely Web Experimentation's default URL targeting allows you to specify the pages where your experiment should run. However, you may wish to run an experiment on a group of pages or for a group of visitors that is not easily captured by the default targeting functionality.

When you set custom JavaScript conditions, the URL targeting conditions for the experiment still apply. ALL specified targeting conditions (URL and visitor) must be met in order for the experiment to run.

Example: Running an experiment on a page for logged-in visitors only

You want to run a test on your product page that targets only visitors that are currently logged in. You know there is a variable on your page called “logged_in” that is either set to “yes” or “no” according to the visitor’s status, but targeting based on cookies does not work.

<script type="text/javascript">     
  window.logged_in = “yes”; </script> 
<script src="//cdn.optimizely.com/js/XXXXXXX.js"></script>

Setting it up:

Create a JavaScript condition such as logged_in === “yes” that will evaluate to true only if the visitor is logged in.

logged-in.png

Example: Running an experiment on certain days

You want to test a weekday (Monday - Friday only) promotion on your homepage, but day/time conditions don't work. 

Setting it up:

Create a JavaScript condition such as new Date().getDay() > 0 && new Date().getDay() < 6 that will evaluate to true only when the day of the week is Monday – Friday (based on the visitor’s location).

get-day.png

Example: Running an experiment on pages with certain meta-values

You want to target customers that are on a page with a certain meta-value. 

Setting it up:

Create a JavaScript condition such as $(‘meta[name=”desired_value”]’).length > 0 that will ensure that the experiment only runs on pages with that meta-value.

site-verification.png

Example: Running an experiment for visitors with certain screen sizes

You have a responsive design site and only want the experiment to run for certain screen sizes. 

Setting it up:

Create a JavaScript condition such as screen.width > 1400 && screen.height < 800; that ensures that the experiment only runs if the screen width is greater than 1400 and the height is less than 800. 

screen-width.png

For information on how to use Optimizely Web Experimentation on responsive sites, check out our article on Optimizely and responsive design.

Example: Running an experiment for visitors who are not on mobile devices

You want to display an experiment to visitors who are not on mobile devices, but setting a condition based on device or browser does not work.

Setting it up:

Create a JavaScript condition such as: screen.width <= 800 && screen.height === 1280

screen-width-height.png

Or, if you know the device-specific userAgent that you would like to include/exclude, you can use this for your custom JavaScript.