via-632: adobe analytics poc

.tool-versions

@@ -3,6 +3,7 @@
 terraform 1.14.1
 pre-commit 4.5.0
 vale 3.13.0
+gitleaks 8.30.1
 nodejs 22.13.1
 
 # ==============================================================================

src/app/_components/analytics/DigitalDataScript.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { buildDigitalData } from "@src/app/_components/analytics/digitalDataConfig";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+const toSafeInlineScriptJson = (value: unknown): string => {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+};
+
+export const DigitalDataScript = () => {
+  const pathname = usePathname();
+  const digitalData = buildDigitalData(pathname);
+  const digitalDataScript = `window.digitalData = ${toSafeInlineScriptJson(digitalData)};`;
+
+  // Keep window.digitalData current on every client-side navigation
+  useEffect(() => {
+    window.digitalData = buildDigitalData(pathname);
+    document.dispatchEvent(new CustomEvent("spa:pageview"));
+  }, [pathname]);
+
+  return <script id="digital-data-script" dangerouslySetInnerHTML={{ __html: digitalDataScript }} />;
+};

src/app/_components/analytics/digitalDataConfig.ts

@@ -0,0 +1,142 @@
+type DigitalData = {
+  page: {
+    pageInfo: {
+      pageName: string;
+    };
+    category: {
+      primaryCategory: string;
+      subCategory1: string;
+      subCategory2: string;
+      subCategory3: string;
+      subCategory4: string;
+    };
+  };
+};
+
+type PageCategory = {
+  pageName: string;
+  primaryCategory: string;
+  subCategory1: string;
+  subCategory2: string;
+  subCategory3: string;
+  subCategory4: string;
+};
+
+export const PAGE_DIGITAL_DATA: Record<string, PageCategory> = {
+  "/check-and-book-vaccinations": {
+    pageName: "nhs:vds:check-and-book-vaccinations", // page name
+    primaryCategory: "primary-cat-vaccinations", // site section
+    subCategory1: "hub", // prop1
+    subCategory2: "subCategory2", // prop2
+    subCategory3: "subCategory3", // prop3
+    subCategory4: "subCategory4",
+  },
+  "/vaccines-for-all-ages": {
+    pageName: "nhs:vds:vaccines-for-all-ages",
+    primaryCategory: "primary-cat-vaccinations",
+    subCategory1: "vaccines-for-all-ages",
+    subCategory2: "1",
+    subCategory3: "2",
+    subCategory4: "subCategory4",
+  },
+  "/vaccines-during-pregnancy": {
+    pageName: "nhs:vds:vaccines-during-pregnancy",
+    primaryCategory: "primary-cat-vaccinations",
+
+    subCategory1: "vaccines-during-pregnancy",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/our-policies/accessibility": {
+    pageName: "nhs:vds:our-policies:accessibility",
+    primaryCategory: "primary-cat-policies",
+    subCategory1: "accessibility",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/our-policies/cookies-policy": {
+    pageName: "nhs:vds:our-policies:cookies-policy",
+    primaryCategory: "primary-cat-policies",
+    subCategory1: "cookies-policy",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/service-failure": {
+    pageName: "nhs:vds:service-failure",
+    primaryCategory: "primary-cat-error",
+    subCategory1: "service-failure",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/sso-failure": {
+    pageName: "nhs:vds:sso-failure",
+    primaryCategory: "primary-cat-error",
+    subCategory1: "sso-failure",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/session-logout": {
+    pageName: "nhs:vds:session:logout",
+    primaryCategory: "primary-cat-session",
+    subCategory1: "logout",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+  "/session-timeout": {
+    pageName: "nhs:vds:session:timeout",
+    primaryCategory: "primary-cat-session",
+    subCategory1: "timeout",
+    subCategory2: "",
+    subCategory3: "",
+    subCategory4: "",
+  },
+};
+
+const DEFAULT_PAGE_CATEGORY: PageCategory = {
+  pageName: "nhs:vds:unknown",
+  primaryCategory: "primary-cat-unknown",
+  subCategory1: "",
+  subCategory2: "",
+  subCategory3: "",
+  subCategory4: "",
+};
+
+const resolvePageCategory = (pathname: string): PageCategory => {
+  if (PAGE_DIGITAL_DATA[pathname]) {
+    return PAGE_DIGITAL_DATA[pathname];
+  }
+
+  // Handle dynamic routes e.g. /vaccines/flu-vaccine
+  const vaccineMatch = pathname.match(/^\/vaccines\/([^/]+)$/);
+  if (vaccineMatch) {
+    const vaccine = vaccineMatch[1];
+    return {
+      pageName: `nhs:vds:vaccines:${vaccine}`,
+      primaryCategory: `${vaccine}`,
+      subCategory1: "subCategory1-val",
+      subCategory2: "subCategory2-val",
+      subCategory3: "",
+      subCategory4: "",
+    };
+  }
+
+  return DEFAULT_PAGE_CATEGORY;
+};
+
+export const buildDigitalData = (pathname: string): DigitalData => {
+  const { pageName, primaryCategory, subCategory1, subCategory2, subCategory3, subCategory4 } =
+    resolvePageCategory(pathname);
+
+  return {
+    page: {
+      pageInfo: { pageName },
+      category: { primaryCategory, subCategory1, subCategory2, subCategory3, subCategory4 },
+    },
+  };
+};

src/app/layout.tsx

@@ -1,3 +1,4 @@
+import { DigitalDataScript } from "@src/app/_components/analytics/DigitalDataScript";
 import { ClientUnhandledErrorLogger } from "@src/app/_components/client-unhandled-error-logger/ClientUnhandledErrorLogger";
 import { ClientProviders } from "@src/app/_components/context/ClientProviders";
 import { NoJsMessage } from "@src/app/_components/static/NoJsMessage";
@@ -29,6 +30,24 @@ export default function RootLayout({
 
         {/* NHS app js - https://nhsconnect.github.io/nhsapp-developer-documentation/js-v2-api-specification/ */}
         <Script src={"https://www.nhsapp.service.nhs.uk/js/v2/nhsapp.js"} strategy="beforeInteractive" />
+        {/* <Script id="push-to-data-layer-script">
+  {`
+    window.adobeDataLayer = window.adobeDataLayer || [];
+    window.adobeDataLayer.push({
+      event: "page view",
+      page: {
+        pageInfo: { pageName: "nhs:vds:check-and-book-vaccinations"},
+        category: { primaryCategory: "vaccinations-home", subCategory1: "subcat1", subCategory2: "subcat2", subCategory3: "subcat3", subCategory4: "subcat4"}
+      }
+    });
+  `}
+</Script>  */}
+        <DigitalDataScript />
+        <Script
+          id="adobe-launch-script"
+          src="https://assets.adobedtm.com/f8560165ec6a/de7c895bef21/launch-284cbaabc37d-development.min.js"
+          strategy="afterInteractive"
+        />
       </head>
 
       <body suppressHydrationWarning>

src/types/nhsapp-js.d.ts

@@ -1,5 +1,6 @@
 interface Window {
   // Reference: https://nhsconnect.github.io/nhsapp-developer-documentation/js-v2-api-specification/
+  digitalData?: unknown;
   nhsapp: {
     // tools functions are available within both native mobile and desktop app
     tools: {

tsconfig.json

@@ -28,6 +28,6 @@
     }
   },
   "types": ["node", "jest", "@testing-library/jest-dom"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "docs", "scripts", ".next", ".open-next"]
 }