# 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;

{% code overflow="wrap" %}

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

{% endcode %}

#### 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:

{% code overflow="wrap" %}

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

{% endcode %}

#### PRODUCT

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

{% code overflow="wrap" fullWidth="false" %}

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

{% endcode %}

#### CART

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

{% code overflow="wrap" fullWidth="false" %}

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

{% endcode %}

#### 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:

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

#### OTHER

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

{% code overflow="wrap" %}

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

{% endcode %}

`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

{% code overflow="wrap" %}

```jsx
<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>
```

{% endcode %}

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](/lang/en/implementation/client-side-integration/lng.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://developer.gravityfield.ai/lang/en/implementation/client-side-integration/2.-page-context.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.