1. @sitecore-cloudsdk/events/browser

pageView

Version:

Type

Function

Import path

@sitecore-cloudsdk/events/browser

Sends a VIEW event.

Signature

export async function pageView(
  pageViewData?: PageViewData
): Promise<EPResponse | null>

Parameters

Name

Type

Description

pageViewData

PageViewData

Optional.

Data for VIEW events.

Return value

Returns a promise.

Examples

Example 31. Running the pageView function

Next.js

Note

To run this function, you have to first initialize the Cloud SDK.

See more examples and other data you can include in the event.

Here's an example of how to use the pageView function:

"use client"; // Used only in Next.js App Router
import { useEffect } from "react";
import { pageView } from "@sitecore-cloudsdk/events/browser";

export default function Page(){
  useEffect(() => {
    pageView();
    console.log("Sent VIEW event.");
  }, [])

  return (<></>);
};
Example 32. Customizing VIEW event capturing

JSS Next.js

JSS Next.js apps automatically send VIEW events from every webpage using the src/components/CdpPageView.tsx component, with no coding required. If this default implementation doesn't suit your application requirements, you can disable it, and then set up your own, customized VIEW event capturing.

Here's an example of how to set up your custom VIEW event capturing:

import { pageView } from '@sitecore-cloudsdk/events/browser';
import {
  CdpHelper,
  useSitecoreContext,
} from '@sitecore-jss/sitecore-jss-nextjs';
import config from 'temp/config';

//...

const SitecorePage = ({
  notFound,
  componentProps,
  layoutData,
  headLinks,
}: SitecorePageProps): JSX.Element => {
  const {
    sitecoreContext: { route, variantId, site },
  } = useSitecoreContext();

  useEffect(() => {
    const language = route.itemLanguage || config.defaultLanguage;
    const scope = customScope || process.env.NEXT_PUBLIC_PERSONALIZE_SCOPE;
  
    const pageVariantId = CdpHelper.getPageVariantId(
        route.itemId,
        language,
        variantId as string,
        scope
    );

    // Ensure the module is initialized with CloudSDK().initialize() beforehand...

    // Run pageView:
    pageView({
      channel: //channel,
      currency: //currency,
      page: route.name,
      pageVariantId,
      language,
    }).catch((e) => console.debug(e));;
  }, [route, variantId, site]);
  //...
}




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