Merged in feat/trackingsdk-client (pull request #1420)

feat: trackingsdk as client component

* feat: trackingsdk as client component

* Cleanup

* Merge changes from feat/trackingsdk-client

* revert yarn.lock

* Added lcpTime and wait with tracking until we have the values


Approved-by: Joakim Jäderberg

apps/scandic-web/components/TrackingSDK/RouterTransition.tsx

@@ -49,44 +49,65 @@ export default function RouterTransition({
 
   useEffect(() => {
     if (!hasRun && !hasRunInitial.current) {
-      const handleLoad = () => {
-        const perfObserver = new PerformanceObserver((observedEntries) => {
-          const entry = observedEntries.getEntriesByType("navigation")[0]
-
-          if (entry) {
-            const trackingData = {
-              ...pageData,
-              sessionId,
-              pathName,
-              pageLoadTime: entry.duration / 1000,
-            }
-            const pageObject = createSDKPageObject(trackingData)
-            trackPageView({
-              event: "pageView",
-              pageInfo: pageObject,
-              userInfo: userData,
-              hotelInfo: hotelInfo,
-              paymentInfo,
-            })
-            perfObserver.disconnect()
-          }
-        })
-        perfObserver.observe({
-          type: "navigation",
-          buffered: true,
-        })
-      }
-      // If the page is already loaded, execute immediately
-      if (document.readyState === "complete") {
-        handleLoad()
-      } else {
-        // Otherwise wait for the load event
-        window.addEventListener("load", handleLoad)
-        return () => window.removeEventListener("load", handleLoad)
-      }
-
       hasRunInitial.current = true
       setHasRun()
+
+      const getPageLoadTime = () => {
+        return new Promise<number>((resolve) => {
+          const observer = new PerformanceObserver((entries) => {
+            const navEntry = entries.getEntriesByType("navigation")[0]
+            if (navEntry) {
+              observer.disconnect()
+              resolve(navEntry.duration / 1000)
+            }
+          })
+          observer.observe({ type: "navigation", buffered: true })
+        })
+      }
+
+      const getLCPTime = () => {
+        return new Promise<number>((resolve) => {
+          const observer = new PerformanceObserver((entries) => {
+            const lastEntry = entries.getEntries().pop()
+            if (lastEntry) {
+              observer.disconnect()
+              resolve(lastEntry.startTime / 1000)
+            }
+          })
+          observer.observe({ type: "largest-contentful-paint", buffered: true })
+        })
+      }
+
+      const trackPerformance = async () => {
+        const [pageLoadTime, lcpTime] = await Promise.all([
+          getPageLoadTime(),
+          getLCPTime(),
+        ])
+
+        const trackingData = {
+          ...pageData,
+          sessionId,
+          pathName,
+          pageLoadTime,
+          lcpTime,
+        }
+        const pageObject = createSDKPageObject(trackingData)
+
+        trackPageView({
+          event: "pageView",
+          pageInfo: pageObject,
+          userInfo: userData,
+          hotelInfo,
+          paymentInfo,
+        })
+      }
+
+      if (document.readyState === "complete") {
+        trackPerformance()
+      } else {
+        window.addEventListener("load", trackPerformance)
+        return () => window.removeEventListener("load", trackPerformance)
+      }
     }
   }, [
     pathName,