Fixed tracking pageViewStart on hard reload
This commit is contained in:
@@ -1,9 +1,15 @@
|
|||||||
|
import { Lang } from "@/constants/languages"
|
||||||
import { env } from "@/env/server"
|
import { env } from "@/env/server"
|
||||||
|
|
||||||
|
import TrackingSDK from "@/components/TrackingSDK"
|
||||||
import { setLang } from "@/i18n/serverContext"
|
import { setLang } from "@/i18n/serverContext"
|
||||||
|
|
||||||
import styles from "./page.module.css"
|
import styles from "./page.module.css"
|
||||||
|
|
||||||
|
import {
|
||||||
|
TrackingChannelEnum,
|
||||||
|
TrackingSDKPageData,
|
||||||
|
} from "@/types/components/tracking"
|
||||||
import type { LangParams, PageArgs } from "@/types/params"
|
import type { LangParams, PageArgs } from "@/types/params"
|
||||||
|
|
||||||
export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
|
export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
|
||||||
@@ -13,9 +19,19 @@ export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
|
|||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pageTrackingData: TrackingSDKPageData = {
|
||||||
|
pageId: "hotelreservation",
|
||||||
|
domainLanguage: params.lang as Lang,
|
||||||
|
channel: TrackingChannelEnum["hotelreservation"],
|
||||||
|
pageName: "hotelreservation",
|
||||||
|
siteSections: "hotelreservation",
|
||||||
|
pageType: "hotelreservationstartpage",
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.page}>
|
<div className={styles.page}>
|
||||||
New booking flow! Please report errors/issues in Slack.
|
New booking flow! Please report errors/issues in Slack.
|
||||||
|
<TrackingSDK pageData={pageTrackingData} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,22 +1,33 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { usePathname, useSearchParams } from "next/navigation"
|
import { usePathname, useSearchParams } from "next/navigation"
|
||||||
import { startTransition, useEffect } from "react"
|
import { startTransition, useEffect, useRef } from "react"
|
||||||
|
|
||||||
import useRouterTransitionStore from "@/stores/router-transition"
|
import useRouterTransitionStore from "@/stores/router-transition"
|
||||||
import useTrackingStore from "@/stores/tracking"
|
import useTrackingStore from "@/stores/tracking"
|
||||||
|
|
||||||
import { trackPageViewStart } from "@/utils/tracking"
|
import { trackPageViewStart } from "@/utils/tracking"
|
||||||
|
|
||||||
export default function RouterTracking({ children }: React.PropsWithChildren) {
|
export default function RouterTracking() {
|
||||||
const pathName = usePathname()
|
const pathName = usePathname()
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
const { setInitialPageLoadTime, hasRun } = useTrackingStore()
|
const { setInitialPageLoadTime, hasRun } = useTrackingStore()
|
||||||
|
|
||||||
const { startRouterTransition } = useRouterTransitionStore()
|
const { startRouterTransition } = useRouterTransitionStore()
|
||||||
|
|
||||||
|
// We need this check to differentiate hard vs soft navigations
|
||||||
|
// This is not because of StrictMode
|
||||||
|
const hasRunInitial = useRef<boolean>(false)
|
||||||
|
const previousPathname = useRef<string | null>(null)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (hasRun) {
|
if (!hasRunInitial.current) {
|
||||||
|
hasRunInitial.current = true
|
||||||
|
previousPathname.current = pathName // Set initial path to compare later
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (previousPathname.current !== pathName) {
|
||||||
console.log("TRACKING: RESET PAGE LOAD TIME")
|
console.log("TRACKING: RESET PAGE LOAD TIME")
|
||||||
setInitialPageLoadTime(Date.now())
|
setInitialPageLoadTime(Date.now())
|
||||||
trackPageViewStart()
|
trackPageViewStart()
|
||||||
@@ -24,6 +35,7 @@ export default function RouterTracking({ children }: React.PropsWithChildren) {
|
|||||||
startRouterTransition()
|
startRouterTransition()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
previousPathname.current = pathName // Update for next render
|
||||||
}, [
|
}, [
|
||||||
pathName,
|
pathName,
|
||||||
searchParams,
|
searchParams,
|
||||||
@@ -32,5 +44,5 @@ export default function RouterTracking({ children }: React.PropsWithChildren) {
|
|||||||
hasRun,
|
hasRun,
|
||||||
])
|
])
|
||||||
|
|
||||||
return <>{children}</>
|
return null
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user