2. Page Context

Page context allows the platform to gain and store information on the customer's journey with the website, and allows for a deeper understanding to launch personalization campaigns according to targeting conditions.

Page Contexts Structure

There are six types of page context:

HOMEPAGE

For the site's main page, no data array is used;

GF.pageContext = {type: "HOMEPAGE"};

CATEGORY

For category pages the hierarchy of categories from the broadest to the narrowest is passed in the data array. Categories should match the product feed. Example:

GF.pageContext = {type: "CATEGORY", data: ["Women", "Clothing", "Dresses"]};

PRODUCT

For product pages the SKU of the product is passed in the data array. The product SKU must match the product feed. Example:

GF.pageContext = {type: "PRODUCT", data: ["XD-154"]};

CART

For the cart page the SKUs of all products in the cart are passed in the data array. Example:

GF.pageContext = {type: "CART", data: ["XD-154","DL-5874","TN-15","QSD-1581","XD-15"]};

SEARCH

data array contains the search query. Used for search pages (including empty search). If there is a dedicated search page, opening the page without entering a query passes an empty array. In a live search, the array is updated when a new pageview is sent to the analytics platform or each time the search results are rendered. Example:

GF.pageContext = { type: "SEARCH", data: ["search query"] };

OTHER

For all pages that do not fit the descriptions above. Example:

GF.pageContext = {type: "OTHER"};

OTHER should be used on static pages, such as category pages (typically synthetic ones) not included in the product feed, etc.

Example of properly installed scripts on a cart page

<link rel="preconnect" href="//cdn-01.gravityfield.ai">
<link rel="preconnect" href="//evs-01.gravityfield.ai">
<link rel="dns-prefetch" href="//cdn-01.gravityfield.ai">
<link rel="dns-prefetch" href="//evs-01.gravityfield.ai">

<script>
window.GF = window.GF || {}; 
GF.section = "6315dda2f1c33ba4cd04655b";
GF.pageContext = {type: "CART",data: ["XD-154","DL-5874","TN-15","QSD-1581","XD-15"]};
</script>

<script type="text/javascript" src="//cdn-01.gravityfield.ai/core/core.js"></script>

The correct order of script elements:

1. Preconnect and prefetch;

2. Declaring the GF variable and specifying the Page Context;

3. core.js script

Multilingual and/or Multiregional setup

If the site/app works with multiple languages or the business has different prices and availability on offer for different regions, it is necessary to take this into account in the context according to the following documentation:

Multilingual / Multilocal Implementation