VIEW events

Version:

The VIEW event tracks when the site visitor views a webpage in your app. It triggers every time your webpage loads. Because it is an essential event to track, it's important that you send VIEW events from all webpages where you want to track site visitor behavior.

JSS Next.js and JSS Angular apps automatically capture VIEW events, with no coding required.

Tip

By default, the VIEW event triggers when a webpage loads, but not when a route changes. To capture VIEW events in response to a route change, send the events using the routing tools of your framework:

Next.js App Router - use an effect when the value returned by usePathname changes.
Next.js Pages Router - send the events in routeChangeComplete.

Contributed by: Boris Brodsky

You can send VIEW events by using the pageView function and optionally passing it the page view event data object.

The page view event data object

The page view event data object represents all the data about the event.

The page view event data object is optional, but we recommend that you provide it so you can also provide the following optional data in it:

Data such as the channel and the language of the page where the event triggered, the referrer URL, UTM parameters, and whether the event triggered on a SitecoreAI personalized page variant.
The search data object. If you provide this object, the event becomes a Sitecore Search entity page view event, and the event with all its data is sent to Sitecore Search.

Note

Refer to the Sitecore Search Events API reference and data model to construct search data objects.
The extension data object.

Examples

Tip

During development, use your web browser's developer tools to check the payload containing all the event data that is sent to Sitecore.

Example 1. Sending a VIEW event without search data

Here's an example page view event data object for a VIEW event. The object contains some optional event data and extension data:

let eventData: any = {
  language: "EN",
  page: "home",
  channel: "WEB",
  currency: "EUR",
  pageVariantId: "page_variant_3",
  extensionData: {customKey: "customValue"}
};

This object is passed to the pageView function, which sends the event:

Browser module

// ...
pageView(eventData);
// ...

Server module

// ...
await pageView(request, eventData);
// ...

By default, VIEW events include UTM parameters. Consider the following URL:

https://myretailsite.com?utm_source=newsletter&utm_medium=email&utm_campaign=summer_sale&utm_term=running+shoes

A VIEW event captured on the previous URL will contain all the UTM parameters in the event data. The event data object associated with this URL contains the following payload:

{
  "browser_id": "a38b230c-11eb-4cf9-8d5d-274e9f344925",
  "channel": "WEB",
  "client_key": "",
  "currency": "EUR",
  "ext": {
    "pageVariantId": "page_variant_3",
    "customKey": "customValue"
  },
  "language": "EN",
  "page": "home",
  "pos": "",
  "requested_at": "2025-10-05T10:36:32.506Z",
  "type": "VIEW",
  "utm_campaign": "summer_sale",
  "utm_medium": "email",
  "utm_source": "newsletter",
  "utm_term": "running shoes"
}

Example 2. Sending a VIEW event with search data

Here's an example page view event data object for a VIEW event. The object contains some optional event data, extension data, and search data:

const eventData: any = {
  language: "EN",
  page: "home",
  channel: "WEB",
  currency: "EUR",
  pageVariantId: "page_variant_3",
  extensionData: {customKey: "customValue"},
  searchData: {
    value: {
      context: {
      page: {
        uri: "https://www.sitecore.com"
      }
    },
    entities: [
      {
        id: "https___www_sitecore_com",
        source_id: "407033",
        title: "Modernize your digital presence",
        entity_type: "content",
        entity_subtype: "article"
      }
    ]
   }
  }
};

You can send this event by passing the object to the pageView function:

Browser module

// ...
pageView(eventData);
// ...

Server module

// ...
await pageView(request, eventData);
// ...

For this event data object, the following payload is sent to Sitecore:

{
  "browser_id": "a38b230c-11eb-4cf9-8d5d-274e9f344925",
  "channel": "WEB",
  "client_key": "",
  "currency": "EUR",
  "ext": {
    "pageVariantId": "page_variant_3",
    "customKey": "customValue"
  },
  "language": "EN",
  "page": "home",
  "pos": "",
  "requested_at": "2025-08-29T13:48:03.188Z",
  "sc_search": {
    "data": {
      "value": {
        "context": {
          "page": {
            "uri": "https://www.sitecore.com"
          }
        },
        "entities": [
          {
            "id": "https___www_sitecore_com",
            "source_id": "407033",
            "title": "Modernize your digital presence",
            "entity_type": "content",
            "entity_subtype": "article"
          }
        ]
      }
    },
    "metadata": {
      "ut_api_version": "1.0"
    }
  },
  "type": "VIEW"
}

If you have suggestions for improving this article, let us know!