diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx index 3a923a924..42c6e0450 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx +++ b/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(false) + const previousPathname = useRef(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( - "TRACKING: Tracking RouterTransition userData", - userTrackingData - ) - console.log( - "TRACKING: Tracking RouterTransition hotelInfo", - hotelDetailsData - ) - window.adobeDataLayer.push({ - event: "pageViewEnd", - pageInfo: pageObject, - userInfo: userTrackingData, - hotelInfo: hotelDetailsData, - }) - }, [userTrackingData, hasRun, pageObject, hotelDetailsData]) + + if (previousPathname.current !== pathName) { + console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject) + console.log( + "TRACKING: Tracking RouterTransition userData", + userTrackingData + ) + console.log( + "TRACKING: Tracking RouterTransition hotelInfo", + hotelDetailsData + ) + window.adobeDataLayer.push({ + event: "pageView", + pageInfo: pageObject, + userInfo: userTrackingData, + hotelInfo: hotelDetailsData, + }) + } + previousPathname.current = pathName // Update for next render + }, [userTrackingData, pageObject, hotelDetailsData, pathName]) return null } diff --git a/components/TrackingSDK/RouterTracking.tsx b/components/TrackingSDK/RouterTracking.tsx index 31cd384f4..6c12f6206 100644 --- a/components/TrackingSDK/RouterTracking.tsx +++ b/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, - hasRun, - ]) + }, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition]) return null } diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index 506ce17cf..c16e47d6e 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/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,