diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index 6168d7764..2d397cd90 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/components/TrackingSDK/RouterTransition.tsx @@ -50,23 +50,31 @@ export default function RouterTransition({ useEffect(() => { if (!hasRun && !hasRunInitial.current) { const handleLoad = () => { - const entry = performance.getEntriesByType("navigation")[0] - if (entry) { - const trackingData = { - ...pageData, - sessionId, - pathName, - pageLoadTime: entry.duration / 1000, + const perfObserver = new PerformanceObserver((observedEntries) => { + const entry = observedEntries.getEntriesByType("navigation")[0] + + if (entry) { + const trackingData = { + ...pageData, + sessionId, + pathName, + pageLoadTime: entry.duration / 1000, + } + const pageObject = createSDKPageObject(trackingData) + trackPageView({ + event: "pageView", + pageInfo: pageObject, + userInfo: userData, + hotelInfo: hotelInfo, + paymentInfo, + }) + perfObserver.disconnect() } - const pageObject = createSDKPageObject(trackingData) - trackPageView({ - event: "pageView", - pageInfo: pageObject, - userInfo: userData, - hotelInfo: hotelInfo, - paymentInfo, - }) - } + }) + perfObserver.observe({ + type: "navigation", + buffered: true, + }) } // If the page is already loaded, execute immediately if (document.readyState === "complete") { @@ -76,6 +84,7 @@ export default function RouterTransition({ window.addEventListener("load", handleLoad) return () => window.removeEventListener("load", handleLoad) } + hasRunInitial.current = true setHasRun() } @@ -109,11 +118,12 @@ export default function RouterTransition({ status === TransitionStatusEnum.Done ) { if (hasRun && !hasRunInitial.current) { + const pageLoadTime = getPageLoadTime() const trackingData = { ...pageData, sessionId, pathName, - pageLoadTime: getPageLoadTime(), + pageLoadTime: pageLoadTime, } const pageObject = createSDKPageObject(trackingData) if (previousPathname.current !== pathName) {