Pages & URL targeting

A page tells ABlyft where an experiment should run. It consists of URL rules and, if needed, a piece of JavaScript. You create a page once and attach it to as many experiments as you like.

An experiment only runs on a visitor's current page if at least one of its attached pages matches. Without a page, an experiment cannot be started.

Create a pageCopy Anchor Link

There are two ways:

• From an experiment: in the card Pages ("WHERE should it run?"), click +. The new page is attached to the experiment automatically.
• From the navigation: go to Targeting & Goals → Pages and create a new page. Later, attach it to an experiment with the selection button in the Pages card (the window is titled "Attach pages to experiment").

The page form has these sections:

URL rulesCopy Anchor Link

In Targeting, add one rule per row with Add new URL. Each rule has three parts:

How rules are combinedCopy Anchor Link

• The page matches if at least one Include rule matches the current URL.
• If any Exclude rule matches, the page does not match, no matter what the Include rules say.

Match typesCopy Anchor Link

For Simple and Exact, enter a full URL such as https://example.com/product. The host is compared as written, so www.example.com and example.com are different.

Examples:

Target URL parametersCopy Anchor Link

To target a page by its query parameters, use Exact, or Substring and Regex with the parameter in the text, for example utm_source=newsletter. For more flexible conditions, use advanced targeting and read the parameter with ablyftTools.getUrlParameter():

return ablyftTools.getUrlParameter('utm_source') === 'newsletter';

getUrlParameter() returns null if the parameter is missing. See the tools reference. If you only want to limit who sees an experiment and not where it runs, an audience with the criterion URL parameter is easier.

Advanced targeting: JavaScript rulesCopy Anchor Link

Open the section Advanced Targeting ("Is more to consider than URLs?") if the URL alone is not enough, for example if the page must also contain a certain element.

In the code field Rules, write JavaScript that returns true if the page is valid. The URL rules and the JavaScript rule must both be fulfilled.

// Valid only if the page shows a product with a "sale" label
return document.querySelector('.product .label-sale') !== null;

The code can use ablyftTools and Tools (see tools) and User. If your code throws an error, the rule counts as not fulfilled.

Trigger: when ABlyft checks the pageCopy Anchor Link

The trigger decides when the targeting is checked. For most websites, leave the default. The default for new pages is set in Project → Settings under Project Activations Settings → Default Page Trigger.

The URL and DOM change triggers are meant for dynamic websites and single-page apps, see SPA navigation.

Callback triggerCopy Anchor Link

When you choose Callback, a code field appears with the default activate();. Your code decides when to call activate(). Calling activate(false) deactivates the page again.

// Activate the page as soon as the website announces the event
document.addEventListener('video-finished', function () {
  activate();
});

API triggerCopy Anchor Link

When you choose API, the field API trigger code shows the code to copy. Run it on your website at the moment the page should be activated:

<script>
window['ablyft'] = window['ablyft'] || [];
window['ablyft'].push({
    eventType: 'activatePage',
    pageApiName: 'checkout-step-2'
});
</script>

pageApiName is the API Name of the page. It is set in the section Advanced Settings of the page and is filled in from the page name. The API name must be unique in the project. For all options, see activatePage in the JavaScript API.

Deactivation modeCopy Anchor Link

A page can be checked several times, for example after each URL change. The Deactivation mode (section Advanced Settings of the page) defines what happens when a page that was active is checked again and no longer fits.

Calling deactivatePage from your code follows the same modes.

Reset code is the optional Reset JS code of an experiment or variation. It runs only if Use SPA features is turned on in Project → Settings (Project Activations Settings). On classic websites with the Direct trigger, the deactivation mode usually has little effect, because the page is checked only once.

Check your pageCopy Anchor Link

Open the experiment in preview and visit the URLs that should and should not match. If an experiment does not show, see Experiment not showing.

Next stepsCopy Anchor Link