138 lines
3.7 KiB
TypeScript
138 lines
3.7 KiB
TypeScript
"use client"
|
|
|
|
import { usePathname } from "next/navigation"
|
|
import {
|
|
startTransition,
|
|
useEffect,
|
|
useOptimistic,
|
|
useRef,
|
|
useState,
|
|
} from "react"
|
|
|
|
import useRouterTransitionStore from "@/stores/router-transition"
|
|
import useTrackingStore from "@/stores/tracking"
|
|
|
|
import { useSessionId } from "@/hooks/useSessionId"
|
|
import { createSDKPageObject } from "@/utils/tracking"
|
|
|
|
import { TrackingSDKProps } from "@/types/components/tracking"
|
|
|
|
enum TransitionStatusEnum {
|
|
NotRun = "NotRun",
|
|
Running = "Running",
|
|
Done = "Done",
|
|
}
|
|
|
|
type TransitionStatus = keyof typeof TransitionStatusEnum
|
|
|
|
export default function RouterTransition({
|
|
pageData,
|
|
userData,
|
|
hotelInfo,
|
|
}: TrackingSDKProps) {
|
|
const [loading, setLoading] = useOptimistic(false)
|
|
const [status, setStatus] = useState<TransitionStatus>(
|
|
TransitionStatusEnum.NotRun
|
|
)
|
|
const { getPageLoadTime, hasRun, setHasRun } = useTrackingStore()
|
|
|
|
const sessionId = useSessionId()
|
|
const pathName = usePathname()
|
|
const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
|
|
|
|
// We need this check to differentiate hard vs soft navigations
|
|
// This is not because of StrictMode
|
|
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,
|
|
sessionId,
|
|
pathName,
|
|
pageLoadTime: entry.duration / 1000,
|
|
}
|
|
const pageObject = createSDKPageObject(trackingData)
|
|
console.log("TRACKING: Tracking initial pageView", pageObject)
|
|
console.log("TRACKING: Tracking initial userData", userData)
|
|
console.log("TRACKING: Tracking initial hotelInfo", hotelInfo)
|
|
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, sessionId])
|
|
|
|
useEffect(() => {
|
|
if (isTransitioning && status === TransitionStatusEnum.NotRun) {
|
|
startTransition(() => {
|
|
setStatus(TransitionStatusEnum.Running)
|
|
setLoading(true)
|
|
})
|
|
} else if (
|
|
!loading &&
|
|
isTransitioning &&
|
|
status === TransitionStatusEnum.Running
|
|
) {
|
|
setStatus(TransitionStatusEnum.Done)
|
|
stopRouterTransition()
|
|
} else if (
|
|
!loading &&
|
|
!isTransitioning &&
|
|
status === TransitionStatusEnum.Done
|
|
) {
|
|
if (window.adobeDataLayer && hasRun && !hasRunInitial.current) {
|
|
const trackingData = {
|
|
...pageData,
|
|
sessionId,
|
|
pathName,
|
|
pageLoadTime: getPageLoadTime(),
|
|
}
|
|
const pageObject = createSDKPageObject(trackingData)
|
|
console.log(
|
|
"TRACKING: Tracking RouterTransition pageViewEnd",
|
|
pageObject
|
|
)
|
|
console.log("TRACKING: Tracking RouterTransition userData", userData)
|
|
console.log("TRACKING: Tracking RouterTransition hotelInfo", hotelInfo)
|
|
window.adobeDataLayer.push({
|
|
event: "pageView",
|
|
pageInfo: pageObject,
|
|
userInfo: userData,
|
|
hotelInfo: hotelInfo,
|
|
})
|
|
}
|
|
}
|
|
}, [
|
|
isTransitioning,
|
|
loading,
|
|
status,
|
|
setLoading,
|
|
stopRouterTransition,
|
|
pageData,
|
|
pathName,
|
|
userData,
|
|
hotelInfo,
|
|
getPageLoadTime,
|
|
hasRun,
|
|
sessionId,
|
|
])
|
|
|
|
return null
|
|
}
|