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"
|
||||
|
||||
import { usePathname, useSearchParams } from "next/navigation"
|
||||
import { startTransition, useEffect, useRef } from "react"
|
||||
import { startTransition, useEffect } from "react"
|
||||
|
||||
import useRouterTransitionStore from "@/stores/router-transition"
|
||||
import useTrackingStore from "@/stores/tracking"
|
||||
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { trackPageViewStart } from "@/utils/tracking"
|
||||
|
||||
export default function RouterTracking() {
|
||||
const pathName = usePathname()
|
||||
const searchParams = useSearchParams()
|
||||
const { setInitialPageLoadTime } = useTrackingStore()
|
||||
const currentLang = useLang()
|
||||
|
||||
const { setInitialPageLoadTime, updateRouteInfo, hasPathOrLangChanged } =
|
||||
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 (!hasRunInitial.current) {
|
||||
hasRunInitial.current = true
|
||||
previousPathname.current = pathName // Set initial path to compare later
|
||||
return
|
||||
}
|
||||
|
||||
if (previousPathname.current !== pathName) {
|
||||
updateRouteInfo(pathName, currentLang)
|
||||
if (hasPathOrLangChanged()) {
|
||||
setInitialPageLoadTime(Date.now())
|
||||
trackPageViewStart()
|
||||
startTransition(() => {
|
||||
startRouterTransition()
|
||||
})
|
||||
}
|
||||
previousPathname.current = pathName // Update for next render
|
||||
}, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
|
||||
}, [
|
||||
pathName,
|
||||
searchParams,
|
||||
currentLang,
|
||||
updateRouteInfo,
|
||||
hasPathOrLangChanged,
|
||||
setInitialPageLoadTime,
|
||||
startRouterTransition,
|
||||
])
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
@@ -8,6 +8,12 @@ interface TrackingStoreState {
|
||||
initialStartTime: number
|
||||
setInitialPageLoadTime: (time: number) => void
|
||||
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) => ({
|
||||
@@ -19,6 +25,37 @@ const useTrackingStore = create<TrackingStoreState>((set, get) => ({
|
||||
const { initialStartTime } = get()
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user