In the Pages configuration, Triggers are used to identify which page should be matched. triggers is an array of trigger objects that run a check to see if a condition is true or false. If all trigger conditions return true for a page, that page will be matched and the context and callbacks associated with that page will run.
Triggers are done asynchronously and the first page to have all its triggers be true will be the page that is matched. If multiple pages match at the same time, they will be prioritized by the order they are in the pages array.
Syntax
triggers: [
{condition1, check1},
{condition2, check2},
{condition3, check3}
]Trigger Conditions
pathname_contains
description: Used to check if the URL pathname contains a string.
syntax: { pathname_contains: 'string_to_check' }
example:
{ pathname_contains: '/products/' }
This condition will be true for a URL such as /us/products/1234
This condition will be false for a URL such as /us/category/shoes
pathname_does_not_contain
description: Used to check if the URL pathname does not contain a string.
syntax: { pathname_does_not_contain: 'string_to_check' }
example:
{ pathname_contains: '/products/' }
This condition will be true for a URL such as /us/category/shoes
This condition will be false for a URL such as /us/products/1234
pathname_equals
description: Used to check if the URL pathname exactly matches a string.
syntax: { pathname_equals: 'string_to_check' }
example:
{ pathname_equals: '/cart' }
This condition will be true for a URL such as /cart
This condition will be false for a URL such as /wishlist
This condition will be false for a URL such as /cart/1234
pathname_does_not_equal
description: Used to check if the URL pathname does not exactly match a string.
syntax: { pathname_does_not_equal: 'string_to_check' }
example:
{ pathname_does_not_equal: '/cart' }
This condition will be true for a URL such as /wishlist
This condition will be true for a URL such as /cart/1234
This condition will be false for a URL such as /cart
pathname_starts_with
description: Used to check if the URL pathname starts with a string.
syntax: { pathname_starts_with: 'string_to_check' }
example:
{ pathname_starts_with: '/us/' }
This condition will be true for a URL such as /us/
This condition will be true for a URL such as /us/category
This condition will be false for a URL such as /it/
This condition will be false for a URL such as /it/category/us/
pathname_ends_with
description: Used to check if the URL pathname ends with a string.
syntax: { pathname_ends_with: 'string_to_check' }
example:
{ pathname_ends_with: '/cart/' }
This condition will be true for a URL such as /cart/
This condition will be true for a URL such as /us/cart/
This condition will be false for a URL such as /us/
This condition will be false for a URL such as /us/cart/1234
queryString_contains
description: Used to check if the URL queryString contains a string.
syntax: { queryString_contains: 'string_to_check' }
example:
{ queryString_contains: 'test=true' }
This condition will be true for a queryString such as ?p1=v1&test=true&p3=v3
This condition will be false for a queryString such as ?p1=v1&p2=v2
queryString_does_not_contain
description: Used to check if the URL queryString does not contain a string.
syntax: { queryString_does_not_contain: 'string_to_check' }
example:
{ queryString_does_not_contain: 'test=true' }
This condition will be true for a queryString such as ?p1=v1&p2=v2
This condition will be false for a queryString such as ?p1=v1&test=true&p3=v3
queryString_equals
description: Used to check if the URL queryString equals a string.
syntax: { queryString_equals: 'string_to_check' }
example:
{ queryString_equals: '?test=true' }
This condition will be true for a queryString such as ?test=true
This condition will be false for a queryString such as ?p1=v1&p2=v2
This condition will be false for a queryString such as ?p1=v1&test=true&p3=v3
queryString_does_not_equal
description: Used to check if the URL queryString does not equal a string.
syntax: { queryString_does_not_equal: 'string_to_check' }
example:
{ queryString_does_not_equal: '?test=true' }
This condition will be true for a queryString such as ?p1=v1&p2=v2
This condition will be true for a queryString such as ?p1=v1&test=true&p3=v3
This condition will be false for a queryString such as ?test=true
url_matches_regex
description: Used to check if the URL matches a regex condition.
syntax 1: { url_matches_regex: '/string_regex/' }
syntax 2: { url_matches_regex: /regex/ }
example:
{ url_matches_regex: /^\/[^/]+\/$/ }
This condition will be true for a queryString such as /us/
This condition will be true for a queryString such as /cart/
This condition will be false for a queryString such as /us/cart
This condition will be false for a queryString such as /
url_does_not_match_regex
description: Used to check if the URL does not match a regex condition.
syntax 1: { url_does_not_match_regex: '/string_regex/' }
syntax 2: { url_does_not_match_regex: /regex/ }
example:
{ url_does_not_match_regex: /^\/[^/]+\/$/ }
This condition will be true for a queryString such as /us/cart
This condition will be true for a queryString such as /
This condition will be false for a queryString such as /us/
This condition will be false for a queryString such as /cart/
page_has_element
description: Used to check if the DOM of a page has an element that matches the provided selector. Note: this is asynchronous and will return true even if the element is not present at the start of the page load. This will return true once an element exists in the DOM that matches the selector. This condition will be false until then.
syntax: { page_has_element: 'query_selector' }
example:
{ page_has_element: '#productDetails' }
This condition will be true if an element that matches the given selector is on the page or is added to the page. If this element is never added to the page, the promise will never resolve making this condition false.
dataLayer_has
description: Used to loop over dataLayer events to check for one that matches. Note: this is asynchronous and will return true even if the dataLayer event has not be sent at the start of the page load. This will return true once an event has been fired that matches the condition. This condition will be false until then.
syntax: { dataLayer_has: { finder: findFunction } }
The findFunction will take in each dataLayer event as a parameter and should return true if that dataLayer event matches.
ex: (dlEvent) => dlEvent.event === 'product view'
example:
{ dataLayer_has: { finder: (dlEvent) => dlEvent.event === 'product view' } }
This condition will be true if there is a dataLayer event that is added that has the key event equivalent to the value 'product view'. If no event matching the finder function ever fires, the promise will never resolve making this condition false.
custom
description: Used to define completely custom logic for a trigger condition. Note: this function can be asynchronous and will be false until the function returns true.
syntax: { custom: customFunction }
Custom can be any function (synchronous or asynchronous) that returns a boolean value.
ex: () => window.pageType === 'product page'
example 1 (synchronous):
{ custom: () => window.pageType === 'product page' }
This condition return the result of a comparison between a global variable and a string. If the returned value is true, the condition will be true, or if it is false, the condition will be false.
example 2 (asynchronous):
{ custom: async () => await window.isPdpPage() }
This condition will be false until this async function resolves. Then if the returned value is true, the condition will be true, or if it is false, the condition will be false.