diff --git a/components/TrackingSDK/RouterTracking.tsx b/components/TrackingSDK/RouterTracking.tsx index d73bfd6ce..16270a0f0 100644 --- a/components/TrackingSDK/RouterTracking.tsx +++ b/components/TrackingSDK/RouterTracking.tsx @@ -11,17 +11,25 @@ import { trackPageViewStart } from "@/utils/tracking" export default function RouterTracking({ children }: React.PropsWithChildren) { const pathName = usePathname() const searchParams = useSearchParams() - const { setInitialPageLoadTime } = useTrackingStore() + const { setInitialPageLoadTime, hasRun } = useTrackingStore() const { startRouterTransition } = useRouterTransitionStore() useEffect(() => { - setInitialPageLoadTime(Date.now()) - trackPageViewStart() - startTransition(() => { - startRouterTransition() - }) - }, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition]) + if (hasRun) { + setInitialPageLoadTime(Date.now()) + trackPageViewStart() + startTransition(() => { + startRouterTransition() + }) + } + }, [ + pathName, + searchParams, + setInitialPageLoadTime, + startRouterTransition, + hasRun, + ]) return <>{children} } diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index cbece358c..b22db682d 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/components/TrackingSDK/RouterTransition.tsx @@ -1,7 +1,13 @@ "use client" import { usePathname } from "next/navigation" -import { startTransition, useEffect, useOptimistic, useState } from "react" +import { + startTransition, + useEffect, + useOptimistic, + useRef, + useState, +} from "react" import useRouterTransitionStore from "@/stores/router-transition" import useTrackingStore from "@/stores/tracking" @@ -27,11 +33,44 @@ export default function RouterTransition({ const [status, setStatus] = useState( TransitionStatusEnum.NotRun ) - const { getPageLoadTime } = useTrackingStore() + const { getPageLoadTime, hasRun, setHasRun } = useTrackingStore() const pathName = usePathname() const { isTransitioning, stopRouterTransition } = useRouterTransitionStore() + const hasRunInitial = useRef(false) + + useEffect(() => { + if (!hasRun && !hasRunInitial.current) { + const perfObserver = new PerformanceObserver((observedEntries) => { + const entry = observedEntries.getEntriesByType("navigation")[0] + if (entry) { + const trackingData = { + ...pageData, + pathName, + pageLoadTime: entry.duration / 1000, + } + const pageObject = createSDKPageObject(trackingData) + console.log("TRACKING: Tracking initial pageView", pageObject) + window.adobeDataLayer.push({ + event: "pageView", + pageInfo: pageObject, + userInfo: userData, + hotelInfo: hotelInfo, + }) + + perfObserver.disconnect() + } + }) + perfObserver.observe({ + type: "navigation", + buffered: true, + }) + hasRunInitial.current = true + setHasRun() + } + }, [pathName, hasRun, setHasRun, hotelInfo, userData, pageData]) + useEffect(() => { if (isTransitioning && status === TransitionStatusEnum.NotRun) { startTransition(() => { @@ -50,7 +89,7 @@ export default function RouterTransition({ !isTransitioning && status === TransitionStatusEnum.Done ) { - if (window.adobeDataLayer) { + if (window.adobeDataLayer && hasRun && !hasRunInitial.current) { const trackingData = { ...pageData, pathName, @@ -80,6 +119,7 @@ export default function RouterTransition({ userData, hotelInfo, getPageLoadTime, + hasRun, ]) return null