fix: track navigation transitions

components/TrackingSDK/Client.tsx

@@ -5,31 +5,9 @@ import { useCallback, useEffect, useState } from "react"
 
 import { webviews } from "@/constants/routes/webviews"
 
-import { TrackingSDKData, TrackingSDKProps } from "@/types/components/tracking"
+import { createSDKPageObject } from "@/utils/tracking"
 
-function createSDKPageObject(trackingData: TrackingSDKData) {
+import { TrackingSDKProps } from "@/types/components/tracking"
-  const [lang, ...segments] = trackingData.pathName
-    .split("/")
-    .filter((seg: string) => seg)
-
-  const joinedSegments = segments.join("|")
-
-  const { host: domain } = window.location
-  const page_obj = {
-    pageType: trackingData.pageType,
-    pageName: joinedSegments,
-    pageId: trackingData.pageId,
-    channel: trackingData.channel,
-    siteSection: joinedSegments,
-    domain,
-    siteversion: "new-web",
-    domainlanguage: trackingData.lang ? trackingData.lang : lang,
-    createDate: trackingData.createdDate,
-    publishDate: trackingData.publishedDate,
-    // sessionid: "<unique identifier of session>", // base on what?
-  }
-  return page_obj
-}
 
 export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
   const pathName = usePathname()
@@ -73,14 +51,9 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
             entry as PerformanceNavigationTiming
 
           window.adobeDataLayer.push({
-            event: "pageViewEnd",
+            event: "pageView",
             pageInfo: pageObject,
             userInfo: userData,
-            timing: {
-              duration,
-              loadEventEnd,
-              startTime,
-            },
           })
         }
       })
@@ -99,19 +72,6 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
     }
   }, [pathName, pageData, userData, initPerformanceTracking])
 
-  useEffect(() => {
-    if (window.adobeDataLayer) {
-      const trackingData = { ...pageData, pathName }
-      const pageObject = createSDKPageObject(trackingData)
-
-      window.adobeDataLayer.push({
-        event: "pageView",
-        pageInfo: pageObject,
-        userInfo: userData,
-      })
-    }
-  }, [pathName, pageData, userData])
-
   useEffect(() => {
     // handle consent
     window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)

components/TrackingSDK/RouterTransition.tsx

@@ -1,35 +1,73 @@
 "use client"
 
-import { startTransition, useEffect, useOptimistic } from "react"
+import { usePathname } from "next/navigation"
+import { startTransition, useEffect, useOptimistic, useState } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
 
-export default function RouterTransition() {
+import { createSDKPageObject } from "@/utils/tracking"
+
+import { TrackingSDKProps } from "@/types/components/tracking"
+
+enum TransitionStatusEnum {
+  NotRun = "NotRun",
+  Running = "Running",
+  Done = "Done",
+}
+
+type TransitionStatus = keyof typeof TransitionStatusEnum
+
+export default function RouterTransition({
+  pageData,
+  userData,
+}: TrackingSDKProps) {
   const [loading, setLoading] = useOptimistic(false)
+  const [status, setStatus] = useState<TransitionStatus>(
+    TransitionStatusEnum.NotRun
+  )
+
+  const pathName = usePathname()
   const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
 
   useEffect(() => {
-    if (!isTransitioning) {
+    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
-      return
-    }
-
-    if (isTransitioning) {
       startTransition(() => {
+        setStatus(TransitionStatusEnum.Running)
         setLoading(true)
       })
-    }
+    } else if (
-
+      !loading &&
-    if (!loading && isTransitioning) {
+      isTransitioning &&
+      status === TransitionStatusEnum.Running
+    ) {
+      setStatus(TransitionStatusEnum.Done)
       stopRouterTransition()
-
+    } else if (
-      // Send event to adobe that navigation transition is completed
+      !loading &&
+      !isTransitioning &&
+      status === TransitionStatusEnum.Done
+    ) {
       if (window.adobeDataLayer) {
+        const trackingData = { ...pageData, pathName }
+        const pageObject = createSDKPageObject(trackingData)
+
         window.adobeDataLayer.push({
           event: "pageViewEnd",
+          pageInfo: pageObject,
+          userInfo: userData,
         })
       }
     }
-  }, [isTransitioning, setLoading, loading, stopRouterTransition])
+  }, [
+    isTransitioning,
+    loading,
+    status,
+    setLoading,
+    stopRouterTransition,
+    pageData,
+    pathName,
+    userData,
+  ])
 
   return null
 }

components/TrackingSDK/index.tsx

@@ -20,7 +20,7 @@ export default async function TrackingSDK({
   return (
     <>
       <TrackingSDKClient pageData={pageData} userData={userTrackingData} />
-      <RouterTransition />
+      <RouterTransition pageData={pageData} userData={userTrackingData} />
     </>
   )
 }

utils/tracking.ts

@@ -1,4 +1,4 @@
-import { TrackingPosition } from "@/types/components/tracking"
+import { TrackingPosition, TrackingSDKData } from "@/types/components/tracking"
 
 export function trackClick(name: string) {
   if (typeof window !== "undefined" && window.adobeDataLayer) {
@@ -32,3 +32,27 @@ export function trackLoginClick(position: TrackingPosition) {
     window.adobeDataLayer.push(loginEvent)
   }
 }
+
+export function createSDKPageObject(trackingData: TrackingSDKData) {
+  const [lang, ...segments] = trackingData.pathName
+    .split("/")
+    .filter((seg: string) => seg)
+
+  const joinedSegments = segments.join("|")
+
+  const { host: domain } = window.location
+  const page_obj = {
+    pageType: trackingData.pageType,
+    pageName: joinedSegments,
+    pageId: trackingData.pageId,
+    channel: trackingData.channel,
+    siteSection: joinedSegments,
+    domain,
+    siteversion: "new-web",
+    domainlanguage: trackingData.lang ? trackingData.lang : lang,
+    createDate: trackingData.createdDate,
+    publishDate: trackingData.publishedDate,
+    // sessionid: "<unique identifier of session>", // base on what?
+  }
+  return page_obj
+}