# Page Method

### Overview

The `page` method is used to track page views, creating `Viewed Page` events for users the function is called for. You should only trigger this method upon successful page loads or route changes in the case of single page applications. This method automatically gathers and sends information regarding the page, browser session and operating system configuration of tracked users to CrossEngage.

The `page` method has the following structure:

```javascript
analytics.page();
```

## Implementation

{% hint style="warning" %}
This page method is not needed on each page - only on those for which a specific use case might arise, e.g. sales-, special offer-, voucher-pages. You can leave out the page method on the product detail pages as the [track method](https://documentation.crossengage.io/data-and-engagement-platform/web-tracking/web-tracking-v1-legacy/tracking-user-behavior/track-method) can be used instead. 
{% endhint %}

{% tabs %}
{% tab title="Using a tag manager" %}

1. Copy the `page` method snippet.
2. Create a custom HTML tag on your tag manager and paste the snippet between `<script></script>` HTML tags.
3. Set up a trigger which fires the tag upon every page load.&#x20;
   {% endtab %}

{% tab title="Without a tag manager" %}
Call the method each time a new page is loaded.
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
If you are setting up the `page` method for a single page application, ensure that you set up the trigger based on routing changes rather than page loads.
{% endhint %}

## &#x20;Gathered data

The information the `page` method transmits is stored in a `context` object, which has a syntax such as the example below:

```javascript
{ 
    language: "en-US", 
    languages: ["en-US", "en", "de"], 
    location: "https://www.crossengage.io/TPS-Report/cover/", 
    page: { 
        path: "/TPS-Report/cover/", 
        referrer: "https://www.crossengage.io/TPS-Report/", 
        search: "TPS", 
        title: "TPS Report", 
        url: "https://www.crossengage.io/TPS-Report/cover/" 
    }, 
    platform: "MacIntel", 
    siteId: "www.initech.com", 
    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1)" 
}
```

#### Information gathered in the context object

| Value       | Type   | Description                                                                     |
| ----------- | ------ | ------------------------------------------------------------------------------- |
| `language`  | string | Current language used in the browser session.                                   |
| `languages` | array  | Array containing information the language setup of the user's operating system. |
| `location`  | string | The full URL of the tracked page.                                               |
| `path`      | string | The path of the URL of the tracked page.                                        |
| `referrer`  | string | The full URL of the page the user was previously on.                            |
| `search`    | string | Query parameters that were used on the URL.                                     |
| `title`     | string | Title of the page.                                                              |
| `url`       | string | Full URL of the page.                                                           |
| `platform`  | string | The type of operating system of the user.                                       |
| `userAgent` | string | The version and type of browser and operating system of the user.               |

## Use cases

#### Segment users that have **visited the women shoes category of your shop**

The below block is an example of a `context` object from a `Viewed Page` event which we will be targeting for this example:

```javascript
{ 
    language: "en-US", 
    languages: ["en-US", "en", "de"], 
    location: "https://www.crossengage.io/TPS-Report/cover/", 
    page: { 
        path: "/women/shoes/", 
        referrer: "", 
        search: "shoes", 
        title: "Women shoes", 
        url: "https://www.crossengage.io/women/shoes/" 
    }, 
    platform: "MacIntel", 
    referrer: "", 
    siteId: "www.crossengage.io", 
    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1)" 
}
```

To segment all users that have visited the women shoes category of your shop, create a segment condition filtering `Viewed Page` events with the property `context.page.path` using the `contains` operator with the value `women/shoes`.

#### **Segment users that have visited the FAQ section of your site**

The below block is an example of a `context` object from a `Viewed Page` event which we will be targeting for this example:

```javascript
{ 
    language: "en-US", 
    languages: ["en-US", "en", "de"], 
    location: "https://www.crossengage.io/faq/", 
    page: { 
        path: "/faq/", 
        referrer: "", 
        search: "frequently asked questions", 
        title: "FAQ", 
        url: "https://www.crossengage.io/faq/" 
    }, 
    platform: "MacIntel", 
    referrer: "", 
    siteId: "www.crossengage.io", 
    userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1)" 
}
```

To segment all users that have visited the FAQ section of your site, create a segment condition filtering `Viewed Page` events with the property `context.page.title` using the `contains` operator with the value `FAQ`.

Depending on the use case you would like to satisfy, you may use any of the properties sent in the context of the **Viewed Page** event or even a combination of them. For example, you may want to segment all users which have visited your FAQ page, redirected from google. To segment these users, create a segment condition filtering `Viewed Page` events with the property `context.page.referrer` using the `contains` operator with the value `google` and the property `context.page.title` using the `contains` operator with the value `faq`.