Fixed tracking pageViewStart on hard reload

This commit is contained in:
Linus Flood
2024-11-29 12:49:19 +01:00
parent 0958c626c6
commit b424cf7bc4
2 changed files with 32 additions and 4 deletions

View File

@@ -1,9 +1,15 @@
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
import TrackingSDK from "@/components/TrackingSDK"
import { setLang } from "@/i18n/serverContext"
import styles from "./page.module.css"
import {
TrackingChannelEnum,
TrackingSDKPageData,
} from "@/types/components/tracking"
import type { LangParams, PageArgs } from "@/types/params"
export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
@@ -13,9 +19,19 @@ export default function HotelReservationPage({ params }: PageArgs<LangParams>) {
return null
}
const pageTrackingData: TrackingSDKPageData = {
pageId: "hotelreservation",
domainLanguage: params.lang as Lang,
channel: TrackingChannelEnum["hotelreservation"],
pageName: "hotelreservation",
siteSections: "hotelreservation",
pageType: "hotelreservationstartpage",
}
return (
<div className={styles.page}>
New booking flow! Please report errors/issues in Slack.
<TrackingSDK pageData={pageTrackingData} />
</div>
)
}

View File

@@ -1,22 +1,33 @@
"use client"
import { usePathname, useSearchParams } from "next/navigation"
import { startTransition, useEffect } from "react"
import { startTransition, useEffect, useRef } from "react"
import useRouterTransitionStore from "@/stores/router-transition"
import useTrackingStore from "@/stores/tracking"
import { trackPageViewStart } from "@/utils/tracking"
export default function RouterTracking({ children }: React.PropsWithChildren) {
export default function RouterTracking() {
const pathName = usePathname()
const searchParams = useSearchParams()
const { setInitialPageLoadTime, hasRun } = useTrackingStore()
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(() => {
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")
setInitialPageLoadTime(Date.now())
trackPageViewStart()
@@ -24,6 +35,7 @@ export default function RouterTracking({ children }: React.PropsWithChildren) {
startRouterTransition()
})
}
previousPathname.current = pathName // Update for next render
}, [
pathName,
searchParams,
@@ -32,5 +44,5 @@ export default function RouterTracking({ children }: React.PropsWithChildren) {
hasRun,
])
return <>{children}</>
return null
}