Functions

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

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 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!