diff --git a/apps/scandic-web/components/TrackingSDK/RouterTracking.tsx b/apps/scandic-web/components/TrackingSDK/RouterTracking.tsx index 91bfdf492..13789860d 100644 --- a/apps/scandic-web/components/TrackingSDK/RouterTracking.tsx +++ b/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 } = - useTrackingStore() + const { + setInitialPageLoadTime, + updateRouteInfo, + hasPathOrLangChanged, + hasBookingFlowParamsChange, + } = useTrackingStore() const { startRouterTransition } = useRouterTransitionStore() useEffect(() => { - updateRouteInfo(pathName, currentLang) - if (hasPathOrLangChanged()) { + updateRouteInfo(pathName, currentLang, searchParams) + if (hasPathOrLangChanged() || hasBookingFlowParamsChange()) { setInitialPageLoadTime(Date.now()) trackPageViewStart() startTransition(() => { @@ -34,6 +38,7 @@ export default function RouterTracking() { currentLang, updateRouteInfo, hasPathOrLangChanged, + hasBookingFlowParamsChange, setInitialPageLoadTime, startRouterTransition, ]) diff --git a/apps/scandic-web/stores/tracking.ts b/apps/scandic-web/stores/tracking.ts index 63ced2bf4..b7b42db11 100644 --- a/apps/scandic-web/stores/tracking.ts +++ b/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((set, get) => ({ @@ -21,26 +32,32 @@ const useTrackingStore = create((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((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