---
title: "Set up VIEW events"
slug: "set-up-view-events"
abstract: "Use the Cloud SDK to start capturing VIEW events as your site visitors interact with your web app."
---
# Set up VIEW events

> [!note]
> If you're using a Content SDK or JSS app, you don't need to complete this walkthrough because those apps [automatically capture](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/developer-guides.html "Developer guides") `VIEW` events, with no coding required.

You can use the Cloud SDK [`events`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events.html "@sitecore-cloudsdk/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](https://nextjs.org/docs/getting-started/installation#the-app-directory).

> [!note]
> **Before you begin**
> -   In your code editor, open the root folder of your web app.
>
> -   [Install and initialize](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK") 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.

::::tabs
:::tab{title="Browser side"}
To capture `VIEW` events on the browser side:

1. In your code editor, in the source code of your web app, create a page, for example, `src/app/products/page.tsx`.
2. Paste the following code into `page.tsx`, then save your changes:

    ```typescript
    "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](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/view-events.html "VIEW events") 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`](https://nextjs.org/docs/app/api-reference/functions/use-pathname) changes.
    >
    > -   *Next.js Pages Router* - send the events in [`routeChangeComplete`](https://nextjs.org/docs/pages/api-reference/functions/use-router).
    >
    >
    > Contributed by: [![mvp-boris-brodsky.jpg](https://doc.sitecore.com/api/markdown-image/sdk/en/developers/005/cloud-sdk/images/mvp-boris-brodsky.jpg) Boris Brodsky](https://www.linkedin.com/in/borisbrodsky)

3. 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](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/events.html#UUID-b78ff86e-4442-71e7-edc6-81adf8fabe27_section-idm234451877631545 "Checking the payload") that is sent to Sitecore.

4. 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_{SitecoreEdgeContextId}` , where `{SitecoreEdgeContextId}` is your [Context ID](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/getting-started/prerequisites.html "Prerequisites").
    3. Copy the cookie value. This value is the browser ID[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N6659aee98cafa]. You'll use it to find the event in your Sitecore DXP products.

        Example: `a38b230c-11eb-4cf9-8d5d-274e9f344925​`

:::
:::tab{title="Server side"}
To capture `VIEW` events on the server side:

1. In your code editor, in the source code of your web app, locate the file where you [initialized](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/getting-started/install-and-initialize-the-cloud-sdk.html "Install and initialize the Cloud SDK") the Cloud SDK and the `events` package. The initialization code looks similar to:

    ```typescript
    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;
    };
    ```

2. At the top of the file, directly below the `CloudSDK` import statement, import the `pageView` function from the `server` module of the `events` package:

    ```typescript
    // ...
    import { pageView } from "@sitecore-cloudsdk/events/server";
    ```

3. Inside the `middleware` function, below the `CloudSDK` function, run the `pageView` function, then save your changes:

    ```typescript
    // Send event:
    await pageView(request);
    ```

    This script runs the `pageView` function, which sends a `VIEW` event.

    In production, we recommend you [pass event data](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/view-events.html "VIEW events") 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`](https://nextjs.org/docs/app/api-reference/functions/use-pathname) changes.
    >
    > -   *Next.js Pages Router* - send the events in [`routeChangeComplete`](https://nextjs.org/docs/pages/api-reference/functions/use-router).
    >
    >
    > Contributed by: [![mvp-boris-brodsky.jpg](https://doc.sitecore.com/api/markdown-image/sdk/en/developers/005/cloud-sdk/images/mvp-boris-brodsky.jpg) Boris Brodsky](https://www.linkedin.com/in/borisbrodsky)

4. 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](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/tracking/events.html#UUID-b78ff86e-4442-71e7-edc6-81adf8fabe27_section-idm234451877631545 "Checking the payload") that is sent to Sitecore.

5. 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_{SitecoreEdgeContextId}` , where `{SitecoreEdgeContextId}` is your [Context ID](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/getting-started/prerequisites.html "Prerequisites").
    3. Copy the cookie value. This value is the browser ID[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N6659aee98cafa]. 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](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/working-with-the-collected-data.html "Working with the collected data"). The collected event data will drive, for example, web analytics, segmentation, personalization, and more.

Next, you can:

- Learn more about the [`VIEW`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events/view-events.html "VIEW events") event and what data you can include in it.
- Learn more about [tracking](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking.html "Tracking"), what other [events](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/events.html "Events") you can capture, and [what the collected data can be used for](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-tracking/working-with-the-collected-data.html "Working with the collected data").
- Explore the reference documentation for the [`events`](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-reference/cloud-sdk-events.html "@sitecore-cloudsdk/events") package.
- Set up other Sitecore DXP capabilities, such as using [personalization](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/cloud-sdk-concepts/concepts-personalization.html "Personalization") to run [web experiences](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-web-personalization.html "Set up web personalization") or an [interactive experience](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/developer-guides/personalization/set-up-interactive-personalization.html "Set up interactive personalization").

[^UUID-101b62f6-b640-ed11-1057-29646ebb9fb7_N6659aee98cafa]: A universally unique identifier (UUID) that Sitecore CDP assigns to every site visitor of your site. It is unique per browser, and it associates sessions and events with the respective site visitor. The Cloud SDK stores the browser ID as the value for the first-party `sc_{SitecoreEdgeContextId}` [cookie](https://doc.sitecore.com/sdk/en/developers/004/cloud-sdk/en/cloud-sdk-cookies.html) in the web browser.