web/components/Current/TrackingSDK.tsx

"use client"

import { usePathname } from "next/navigation"
import { useEffect } from "react"

import {
  SiteSectionObject,
  TrackableClickIdEnum,
  TrackingPosition,
  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
      )
    }
  }, [])

  function loginClick(position: TrackingPosition) {
    if (window.adobeDataLayer) {
      const loginEvent = {
        event: "loginStart",
        login: {
          position,
          action: "login start",
          ctaName: "login",
        },
      }
      window.adobeDataLayer.push(loginEvent)
    }
  }

  function linkClick(name: string) {
    if (window.adobeDataLayer) {
      window.adobeDataLayer.push({
        event: "linkClick",
        cta: {
          name: name,
        },
      })
    }
  }

  useEffect(() => {
    // Handle clickable events
    document
      .getElementById(TrackableClickIdEnum.LoginStartTopMenu)
      ?.addEventListener("click", () => loginClick("top menu"))
    document
      .getElementById(TrackableClickIdEnum.LoginStartJoinScandicFriends)
      ?.addEventListener("click", () =>
        loginClick("join scandic friends sidebar")
      )
    document
      .getElementById(TrackableClickIdEnum.LoginStartHamburgerMenu)
      ?.addEventListener("click", () => loginClick("hamburger menu"))

    document
      .getElementById(TrackableClickIdEnum.ProfilePictureLink)
      ?.addEventListener("click", () => linkClick("profile picture link"))

    return () => {
      document
        .getElementById(TrackableClickIdEnum.LoginStartTopMenu)
        ?.removeEventListener("click", () => loginClick("top menu"))
      document
        .getElementById(TrackableClickIdEnum.LoginStartJoinScandicFriends)
        ?.removeEventListener("click", () =>
          loginClick("join scandic friends sidebar")
        )
      document
        .getElementById(TrackableClickIdEnum.LoginStartHamburgerMenu)
        ?.removeEventListener("click", () => loginClick("hamburger menu"))
      document
        .getElementById(TrackableClickIdEnum.ProfilePictureLink)
        ?.removeEventListener("click", () => linkClick("profile picture link"))
    }
  }, [])

  return null
}