Fixed new tracking requirements

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useEffect, useMemo } from "react"
+import { useEffect, useMemo, useRef } from "react"
 
 import { Lang } from "@/constants/languages"
 import { RoomConfiguration } from "@/server/routers/hotels/output"
@@ -48,6 +48,11 @@ export default function EnterDetailsTracking(props: Props) {
   const { getPageLoadTime, hasRun } = useTrackingStore()
   const pathName = usePathname()
 
+  // We need this check to differentiate hard vs soft navigations
+  // This is not because of StrictMode
+  const hasRunInitial = useRef<boolean>(false)
+  const previousPathname = useRef<string | null>(null)
+
   const getSpecialRoomType = (packages: Packages | null) => {
     if (!packages) {
       return ""
@@ -123,25 +128,31 @@ export default function EnterDetailsTracking(props: Props) {
   ])
 
   useEffect(() => {
-    if (!hasRun) {
+    if (!hasRunInitial.current) {
+      hasRunInitial.current = true
+      previousPathname.current = pathName // Set initial path to compare later
       return
     }
-    console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
+
-    console.log(
+    if (previousPathname.current !== pathName) {
-      "TRACKING: Tracking RouterTransition userData",
+      console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
-      userTrackingData
+      console.log(
-    )
+        "TRACKING: Tracking RouterTransition userData",
-    console.log(
+        userTrackingData
-      "TRACKING: Tracking RouterTransition hotelInfo",
+      )
-      hotelDetailsData
+      console.log(
-    )
+        "TRACKING: Tracking RouterTransition hotelInfo",
-    window.adobeDataLayer.push({
+        hotelDetailsData
-      event: "pageViewEnd",
+      )
-      pageInfo: pageObject,
+      window.adobeDataLayer.push({
-      userInfo: userTrackingData,
+        event: "pageView",
-      hotelInfo: hotelDetailsData,
+        pageInfo: pageObject,
-    })
+        userInfo: userTrackingData,
-  }, [userTrackingData, hasRun, pageObject, hotelDetailsData])
+        hotelInfo: hotelDetailsData,
+      })
+    }
+    previousPathname.current = pathName // Update for next render
+  }, [userTrackingData, pageObject, hotelDetailsData, pathName])
 
   return null
 }

components/TrackingSDK/RouterTracking.tsx

@@ -11,7 +11,7 @@ import { trackPageViewStart } from "@/utils/tracking"
 export default function RouterTracking() {
   const pathName = usePathname()
   const searchParams = useSearchParams()
-  const { setInitialPageLoadTime, hasRun } = useTrackingStore()
+  const { setInitialPageLoadTime } = useTrackingStore()
 
   const { startRouterTransition } = useRouterTransitionStore()
 
@@ -36,13 +36,7 @@ export default function RouterTracking() {
       })
     }
     previousPathname.current = pathName // Update for next render
-  }, [
+  }, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
-    pathName,
-    searchParams,
-    setInitialPageLoadTime,
-    startRouterTransition,
-    hasRun,
-  ])
 
   return null
 }

components/TrackingSDK/RouterTransition.tsx

@@ -107,7 +107,7 @@ export default function RouterTransition({
         console.log("TRACKING: Tracking RouterTransition userData", userData)
         console.log("TRACKING: Tracking RouterTransition hotelInfo", hotelInfo)
         window.adobeDataLayer.push({
-          event: "pageViewEnd",
+          event: "pageView",
           pageInfo: pageObject,
           userInfo: userData,
           hotelInfo: hotelInfo,