Using correct initial pageload time

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())
+    if (hasRun) {
-    trackPageViewStart()
+      setInitialPageLoadTime(Date.now())
-    startTransition(() => {
+      trackPageViewStart()
-      startRouterTransition()
+      startTransition(() => {
-    })
+        startRouterTransition()
-  }, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
+      })
+    }
+  }, [
+    pathName,
+    searchParams,
+    setInitialPageLoadTime,
+    startRouterTransition,
+    hasRun,
+  ])
 
   return <>{children}</>
 }

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<TransitionStatus>(
     TransitionStatusEnum.NotRun
   )
-  const { getPageLoadTime } = useTrackingStore()
+  const { getPageLoadTime, hasRun, setHasRun } = useTrackingStore()
 
   const pathName = usePathname()
   const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
 
+  const hasRunInitial = useRef<boolean>(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