Target a webpage in a web experience

You can target a webpage as well as the conditions under which a web experience runs on your organization's website.

To target a webpage in a web experience:

On the experience builder, click the Page Targeting tile.

Additional fields display.
The All Pages option is selected by default. This runs the web experience on every page of your organization's website. Alternatively, to target specific pages for the experience to run, click the Specific Pages option.
Click Add conditions.

In the Page Targeting pane, in the operator drop-down list, click one of the following operators:

Operator	Description
Contains	This operator executes the experience if the guest's URL contains the characters you specify in the text field.
Does not contain	This operator executes the experience if the URL does not contain the characters specified in the text field.
Does not end with	This operator executes the experience if the guest's URL doesn't end with the string you specify in the text field.
Does not equal	This operator executes the experience if the guest's URL does not match the string you specify in the text field.
Does not match Regex (Ignore Case)	This operator executes the experience if the Uniform Resource Identifier (URI) of the guest's current page isn't formatted in the specified Regular Expression (RegEx) pattern. This is useful if you want to use more than one contains conditions because you can match different data with just one Regular Expression. Enter the RegEx characters in the adjacent field. For more details on how to write RegEx characters, see the https://www.regular-expressions.info site.
Does not match Regex	Select this operator if you want the experience to execute if the Uniform Resource Identifier (URI) of the guest's current page isn't formatted and matches the exact case in the specified Regular Expression (RegEx) pattern. This is useful if you want to use more than one contains conditions because you can match different data with just one Regular Expression. Enter the RegEx characters in the text field. For more details on how to write RegEx characters, see the https://www.regular-expressions.info site. Tip This operator is case sensitive. If you want to use RegEx and disregard the case, select the Does not match Regex (Ignore Case) operator.
Does not start with	This operator executes the experience if the guest's URL doesn't start with the string you specify in the text field. We often recommend using this operator rather than the Does not equal operator, because many URLs are appended with query parameters such as utm_source=email_campaign, making it difficult to know all the exact URLs to enter in the text field.
Ends with	This operator executes the experience if the guest's URL ends with the string you specify in the text field.
Equals	This operator executes the experience if the guest's URL is an exact match to the string you specify in the text field. If you use the Equals operator, the experience only runs if if the string is an exact match to the URL. This might not work as intended in preview mode or in production if the URL has query parameters or Urchin Tracking Module (UTM) parameters appended to it. If you use the Equals operator, when you preview the experience you must remove any query parameters that are not included in the text field you complete in Step 3. We often recommend using the Starts with operator for these reasons.
Matches Regex (Ignore Case)	This operator executes the experience if the Uniform Resource Identifier (URI) of the guest's current page is formatted in the specified Regular Expression (RegEx) pattern. This is useful if you want to use more than one contains conditions because you can match different data with just one Regular Expression. Enter the RegEx characters in the adjacent field. For more details on how to write RegEx characters, see the https://www.regular-expressions.info site.
Matches Regex	Select this operator if you want the experience to execute if the Uniform Resource Identifier (URI) of the guest's current page is formatted and matches the exact case in the specified Regular Expression (RegEx) pattern. This is useful if you want to use more than one contains conditions because you can match different data with just one Regular Expression. Enter the RegEx characters in the adjacent field. For more details on how to write RegEx characters, see the https://www.regular-expressions.info site. Tip This operator is case sensitive. If you want to use RegEx and disregard the case, select the Matches Regex (Ignore Case) operator.
Starts with	This operator executes the experience if the guest's URL starts with the string you specify in the text field. We often recommend using this operator rather than the Equals operator, because many URLs are appended with query parameters such as utm_source=email_campaign, making it difficult to know all the exact URLs to enter in the text field.

In the text field, enter the string or characters required. This is not a URL. Depending on the operator you selected, you must enter the required string or characters, such as the partial page path, as shown in the following image:
To add additional target conditions to pages, click Add page.
To have Client-Side JavaScript (CSJS) executed on the browser to determine whether to execute the experience, click Add script.

