Tracking WIP

components/Current/Header/LoginButton.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { PropsWithChildren, useEffect } from "react"
+import { PropsWithChildren } from "react"
 
 import { login } from "@/constants/routes/handleAuth"
 
@@ -31,17 +31,6 @@ export default function LoginButton({
     ? `${login[lang]}?redirectTo=${encodeURIComponent(pathName)}`
     : login[lang]
 
-  useEffect(() => {
-    document
-      .getElementById(trackingId)
-      ?.addEventListener("click", () => trackLoginClick(position))
-    return () => {
-      document
-        .getElementById(trackingId)
-        ?.removeEventListener("click", () => trackLoginClick(position))
-    }
-  }, [position, trackingId])
-
   return (
     <Link
       className={className}
@@ -49,6 +38,7 @@ export default function LoginButton({
       color={color}
       href={href}
       prefetch={false}
+      onClick={() => trackLoginClick(position)}
     >
       {children}
     </Link>

components/TempDesignSystem/Link/index.tsx

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from "next/navigation"
 import { startTransition, useCallback } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
+import useTrackingStore from "@/stores/tracking"
 
 import { trackClick, trackPageViewStart } from "@/utils/tracking"
 
@@ -27,6 +28,7 @@ export default function Link({
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
+  const { setInitialPageLoadTime } = useTrackingStore()
   let isActive = active || currentPageSlug === href
 
   if (partialMatch && !isActive) {
@@ -72,6 +74,7 @@ export default function Link({
           return
         }
         e.preventDefault()
+        setInitialPageLoadTime(Date.now())
         trackPageViewStart()
         startTransition(() => {
           startRouterTransition()

components/TrackingSDK/Client.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useRef } from "react"
 
 import { webviews } from "@/constants/routes/webviews"
 import useTrackingStore from "@/stores/tracking"
@@ -10,11 +10,15 @@ import { createSDKPageObject } from "@/utils/tracking"
 
 import { TrackingSDKProps } from "@/types/components/tracking"
 
-export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
+export default function TrackingSDK({
+  pageData,
+  userData,
+  hotelInfo,
+}: TrackingSDKProps) {
   const pathName = usePathname()
   const isWebview = webviews.includes(pathName)
-  const { hasRun, setHasRun } = useTrackingStore()
-
+  const { hasRun, setHasRun, getPageLoadTime } = useTrackingStore()
+  const hasRunLocal = useRef<boolean>(false)
   const CookiebotCallbackOnAccept = useCallback(() => {
     const cookie = window._satellite.cookie.get("CookieConsent")
 
@@ -40,31 +44,36 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
   }
 
   useEffect(() => {
-    if (!hasRun) {
-      const perfObserver = new PerformanceObserver((observedEntries) => {
-        const entry = observedEntries.getEntriesByType("navigation")[0]
-
-        if (entry && window.adobeDataLayer) {
-          const trackingData = { ...pageData, pathName }
-          const pageObject = createSDKPageObject(trackingData)
-
-          window.adobeDataLayer.push({
-            event: "pageView",
-            pageInfo: pageObject,
-            userInfo: userData,
-          })
-          perfObserver.disconnect()
-        }
-      })
-
-      perfObserver.observe({
-        type: "navigation",
-        buffered: true,
-      })
-
+    if (!hasRun && !hasRunLocal.current) {
+      hasRunLocal.current = true
       setHasRun()
+
+      if (window.adobeDataLayer) {
+        const trackingData = {
+          ...pageData,
+          pathName,
+          pageLoadTime: getPageLoadTime(),
+        }
+
+        const pageObject = createSDKPageObject(trackingData)
+        console.log("TRACKING: Tracking pageView", pageObject, userData)
+        window.adobeDataLayer.push({
+          event: "pageView",
+          pageInfo: pageObject,
+          userInfo: userData,
+          hotelInfo: hotelInfo,
+        })
+      }
     }
-  }, [pathName, pageData, userData, hasRun, setHasRun])
+  }, [
+    pathName,
+    pageData,
+    userData,
+    hasRun,
+    setHasRun,
+    hotelInfo,
+    getPageLoadTime,
+  ])
 
   useEffect(() => {
     // handle consent

components/TrackingSDK/RouterTransition.tsx

@@ -4,8 +4,9 @@ import { usePathname } from "next/navigation"
 import { startTransition, useEffect, useOptimistic, useState } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
+import useTrackingStore from "@/stores/tracking"
 
-import { createSDKPageObject } from "@/utils/tracking"
+import { createSDKPageObject, trackPageViewStart } from "@/utils/tracking"
 
 import { TrackingSDKProps } from "@/types/components/tracking"
 
@@ -20,15 +21,28 @@ type TransitionStatus = keyof typeof TransitionStatusEnum
 export default function RouterTransition({
   pageData,
   userData,
+  hotelInfo,
 }: TrackingSDKProps) {
   const [loading, setLoading] = useOptimistic(false)
   const [status, setStatus] = useState<TransitionStatus>(
     TransitionStatusEnum.NotRun
   )
+  const { getPageLoadTime } = useTrackingStore()
 
   const pathName = usePathname()
   const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
 
+  // useEffect(() => {
+  //   const handleStart = () => {
+  //     trackPageViewStart()
+  //     setInitialPageLoadTime(Date.now())
+  //   }
+
+  //   return () => {
+  //     handleStart()
+  //   }
+  // }, [pathName])
+
   useEffect(() => {
     if (isTransitioning && status === TransitionStatusEnum.NotRun) {
       startTransition(() => {
@@ -48,13 +62,21 @@ export default function RouterTransition({
       status === TransitionStatusEnum.Done
     ) {
       if (window.adobeDataLayer) {
-        const trackingData = { ...pageData, pathName }
+        const trackingData = {
+          ...pageData,
+          pathName,
+          pageLoadTime: getPageLoadTime(),
+        }
         const pageObject = createSDKPageObject(trackingData)
-
+        console.log(
+          "TRACKING: Tracking RouterTransition pageViewEnd",
+          pageObject
+        )
         window.adobeDataLayer.push({
           event: "pageViewEnd",
           pageInfo: pageObject,
           userInfo: userData,
+          hotelInfo: hotelInfo,
         })
       }
     }
@@ -67,6 +89,8 @@ export default function RouterTransition({
     pageData,
     pathName,
     userData,
+    hotelInfo,
+    getPageLoadTime,
   ])
 
   return null

components/TrackingSDK/index.tsx

@@ -4,7 +4,10 @@ import RouterTransition from "@/components/TrackingSDK/RouterTransition"
 
 import TrackingSDKClient from "./Client"
 
-import { TrackingSDKPageData } from "@/types/components/tracking"
+import {
+  TrackingSDKHotelInfo,
+  TrackingSDKPageData,
+} from "@/types/components/tracking"
 
 export const preloadUserTracking = () => {
   void serverClient().user.tracking()
@@ -12,15 +15,25 @@ export const preloadUserTracking = () => {
 
 export default async function TrackingSDK({
   pageData,
+  hotelInfo,
 }: {
   pageData: TrackingSDKPageData
+  hotelInfo?: TrackingSDKHotelInfo
 }) {
   const userTrackingData = await serverClient().user.tracking()
 
   return (
     <>
-      <TrackingSDKClient pageData={pageData} userData={userTrackingData} />
-      <RouterTransition pageData={pageData} userData={userTrackingData} />
+      <TrackingSDKClient
+        pageData={pageData}
+        userData={userTrackingData}
+        hotelInfo={hotelInfo}
+      />
+      <RouterTransition
+        pageData={pageData}
+        userData={userTrackingData}
+        hotelInfo={hotelInfo}
+      />
     </>
   )
 }