Target audiences with custom JavaScript

  • Updated
  • Optimizely Web Experimentation
  • Optimizely Performance Edge
  • Optimizely Personalization

Custom JavaScript audience conditions let you target your experiment for a uniquely defined set of pages or visitors. 

To create a Custom JavaScript condition, begin creating an audience, then add Custom JavaScript as a condition.

targeting-new-audience-6.png

Optimizely Web Experimentation's Custom JavaScript targeting condition lets you 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 runs for the visitor. If false, the experiment does not 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 is evaluated 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 do not need to remove the flag from the page when you are done running a particular experiment.

Experiment on pages that are not easily captured by URL targeting

Optimizely Web Experimentation's default URL targeting lets you specify the pages where your experiment should run. However, you may want 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.

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 use 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>

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

logged-in.png

Experiment on certain days

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

Create a JavaScript condition such as new Date().getDay() > 0 && new Date().getDay() < 6 that evaluates to true only when the day of the week is Monday (day 1), Tuesday (day 2), Wednesday (day 3), Thursday (day 4), or Friday (day 5) (based on the visitor’s location).

get-day.png

Experiment on pages with certain meta-values

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

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

site-verification.png

Experiment for visitors with certain screen sizes

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

Create a JavaScript condition such as screen.width > 1400 && screen.height < 800; that ensures that the experiment runs only 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, see Optimizely and responsive design.

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.

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

screen-width-height.png

If you know the device-specific userAgent that you want to include or exclude, you can use this for your custom JavaScript.