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 { 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>
) )
} }

View File

@@ -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
} }