Custom JavaScript targeting allows you to inject JavaScript into a page, then target your experiments based on the value that the JavaScript returns.
In this article:When to use Custom JavaScript targeting
Use custom JavaScript when you want to build targeting conditions based on webpage information that can’t be retrieved from the URL, the data layer, JavaScript variables, or other targeting. Your custom JavaScript must be a single JavaScript function that returns a value using the 'return' statement. You can then target visitors based on the value that your JavaScript returns.
Note: All user-defined JavaScript must be declared above the Optimize container snippet, in the <HEAD> of the page. JavaScript declared after the Optimize snippet will not be available to target on page load.
Example: Target visitors browsing your site in the morning
You want to target experiments to users visiting your site during the morning hours. To do this, write a JavaScript function that returns the current hour (with possible values 0-23). Then, create a targeting condition that looks for a returned value that is less than 12.
Step 1: Create a custom variable
- Create or edit an experiment.
- Click the TARGETING tab.
- Click AND to add a new targeting rule.
- Click Custom JavaScript.
- Click Variable, then Create new...
- Optionally, click an existing variable to edit it.
- Enter your Custom JavaScript in the open text field (see a sample below).
- Name your variable – for example,
Browser time. - Click CREATE VARIABLE.
Sample JavaScript which returns the time that the browser’s clock is set to:
function() {
return (new Date()).getHours();
}
Step 2: Build a condition with your custom variable
After creating your custom variable, Optimize will populate it in a new targeting condition which you can complete by adding a match type and value. For this example, build a targeting condition that looks for a returned value of 11 or less and click SAVE.
| Variable | Match type | Value |
| Browser time | less than | 12 |
This condition will evaluate true if:
- the value of the Browser time variable is less than
12.
This condition will evaluate false if:
- the value of the Browser time variable is
12or greater.
Note: Be cautious with JavaScript code that will have side effects. Your code shouldn't alter/update the DOM or any variables currently stored on the page. Also, make sure that your app's logic doesn’t depend on this code having been run.
Match types
The following match types are available in JavaScript variable targeting:
- Equals / does not equal
- Contains / does not contain
- Starts with / does not start with
- Ends with / does not end with
- Regex matches / does not regex match
- Less than
- Less than or equal
- Greater than
- Greater than or equal
Equals / does not equal
Every character, from beginning to end, must be an exact match of the entered value for the condition to evaluate as true. A condition using does not equal will evaluate as true when the query parameter does not equal any of the entered values.
Example:
| Variable | Match type | Value |
| Logged in cookie | equals | true |
Will evaluate true when the value of the variable is true.
| Variable | Match type | Value |
| Logged in cookie | does not equal | true |
Will evaluate true when the value of the variable is false.
Contains / does not contain
The contains match type (also known as a "substring match") allows you to target any occurrence of a substring with a longer string.
Example:
| Variable | Match type | Value |
| page | contains | 4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=4
| Variable | Match type | Value |
| page | does not contain | page=4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=2
Starts with / does not start with
The starts with match type matches identical characters starting from the beginning of the query string up to and including the last character in the string you specify.
Example:
| Variable | Match type | Value |
| page | starts with | 4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=4
| Variable | Match type | Value |
| page | does not start with | 4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=2
Ends with / doesn't end with
An exact match of the entered value with the end of the URL. You can target shopping cart pages that use /thankyou.html at the end of their URLs.
Example:
| Variable | Match type | Value |
| page | ends with | 4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=24
| Variable | Match type | Value |
| page | does not end with | 4 |
Will evaluate true for:
http://www.example.com/member.cgi?id=9&page=42
Regex matches / does not regex match
A regular expression uses special characters to enable wildcard and flexible matching. Regex matches are useful when the stem, trailing parameters, or both, can vary in the URLs for the same webpage. If a user could be coming from one of many subdomains, and your URLs use session identifiers, you could use a regular expression to define the constant element of your URL.
Example:
| Variable | Match type | Value |
| page | regex matches | checkout.cgi\?page=1 |
Will evaluate true for:
http://sports.example.com/checkout.cgi?page=1&id=123http://fishing.example.com/checkout.cgi?page=1&lang=en&id=123
| Variable | Match type | Value |
| page | does not regex match | checkout.cgi\?page=1 |
Will evaluate true for:
http://sports.example.com/checkout.cgi?page=2&id=123
Operators
AND
The AND operator is useful when you wish to target a variation based on multiple rules that all need to be true. Conditions using the AND operator will only evaluate as true when all of the values are met.
Example:
To target users searching for nexus, while browsing from a tablet, create two rules joined by the AND operator.
A query parameter targeting rule:
| Variable | Match type | Value |
| search query | equals | nexus |
...and a technology targeting rule:
| Variable | Match type | Value |
| Device Category | equals | tablet |
OR
The OR operator is useful for targeting one kind of page with multiple URL configurations. Conditions using the OR operator will evaluate as true when any of the values are met. You can use OR by adding additional values in a URL targeting rule. When targeting URLs, OR is automatically appended to your first URL after pressing return. Simply type additional URLs (followed by return) to continue building conditions with the OR operator.
Example:
To target searches on your website for either nexus or chromecast, create a rule with two site search in the Value field. You'll notice that OR is automatically added after you press enter.
| Variable | Match type | Value |
| search query | equals | nexus or... chromecast |
The OR operator is supported within individual conditions but you can't use it to combine multiple conditions. For example, you can build a condition like this: "path equals /store OR /shop" but you can't use OR across multiple conditions like this: "path equals /store OR host equals example.com"
Related targeting articles
- Introduction to Optimize targeting
- URL targeting
- Query Parameter targeting
- Audience targeting
- Behavior targeting
- Geo targeting
- Technology targeting
- First-party cookie targeting
- Data Layer variable targeting
- JavaScript variable targeting
- Custom JavaScript targeting
- Google Analytics Cookie Usage on Websites – Analytics Developers