fix: ad events for tracking navigations and initial page load

components/TempDesignSystem/Link/index.tsx

@@ -1,7 +1,9 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname, useRouter } from "next/navigation"
-import { useCallback, useEffect, useTransition } from "react"
+import { startTransition, useCallback, useEffect } from "react"
+
+import useRouterTransitionStore from "@/stores/router-transition"
 
 import { trackClick, trackPageViewStart } from "@/utils/tracking"
 
@@ -39,9 +41,12 @@ export default function Link({
     variant,
   })
 
-  const [isPending, startTransition] = useTransition()
   const router = useRouter()
 
+  const startRouterTransition = useRouterTransitionStore(
+    (state) => state.startRouterTransition
+  )
+
   const trackClickById = useCallback(() => {
     if (trackingId) {
       trackClick(trackingId)
@@ -59,26 +64,16 @@ export default function Link({
     }
   }, [trackClickById, trackingId])
 
-  useEffect(() => {
-    if (!isPending) {
-      console.log("PENDING IS DONE")
-    }
-  }, [isPending])
-
   return (
     <NextLink
       scroll={scroll}
       prefetch={prefetch}
       className={classNames}
       onClick={() => {
-        trackPageViewStart()
-
         startTransition(() => {
+          trackPageViewStart()
+          startRouterTransition()
           router.push(href)
-          console.log({ isPending })
-          if (!isPending) {
-            console.log("Not pending anymore!")
-          }
         })
       }}
       href={href}

components/TrackingSDK/Client.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useCallback, useEffect } from "react"
+import { useCallback, useEffect, useState } from "react"
 
 import { webviews } from "@/constants/routes/webviews"
 
@@ -16,20 +16,17 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
 
   const { host: domain } = window.location
   const page_obj = {
-    event: "pageView",
-    pageInfo: {
-      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?
-    },
+    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
 }
@@ -37,6 +34,7 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
 export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
   const pathName = usePathname()
   const isWebview = webviews.includes(pathName)
+  const [initPerformanceTracking, setInitPerformanceTracking] = useState(false)
 
   const CookiebotCallbackOnAccept = useCallback(() => {
     const cookie = window._satellite.cookie.get("CookieConsent")
@@ -62,11 +60,55 @@ export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
     }
   }
 
+  useEffect(() => {
+    if (initPerformanceTracking) {
+      const perfObserver = new PerformanceObserver((observedEntries) => {
+        const entry = observedEntries.getEntriesByType("navigation")[0]
+
+        if (entry && window.adobeDataLayer) {
+          const trackingData = { ...pageData, pathName }
+          const pageObject = createSDKPageObject(trackingData)
+
+          const { loadEventEnd, startTime, duration } =
+            entry as PerformanceNavigationTiming
+
+          window.adobeDataLayer.push({
+            event: "pageViewEnd",
+            pageInfo: pageObject,
+            userInfo: userData,
+            timing: {
+              duration,
+              loadEventEnd,
+              startTime,
+            },
+          })
+        }
+      })
+
+      perfObserver.observe({
+        type: "navigation",
+        buffered: true,
+      })
+
+      setInitPerformanceTracking(true)
+
+      // Cleanup function to disconnect the observer
+      return () => {
+        perfObserver.disconnect()
+      }
+    }
+  }, [pathName, pageData, userData, initPerformanceTracking])
+
   useEffect(() => {
     if (window.adobeDataLayer) {
       const trackingData = { ...pageData, pathName }
       const pageObject = createSDKPageObject(trackingData)
-      window.adobeDataLayer.push({ ...pageObject, userInfo: userData })
+
+      window.adobeDataLayer.push({
+        event: "pageView",
+        pageInfo: pageObject,
+        userInfo: userData,
+      })
     }
   }, [pathName, pageData, userData])
 

components/TrackingSDK/RouterTransition.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useEffect, useOptimistic } from "react"
+
+import useRouterTransitionStore from "@/stores/router-transition"
+
+export default function RouterTransition() {
+  const [loading, setLoading] = useOptimistic(false)
+  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
+
+  useEffect(() => {
+    if (!isTransitioning) {
+      return
+    }
+
+    if (isTransitioning) {
+      setLoading(true)
+    }
+
+    if (!loading && isTransitioning) {
+      stopRouterTransition()
+
+      // Send event to adobe that navigation transition is completed
+      if (window.adobeDataLayer) {
+        window.adobeDataLayer.push({
+          event: "pageViewEnd",
+        })
+      }
+    }
+  }, [isTransitioning, setLoading, loading, stopRouterTransition])
+
+  return null
+}

components/TrackingSDK/index.tsx

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import RouterTransition from "@/components/TrackingSDK/RouterTransition"
+
 import TrackingSDKClient from "./Client"
 
 import { TrackingSDKPageData } from "@/types/components/tracking"
@@ -15,5 +17,10 @@ export default async function TrackingSDK({
 }) {
   const userTrackingData = await serverClient().user.tracking()
 
-  return <TrackingSDKClient pageData={pageData} userData={userTrackingData} />
+  return (
+    <>
+      <TrackingSDKClient pageData={pageData} userData={userTrackingData} />
+      <RouterTransition />
+    </>
+  )
 }

stores/router-transition.ts

@@ -0,0 +1,21 @@
+"use client"
+
+import { createWithEqualityFn } from "zustand/traditional"
+
+interface RouterTransitionState {
+  isTransitioning: boolean
+  startRouterTransition: () => void
+  stopRouterTransition: () => void
+}
+
+const useRouterTransitionStore = createWithEqualityFn<RouterTransitionState>(
+  (set) => ({
+    isTransitioning: false,
+    startRouterTransition: () =>
+      set((state) => ({ ...state, isTransitioning: true })),
+    stopRouterTransition: () =>
+      set((state) => ({ ...state, isTransitioning: false })),
+  })
+)
+
+export default useRouterTransitionStore