feat: add tracking events for loyalty pages

components/ContentType/LoyaltyPage/LoyaltyPage.tsx

@@ -1,5 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import TrackingSDK from "@/components/Current/TrackingSDK"
 import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
@@ -14,6 +15,10 @@ export default async function LoyaltyPage({ lang }: LangParams) {
   if (!loyaltyPage) {
     return null
   }
+
+  const loyaltyPageTracking =
+    await serverClient().contentstack.loyaltyPage.tracking()
+
   return (
     <section className={styles.content}>
       {loyaltyPage.sidebar.length ? (
@@ -26,6 +31,7 @@ export default async function LoyaltyPage({ lang }: LangParams) {
           <Blocks blocks={loyaltyPage.blocks} lang={lang} />
         ) : null}
       </MaxWidth>
+      <TrackingSDK pageData={loyaltyPageTracking} />
     </section>
   )
 }

components/Current/TrackingSDK.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import {
+  SiteSectionObject,
+  TrackingSDKData,
+  TrackingSDKProps,
+} from "@/types/components/tracking"
+
+function createSDKPageObject(trackingData: TrackingSDKData) {
+  const [lang, ...segments] = trackingData.pathName
+    .split("/")
+    .filter((seg: string) => seg)
+
+  function getSiteSections(segments: string[]): SiteSectionObject {
+    /* 
+      Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below
+      The segments ['explore-scandic', 'wifi'] should result in:
+      {
+        sitesection1: "explore-scandic",
+        sitesection2: "explore-scandic|wifi",
+        sitesection3: "explore-scandic|wifi|",
+        sitesection4: "explore-scandic|wifi||",
+        sitesection5: "explore-scandic|wifi|||",
+        sitesection6: "explore-scandic|wifi||||",
+      } 
+    */
+    const sitesections = {} as SiteSectionObject
+    for (let i = 0; i < 6; i++) {
+      const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
+
+      sitesections[key] = segments.slice(0, i + 1).join("|")
+      if (i > 0 && !segments[i]) {
+        sitesections[key] = sitesections[key].concat(
+          "|".repeat(i + 1 - segments.length)
+        )
+      }
+    }
+    return sitesections
+  }
+  const siteSections = getSiteSections(segments)
+  const { host: domain } = window.location
+  const page_obj = {
+    event: "pageView",
+    pageInfo: {
+      pageName: segments.join("|"),
+      pageType: "contentpage",
+      pageId: trackingData.pageId,
+      channel: "",
+      siteSections,
+      domain,
+      siteversion: "new-web",
+      domainlanguage: trackingData.lang ? trackingData.lang : lang,
+      createDate: trackingData.createdDate,
+      publishDate: trackingData.publishedDate,
+      // sessionid: "<unique identifier of session>", // base on what?
+    },
+  }
+  return page_obj
+}
+
+export default function TrackingSDK({ pageData }: TrackingSDKProps) {
+  const pathName = usePathname()
+
+  function CookiebotCallbackOnAccept() {
+    const cookie = window._satellite.cookie.get("CookieConsent")
+
+    if (window.Cookiebot?.changed && window.adobe) {
+      if (cookie?.includes("statistics:true")) {
+        window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
+      } else {
+        window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
+      }
+      window.adobe.optIn.complete()
+      console.warn("window.load event explicitly dispatched.")
+      window.dispatchEvent(new Event("load"))
+    }
+  }
+
+  function CookebotCallbackOnDecline() {
+    if (window.Cookiebot?.changed && window.adobe) {
+      window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
+    }
+  }
+
+  useEffect(() => {
+    if (window.adobeDataLayer) {
+      const trackingData = { ...pageData, pathName }
+      const pageObject = createSDKPageObject(trackingData)
+      window.adobeDataLayer.push(pageObject)
+    }
+  }, [pathName, pageData])
+
+  useEffect(() => {
+    // handle consent
+    window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
+    window.addEventListener("CookiebotOnDecline", CookebotCallbackOnDecline)
+
+    return () => {
+      window.removeEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
+      window.removeEventListener(
+        "CookiebotOnDecline",
+        CookebotCallbackOnDecline
+      )
+    }
+  }, [])
+
+  return null
+}