fix: track navigation transitions

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) {
-      return
-    }
-
-    if (isTransitioning) {
+    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
       startTransition(() => {
+        setStatus(TransitionStatusEnum.Running)
         setLoading(true)
       })
-    }
-
-    if (!loading && isTransitioning) {
+    } else if (
+      !loading &&
+      isTransitioning &&
+      status === TransitionStatusEnum.Running
+    ) {
+      setStatus(TransitionStatusEnum.Done)
       stopRouterTransition()
-
-      // Send event to adobe that navigation transition is completed
+    } else if (
+      !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
 }