Pages are a way to organize and handle XGen’s functionality and adds built in utilities to allow for a simple and easy configuration. They function by defining different “pages” and having “triggers” to determine which page should be used. Once a page has been matched, there are additional variables and callback functions that will run to add extra functionality specific to that page.
Only one page can be matched at a time. The triggers are run asynchronously, so the first page to have true for every one of its triggers will be matched. If multiple pages match at the same time, the order they occur in the pages array will determine which one takes priority.
All of the pieces of a page are done asynchronously (triggers, context, contextual pages, on page matched function) and the render API waits for each of these to finish before it fires. It is important to optimize these to return as fast as possible to ensure the fastest render times.
If no page is matched, the render API will not fire, so it is important to add pages to every page that you intend to render on. It is generally a good idea to have a “default” page which has general triggers that will match any page but a little bit later in the page load to give the other pages a chance to match first.
Syntax
pages: [
{
name,
triggers,
context,
contextualPages,
exclude,
pdpProduct,
onPageMatched
},
{
name,
triggers,
context,
contextualPages,
exclude,
pdpProduct,
onPageMatched
}
]Configuration
NAME/TYPE | DESCRIPTION |
|---|---|
type: array | The list of groups of behavior that is being defined. |
type: string | The name of the page. This will be added to the contextual pages for this element. |
type: array | Defines the set of conditions that need to be true in order for this page to match. |
type: object | The contextual variables that will be used in element’s rulesets. |
type: object | The parameters that will be added to the query string that is sent to XGen’s render API. This can be used when creating page triggers for an element in the XGen portal. |
type: object | Any products that will be removed from all recommendations. |
type: object | The product that the current page is viewing. This will be used for things such as recently viewed and ensuring that the product you are looking at does not show up in recommendations. |
type: function | The callback function that will run once a page has been matched. |
pages
type: ARRAY
description: The list of groups of behavior that is being defined.
page config:
name
type:
STRING
description: The name of the page. This will be added to the contextual pages for this element.
triggers
type: Pages: Triggers
ARRAY
description: Defines the set of conditions that need to be true in order for this page to match.
context
OPTIONAL
type: Pages: Context
OBJECT
description: The contextual variables that will be used in element’s rulesets.
contextualPages
OPTIONAL
type: Pages: Contextual Pages
OBJECT
description: The parameters that will be added to the query string that is sent to XGen’s render API. This can be used when creating page triggers for an element in the XGen portal.
onPageMatched
OPTIONAL
type: Pages: onPageMatched
FUNCTION
description: The callback function that will run once a page has been matched.
Global Page
The global page adds the ability for code to run on every page so you don’t have to add it to add it every time. This applies to context, contextual pages, and on page callback functions, but this does not apply to triggers since the global page will run when a different page matches triggers.
To use the global page, simply define a page and name it “global.” From there you can add to it as if it was any other page.
Examples
const integration = XG({
pages: [
{
name: 'global',
context: {
brand: window.activeBrand
}
onPageCallback: () => {
// runs on every page
}
},
{
name: 'pdp',
triggers: [
{ pathname_contains: '/product/' }
],
context: {
gender: window.product.gender
},
contextualPages: {
isSalePdp: window.product.salePrice > 0
},
onPageMatched: () => {
trackPdp(...)
}
},
{
name: 'plp',
triggers: [
{ pathname_contains: '/cateogry/' }
],
context: {
category: () => {
const urlSegments = location.pathname.split('/');
const category = urlSegments.reverse().find(segment => segment !== '');
return category;
}
}
},
]
});