Merged in fix/SW-2375-aa-tracking-critical-pageview- (pull request #1805)

fix: SW-2375 Tracking on booking-flow soft navigations based on query params

* fix: SW-2375 Tracking on booking-flow soft navigations based on query params

* fix: SW-2375 Restricted query params check to booking widget params

* fix: SW-2375 Moved empty check before other regex check


Approved-by: Tobias Johansson

apps/scandic-web/components/TrackingSDK/RouterTracking.tsx

@@ -14,14 +14,18 @@ export default function RouterTracking() {
   const searchParams = useSearchParams()
   const currentLang = useLang()
 
-  const { setInitialPageLoadTime, updateRouteInfo, hasPathOrLangChanged } =
+  const {
-    useTrackingStore()
+    setInitialPageLoadTime,
+    updateRouteInfo,
+    hasPathOrLangChanged,
+    hasBookingFlowParamsChange,
+  } = useTrackingStore()
 
   const { startRouterTransition } = useRouterTransitionStore()
 
   useEffect(() => {
-    updateRouteInfo(pathName, currentLang)
+    updateRouteInfo(pathName, currentLang, searchParams)
-    if (hasPathOrLangChanged()) {
+    if (hasPathOrLangChanged() || hasBookingFlowParamsChange()) {
       setInitialPageLoadTime(Date.now())
       trackPageViewStart()
       startTransition(() => {
@@ -34,6 +38,7 @@ export default function RouterTracking() {
     currentLang,
     updateRouteInfo,
     hasPathOrLangChanged,
+    hasBookingFlowParamsChange,
     setInitialPageLoadTime,
     startRouterTransition,
   ])

apps/scandic-web/stores/tracking.ts

@@ -2,16 +2,27 @@
 
 import { create } from "zustand"
 
+import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"
+
+import type { ReadonlyURLSearchParams } from "next/navigation"
+
 interface TrackingStoreState {
   initialStartTime: number
   setInitialPageLoadTime: (time: number) => void
   getPageLoadTime: () => number
+  currentParams: ReadonlyURLSearchParams | null
+  previousParams: ReadonlyURLSearchParams | null
   currentPath: string | null
   previousPath: string | null
   currentLang: string | null
   previousLang: string | null
-  updateRouteInfo: (path: string, lang: string) => void
+  updateRouteInfo: (
+    path: string,
+    lang: string,
+    params: ReadonlyURLSearchParams
+  ) => void
   hasPathOrLangChanged: () => boolean
+  hasBookingFlowParamsChange: () => boolean
 }
 
 const useTrackingStore = create<TrackingStoreState>((set, get) => ({
@@ -21,26 +32,32 @@ const useTrackingStore = create<TrackingStoreState>((set, get) => ({
     const { initialStartTime } = get()
     return (Date.now() - initialStartTime) / 1000
   },
+  currentParams: null,
+  previousParams: null,
   currentPath: null,
   previousPath: null,
   currentLang: null,
   previousLang: null,
-  updateRouteInfo: (path, lang) =>
+  updateRouteInfo: (path, lang, params) =>
     set((state) => {
       if (!path || !lang) return state
 
       if (!state.currentPath || !state.currentLang) {
         return {
+          currentParams: params,
           currentPath: path,
           currentLang: lang,
+          previousParams: null,
           previousPath: null,
           previousLang: null,
         }
       }
 
       return {
+        previousParams: state.currentParams,
         previousPath: state.currentPath,
         previousLang: state.currentLang,
+        currentParams: params,
         currentPath: path,
         currentLang: lang,
       }
@@ -52,6 +69,23 @@ const useTrackingStore = create<TrackingStoreState>((set, get) => ({
 
     return currentPath !== previousPath || currentLang !== previousLang
   },
+  hasBookingFlowParamsChange: () => {
+    const { currentPath, currentParams, previousParams } = get()
+
+    if (!previousParams || !currentParams) return false
+
+    if (!currentPath?.match(/^\/(da|de|en|fi|no|sv)\/(hotelreservation)/))
+      return false
+
+    const previousParamsObject = convertSearchParamsToObj(
+      searchParamsToRecord(previousParams)
+    )
+    const currentParamsObject = convertSearchParamsToObj(
+      searchParamsToRecord(currentParams)
+    )
+
+    return Object.is(previousParamsObject, currentParamsObject)
+  },
 }))
 
 export default useTrackingStore