The Advanced targeting pane displays.
Enter the Client-Side JavaScript (CSJS).

This can include truthy values. A truthy value is a value that translates to true when evaluated in a Boolean context.

Important

After you define the targeting conditions, you must call the targetingPassed() function. You can use this function to run the experience on virtual page loads, even though the page is not physically loaded in the browser, as shown here:
RequestResponse
```
(function () {
    targetingPassed();
    var pushState = history.pushState;
    history.pushState = function() {
        pushState.apply(history, arguments);
        targetingPassed();
    };
})();
```
Click Save.

You return to the Page Targeting pane.
Click Save to close the pane.

Examples of targeting a webpage

Use these JavaScript examples to control when an experience runs based on user behavior or page conditions.

Trigger the experience when the user clicks a specific HTML element

Use this script to run the experience when a specific element is clicked, for example, a CTA button or banner.

RequestResponse

(function () {
    const targetElementPath = "body"; // Edit here to change to target element
    let targetElement;

    function waitForElement() {
        targetElement = document.querySelector(targetElementPath);
        if (targetElement) {
            console.log(targetElement);
            targetElement.addEventListener("click", triggerExperience);
        }
        else {
            setTimeout(waitForElement, 100);
        }
    }

    function triggerExperience() {
        targetingPassed();
        targetElement.removeEventListener("click", triggerExperience);
    }

    waitForElement();
})();

Trigger the experience after a delay

Use this script to trigger the experience a few seconds after the page loads.

RequestResponse

(function () {
    const timeDelaySeconds = 5 * 1000; // Edit here to change the delay length
    window.setTimeout(targetingPassed, timeDelaySeconds);
})();

Trigger the experience when the user moves their mouse out of the browser window

Use this to trigger an experience, swhen the user's mouse leaves the browser window.

RequestResponse

(function () {
    function checkMouseLocation() {
        if (event.clientY <= 0 || event.clientX <= 0 || (event.clientX >= window.innerWidth || event.clientY >= window.innerHeight)) {
            targetingPassed();
            document.removeEventListener("mouseleave", checkMouseLocation);
        }
    }
    document.addEventListener("mouseleave", checkMouseLocation);
})();

Trigger the experience when the user hovers over a specific HTML element

Use this to trigger an experience when the user movers their mouse over a specific HTML element, such as a product image.

RequestResponse

(function () {
    const targetElementPath = "body"; // Edit here to change to target element
    let targetElement;

    function waitForElement() {
        targetElement = document.querySelector(targetElementPath);
        if (targetElement) {
            console.log(targetElement);
            targetElement.addEventListener("mouseover", triggerExperience);
        }
        else {
            setTimeout(waitForElement, 100);
        }
    }

    function triggerExperience() {
        targetingPassed();
        targetElement.removeEventListener("mouseover", triggerExperience);
    }

    waitForElement();
})();

Trigger the experience when the user scrolls past a percentage of the page

Use this to trigger the experience when a user scrolls beyond a set percentage of the page height.

RequestResponse

const scrollPercentageInput = 25; // Edit here to change the scroll percentage

function checkScrollPercentage() {
    const scrollPercentage = Math.round((document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100);
    if (scrollPercentage > scrollPercentageInput) {
        window.removeEventListener("scroll", checkScrollPercentage);
        targetingPassed();
    }
}

window.addEventListener("scroll", checkScrollPercentage);

Trigger the experience when a query parameter is present with a specific value

Use this to trigger the experience when the URL contains a specific query parameter with a specific value.

In the following example, the URL www.example.com?bx-qa=1 will trigger the experience.

RequestResponse

(function () {
    const targetQueryParameter = 'bx-qa'; // edit here to change the targeted query parameter
    const targetValue = '1'; // edit here to change the value required for the targeted query parameter

    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    if (urlParams.get(targetQueryParameter) === targetValue) {
        targetingPassed();
    }
})();

Do you have some feedback for us?

If you have suggestions for improving this article,