Set up VIEW events

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:

   "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

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 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_cid.

   3. Copy the cookie value. This value is the browser ID. You'll use it to find the event in your Sitecore DXP products.

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

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

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:

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

3. 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

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 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_cid.

   3. Copy the cookie value. This value is the browser ID. You'll use it to find the event in your Sitecore DXP products.

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