Merged in feat/SW-1909-update-adobe-on-language-change (pull request #1526)
feat(SW-1909): Fix Adobe Data Layer not updating during language changes * feat(SW-1909): Update Tracking on language changes Approved-by: Linus Flood
This commit is contained in:
@@ -1,41 +1,42 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { usePathname, useSearchParams } from "next/navigation"
|
import { usePathname, useSearchParams } from "next/navigation"
|
||||||
import { startTransition, useEffect, useRef } from "react"
|
import { startTransition, useEffect } 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 useLang from "@/hooks/useLang"
|
||||||
import { trackPageViewStart } from "@/utils/tracking"
|
import { trackPageViewStart } from "@/utils/tracking"
|
||||||
|
|
||||||
export default function RouterTracking() {
|
export default function RouterTracking() {
|
||||||
const pathName = usePathname()
|
const pathName = usePathname()
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
const { setInitialPageLoadTime } = useTrackingStore()
|
const currentLang = useLang()
|
||||||
|
|
||||||
|
const { setInitialPageLoadTime, updateRouteInfo, hasPathOrLangChanged } =
|
||||||
|
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 (!hasRunInitial.current) {
|
updateRouteInfo(pathName, currentLang)
|
||||||
hasRunInitial.current = true
|
if (hasPathOrLangChanged()) {
|
||||||
previousPathname.current = pathName // Set initial path to compare later
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (previousPathname.current !== pathName) {
|
|
||||||
setInitialPageLoadTime(Date.now())
|
setInitialPageLoadTime(Date.now())
|
||||||
trackPageViewStart()
|
trackPageViewStart()
|
||||||
startTransition(() => {
|
startTransition(() => {
|
||||||
startRouterTransition()
|
startRouterTransition()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
previousPathname.current = pathName // Update for next render
|
}, [
|
||||||
}, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
|
pathName,
|
||||||
|
searchParams,
|
||||||
|
currentLang,
|
||||||
|
updateRouteInfo,
|
||||||
|
hasPathOrLangChanged,
|
||||||
|
setInitialPageLoadTime,
|
||||||
|
startRouterTransition,
|
||||||
|
])
|
||||||
|
|
||||||
return null
|
return null
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,6 +8,12 @@ interface TrackingStoreState {
|
|||||||
initialStartTime: number
|
initialStartTime: number
|
||||||
setInitialPageLoadTime: (time: number) => void
|
setInitialPageLoadTime: (time: number) => void
|
||||||
getPageLoadTime: () => number
|
getPageLoadTime: () => number
|
||||||
|
currentPath: string | null
|
||||||
|
previousPath: string | null
|
||||||
|
currentLang: string | null
|
||||||
|
previousLang: string | null
|
||||||
|
updateRouteInfo: (path: string, lang: string) => void
|
||||||
|
hasPathOrLangChanged: () => boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const useTrackingStore = create<TrackingStoreState>((set, get) => ({
|
const useTrackingStore = create<TrackingStoreState>((set, get) => ({
|
||||||
@@ -19,6 +25,37 @@ const useTrackingStore = create<TrackingStoreState>((set, get) => ({
|
|||||||
const { initialStartTime } = get()
|
const { initialStartTime } = get()
|
||||||
return (Date.now() - initialStartTime) / 1000
|
return (Date.now() - initialStartTime) / 1000
|
||||||
},
|
},
|
||||||
|
currentPath: null,
|
||||||
|
previousPath: null,
|
||||||
|
currentLang: null,
|
||||||
|
previousLang: null,
|
||||||
|
updateRouteInfo: (path, lang) =>
|
||||||
|
set((state) => {
|
||||||
|
if (!path || !lang) return state
|
||||||
|
|
||||||
|
if (!state.currentPath || !state.currentLang) {
|
||||||
|
return {
|
||||||
|
currentPath: path,
|
||||||
|
currentLang: lang,
|
||||||
|
previousPath: null,
|
||||||
|
previousLang: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
previousPath: state.currentPath,
|
||||||
|
previousLang: state.currentLang,
|
||||||
|
currentPath: path,
|
||||||
|
currentLang: lang,
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
hasPathOrLangChanged: () => {
|
||||||
|
const { currentPath, previousPath, currentLang, previousLang } = get()
|
||||||
|
|
||||||
|
if (!previousPath || !previousLang) return false
|
||||||
|
|
||||||
|
return currentPath !== previousPath || currentLang !== previousLang
|
||||||
|
},
|
||||||
}))
|
}))
|
||||||
|
|
||||||
export default useTrackingStore
|
export default useTrackingStore
|
||||||
|
|||||||
Reference in New Issue
Block a user