fix: ad events for tracking navigations and initial page load

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])