Set up VIEW events

Version:

Note

If you're using a Content SDK or JSS app, you don't need to complete this walkthrough because those apps automatically capture VIEW events, with no coding required.

You can use the Cloud SDK events package to capture VIEW events. The VIEW event tracks when the site visitor views a webpage in your web app. 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. In this topic, you'll start capturing events in a Next.js app that uses the App Router.

Before you begin

In your code editor, open the root folder of your web app.
Install and initialize the Cloud SDK and the events package.

Setting up VIEW event capturing will run the pageView function every time a webpage loads in your web app.

Browser side

To capture VIEW events on the browser side:

In your code editor, in the source code of your web app, create a page, for example, src/app/products/page.tsx.
Paste the following code into page.tsx, then save your changes:
"use client"; import { useEffect } from "react"; import { pageView } from "@sitecore-cloudsdk/events/browser"; export default function Products(){ useEffect(() => { pageView(); }, []); return (<></>) }
This code imports the pageView function from the browser module of the events package. Every time the webpage loads, the Effect Hook runs the pageView function, which sends a VIEW event.

In production, we recommend you pass event data to the pageView function to make sure that your web app captures rich event data.
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
In your terminal, enter npm run dev to start your Next.js app, then open the products page of your app in your web browser. When the webpage loads, the VIEW event triggers and is sent to Sitecore.

Tip

Use your web browser's developer tools to check the payload that is sent to Sitecore.
To find the event in your Sitecore DXP products:
1. In your web browser's developer tools, view the cookies for your app.
2. Find a cookie named sc_cid.
3. Copy the cookie value. This value is the browser ID browser ID. You'll use it to find the event in your Sitecore DXP products.
  
  Example: a38b230c-11eb-4cf9-8d5d-274e9f344925

Server side

To capture VIEW events on the server side:

In your code editor, in the source code of your web app, locate the file where you initialized the Cloud SDK and the events package. The initialization code looks similar to:

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

// Import SDK modules ->
import { CloudSDK } from "@sitecore-cloudsdk/core/server";
import "@sitecore-cloudsdk/events/server";
import "@sitecore-cloudsdk/personalize/server";
import "@sitecore-cloudsdk/search/server";
// <- Import SDK modules

export default async function middleware(request: NextRequest) {
  const response = NextResponse.next();
  await CloudSDK(request, response, {
    sitecoreEdgeContextId: "<YOUR_SITECORE_EDGE_CONTEXT_ID>",
    siteName: "<YOUR_SITE_NAME>",
    enableServerCookie: true
  })
   .addEvents() // Initialize the events package
   .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: { language: 'en' } }) // Initialize the personalize package
   .addSearch() // Initialize the search package
   .initialize(); // Run the initialization logic and set cookies
   
   return response;
};

At the top of the file, directly below the CloudSDK import statement, import the pageView function from the server module of the events package:
// ... import { pageView } from "@sitecore-cloudsdk/events/server";
Inside the middleware function, below the CloudSDK function, run the pageView function, then save your changes:
// Send event: await pageView(request);
This script runs the pageView function, which sends a VIEW event.

In production, we recommend you pass event data to the pageView function to make sure that your web app captures rich event data.
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
In your terminal, enter npm run dev to start your Next.js app, then open your app in your web browser. When the webpage loads, the VIEW event triggers and is sent to Sitecore.

Tip

Use your web browser's developer tools to check the payload that is sent to Sitecore.
Optionally, to find the event in your Sitecore DXP products:
1. In your web browser's developer tools, view the cookies for your app.
2. Find a cookie named sc_cid.
3. Copy the cookie value. This value is the browser ID browser ID. You'll use it to find the event in your Sitecore DXP products.
  
  Example: a38b230c-11eb-4cf9-8d5d-274e9f344925

You can now find the events in your Sitecore DXP products. The collected event data will drive, for example, web analytics, segmentation, personalization, and more.

Next, you can:

Learn more about the VIEW event and what data you can include in it.
Learn more about tracking, what other events you can capture, and what the collected data can be used for.
Explore the reference documentation for the events package.
Set up other Sitecore DXP capabilities, such as using personalization to run web experiences or an interactive experience.

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