AB#6495 Integrate Sitecore CDP with basic page view logs

.env

@@ -87,6 +87,12 @@ DAM_SearchPage=
 DAM_ExternalRedirectKey=
 DAM_ExternalRedirectKey=Sitecore
 
+# CDP
+CDP_PROXY_HOST=cdp.edge.localhost
+CDP_API_TARGET_ENDPOINT=
+CDP_CLIENT_KEY=
+CDP_API_TOKEN=
+
 # Environment Variables for XM
 XE_DELIVERY_ENDPOINT=
 XE_AUTHORITY=

Website/src/rendering/next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

Website/src/rendering/package.json

@@ -37,12 +37,12 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@next/bundle-analyzer": "^11.0.1",
+    "@next/bundle-analyzer": "^11.1.1",
     "@sitecore-jss/sitecore-jss-nextjs": "^18.0.0-canary.1",
     "@sitecore-jss/sitecore-jss-tracking": "^18.0.0-canary.1",
     "graphql": "~15.4.0",
     "graphql-tag": "^2.11.0",
-    "next": "^11.0.0",
+    "next": "^11.1.2",
     "next-localization": "^0.10.0",
     "nprogress": "~0.2.0",
     "postcss-import": "^14.0.2",
@@ -82,7 +82,7 @@
     "constant-case": "^3.0.4",
     "cross-env": "~6.0.3",
     "eslint": "^7.23.0",
-    "eslint-config-next": "^11.0.0",
+    "eslint-config-next": "^11.1.2",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",

Website/src/rendering/src/Layout.tsx

@@ -7,6 +7,7 @@ import {
   LayoutServicePageState,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { SitecoreContextValue } from 'lib/component-props'; // DEMO TEAM CUSTOMIZATION - Different type name
+import { logViewEvent } from './services/BoxeverService'; // DEMO TEAM CUSTOMIZATION - CDP integration
 
 // Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
 // If you're not supporting the Experience Editor, you can remove this.
@@ -25,6 +26,11 @@ const Layout = ({ context }: LayoutProps): JSX.Element => {
   // Note the context object type here matches the initial value in [[...path]].tsx.
   useEffect(() => {
     updateSitecoreContext && updateSitecoreContext(context);
+
+    // DEMO TEAM CUSTOMIZATION - Log page views in CDP
+    const { route } = context;
+    logViewEvent(route);
+    // END CUSTOMIZATION
   }, [context, updateSitecoreContext]); // DEMO TEAM CUSTOMIZATION - Missing effect parameter to fix linting error
 
   const { route } = context;

Website/src/rendering/src/lib/util.ts

@@ -5,3 +5,10 @@
 export const getPublicUrl = (): string => {
   return process.env.PUBLIC_URL || '';
 };
+
+/**
+ * Throws an error when the parameter is omitted.
+ */
+export function required(): undefined {
+  throw new Error('Missing parameter');
+}

Website/src/rendering/src/pages/_app.tsx

@@ -4,13 +4,18 @@ import { useEffect } from 'react';
 // END CUSTOMIZATION
 import { I18nProvider } from 'next-localization';
 import Head from 'next/head';
+import Script from 'next/script';
 import NProgress from 'nprogress';
+import {
+  isCdpConfigured,
+  CDP_API_TARGET_ENDPOINT,
+  CDP_CLIENT_KEY,
+} from 'src/services/BoxeverService';
 
 // Using nprogress are completely optional.
 //  nprogress provides a loading indicator on page/route changes.
 // Remove it in package.json as well if removed here.
 import 'nprogress/nprogress.css';
-// TODO: Import Material UI here
 import 'assets/css/main.css';
 
 NProgress.configure({ showSpinner: false, trickleSpeed: 100 });
@@ -41,6 +46,24 @@ function App({ Component, pageProps, router }: AppProps): JSX.Element {
 
   const { dictionary, ...rest } = pageProps;
 
+  // DEMO TEAM CUSTOMIZATION - CDP integration
+  const cdpScripts = isCdpConfigured ? (
+    <>
+      <Script id="cdpSettings">{`
+        // Define the Boxever queue
+        var _boxeverq = _boxeverq || [];
+
+        // Define the Boxever settings
+        _boxever_settings = {
+          client_key: '${CDP_CLIENT_KEY}',
+          target: '${CDP_API_TARGET_ENDPOINT}',
+          cookie_domain: '.edge.localhost',
+        };`}</Script>
+      <Script src="https://d1mj578wat5n4o.cloudfront.net/boxever-1.4.8.min.js"></Script>
+    </>
+  ) : undefined;
+  // END CUSTOMIZATION
+
   // DEMO TEAM CUSTOMIZATION - Add head section
   return (
     <>
@@ -59,6 +82,10 @@ function App({ Component, pageProps, router }: AppProps): JSX.Element {
       <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
         <Component {...rest} />
       </I18nProvider>
+
+      {/* DEMO TEAM CUSTOMIZATION - CDP integration */}
+      {cdpScripts}
+      {/* END CUSTOMIZATION*/}
     </>
   );
   // END CUSTOMIZATION

Website/src/rendering/src/pages/_document.tsx

@@ -1,3 +1,5 @@
+// TODO: Remove the below eslint disable when eslint-config-next is updated to support tsx files for that validation
+// eslint-disable-next-line @next/next/no-document-import-in-page
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 
 class MyDocument extends Document {