From b424cf7bc486f3774da89ecfd78d2d29aa9aaa66 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 29 Nov 2024 12:49:19 +0100
Subject: [PATCH] Fixed tracking pageViewStart on hard reload

---
 .../hotelreservation/(standard)/page.tsx      | 16 +++++++++++++++
 components/TrackingSDK/RouterTracking.tsx     | 20 +++++++++++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
index 0c0dd409b..8e2fca10f 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/page.tsx
@@ -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>
   )
 }
diff --git a/components/TrackingSDK/RouterTracking.tsx b/components/TrackingSDK/RouterTracking.tsx
index 7b8cb7626..31cd384f4 100644
--- a/components/TrackingSDK/RouterTracking.tsx
+++ b/components/TrackingSDK/RouterTracking.tsx
@@ -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
 }