Capture custom events

In your code editor, in the sxastarter folder, open src/components/Promo.tsx.

Promo.tsx is the source code for the Promo component that marketers can add to a webpage in XM Cloud Pages.

In Promo.tsx, import context:

import { context } from "lib/context";

Open src/lib/context/sdk/events.ts.

events.ts initializes the browser modulemodule of the Cloud SDK events package in production mode, so your JSS Next.js app can automatically capture certain events, but not in development mode. Because you're currently in development mode, you have to update this file in order to test event capturing.

In events.ts, inside the init function, temporarily comment out the if statement that checks whether you're in development mode:

// Comment out the following lines:
if (process.env.NODE_ENV === 'development')
  throw 'Browser Events SDK is not initialized in development environment';

Your event capturing code will now run in development mode.

In Promo.tsx, in the Default component, within the return statement, add a React onClick event handler to the topmost JSX element:

// ...
return (
  <div
    onClick={handleClick}
    className={"..."}
    id={"..."}
  >
{/*...*/}
)

In the Default component, on the first line of the function body, paste the following code, then save your changes:

function handleClick() {
  context
    .getSDK("Events")
    .then((Events) =>
      Events.event({ type: "myretailsite:CLICKED_PROMO" })
    )
    .catch((e) => console.debug(e));
  console.log("Sent custom event.");
};

This code runs the event function every time the Promo component is clicked, and sends a custom event named myretailsite:CLICKED_PROMO to Sitecore.

Start your rendering app by entering the following command in your terminal:

npm run start:connected

In your web browser, navigate to your JSS Next.js app, typically at http://localhost:3000.

In your web browser's developer tools, on the Network tab, in the Filter field, paste the following URL: edge-platform.sitecorecloud.io.

Doing this lists the network requests made to Sitecore.

Reload your webpage to start recording network activity.

On your webpage, click the Promo component.

The click triggers the custom event.

In the developer tools, on the Network tab, in the list of requests, click the last POST request with a status of 201 Created and a name that starts with events.

This is the network request made when you clicked the Promo, and it contains the event data for the custom event that you captured.

In the request details pane, click the Payload tab for the request.

In the request payload, copy the value of the browser_id key. You'll use it in the next procedure to find the captured events in Sitecore CDP.

The browser ID uniquely identifies a site visitor and associates captured events with that visitor. In this example, the browser ID identifies you and associates you with the actions you took: viewing the webpage and clicking the Promo component.

In Sitecore CDP, click Guests. Enter the browser ID you copied in the previous procedure into the Search field, then select the Guest Type: All filter.

An anonymous guestguest, or site visitor, appears.

This guest is you interacting with your app just a minute ago. Next, you find the events associated with this guest.

Click the guest. The guest profile appears.

On the guest profile page, click Event viewer.

A list of events associated with this guest appears. The list contains VIEW events, which are the events sent from your app when you reloaded it and viewed the webpage in a previous procedure. The list also contains one or more myretailsite:CLICKED_PROMO events. These are the custom events sent from your app when you clicked the Promo component on your webpage.

Click next to the event that you want to see details for. The event details appear.