Merged in fix/pageview-tracking (pull request #1687)

Fix/pageview tracking

* Restructure pageview tracking

* Update trpc version and turn off batching

* Remove unused state and remove logs

* cleanup

* remove unused code and console.logs


Approved-by: Linus Flood

apps/scandic-web/components/TrackingSDK/hooks.ts

@@ -0,0 +1,265 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import {
+  startTransition,
+  useEffect,
+  useOptimistic,
+  useRef,
+  useState,
+} from "react"
+
+import { trpc } from "@/lib/trpc/client"
+import useRouterTransitionStore from "@/stores/router-transition"
+import useTrackingStore from "@/stores/tracking"
+
+import { useSessionId } from "@/hooks/useSessionId"
+import { promiseWithTimeout } from "@/utils/promiseWithTimeout"
+import { createSDKPageObject, trackPageView } from "@/utils/tracking"
+
+import type {
+  TrackingSDKProps,
+  TrackingSDKUserData,
+} from "@/types/components/tracking"
+
+enum TransitionStatusEnum {
+  NotRun = "NotRun",
+  Running = "Running",
+  Done = "Done",
+}
+
+type TransitionStatus = keyof typeof TransitionStatusEnum
+
+let hasTrackedHardNavigation = false
+export const useTrackHardNavigation = ({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+}: TrackingSDKProps) => {
+  const {
+    data: userTrackingData,
+    isPending,
+    isError,
+  } = trpc.user.userTrackingInfo.useQuery()
+
+  const sessionId = useSessionId()
+  const pathName = usePathname()
+
+  useEffect(() => {
+    if (isPending) {
+      return
+    }
+
+    const userData: TrackingSDKUserData = isError
+      ? { loginStatus: "Error" }
+      : userTrackingData
+
+    if (hasTrackedHardNavigation) {
+      return
+    }
+
+    hasTrackedHardNavigation = true
+
+    const track = () => {
+      trackPerformance({
+        pathName,
+        sessionId,
+        paymentInfo,
+        hotelInfo,
+        userData,
+        pageData,
+      })
+    }
+
+    if (document.readyState === "complete") {
+      track()
+      return
+    }
+
+    window.addEventListener("load", track)
+    return () => window.removeEventListener("load", track)
+  }, [
+    isError,
+    pathName,
+    hotelInfo,
+    userTrackingData,
+    pageData,
+    sessionId,
+    paymentInfo,
+    isPending,
+  ])
+}
+
+export const useTrackSoftNavigation = ({
+  pageData,
+  hotelInfo,
+  paymentInfo,
+}: TrackingSDKProps) => {
+  const {
+    data: userTrackingData,
+    isPending,
+    isError,
+  } = trpc.user.userTrackingInfo.useQuery()
+
+  const [loading, setLoading] = useOptimistic(false)
+  const [status, setStatus] = useState<TransitionStatus>(
+    TransitionStatusEnum.NotRun
+  )
+  const { getPageLoadTime } = useTrackingStore()
+
+  const sessionId = useSessionId()
+  const pathName = usePathname()
+  const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
+
+  const previousPathname = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (isPending) {
+      return
+    }
+
+    if (isTransitioning && status === TransitionStatusEnum.NotRun) {
+      startTransition(() => {
+        setStatus(TransitionStatusEnum.Running)
+        setLoading(true)
+      })
+      return
+    }
+
+    if (
+      !loading &&
+      isTransitioning &&
+      status === TransitionStatusEnum.Running
+    ) {
+      setStatus(TransitionStatusEnum.Done)
+      stopRouterTransition()
+      return
+    }
+
+    if (!loading && !isTransitioning && status === TransitionStatusEnum.Done) {
+      const pageLoadTime = getPageLoadTime()
+      const trackingData = {
+        ...pageData,
+        sessionId,
+        pathName,
+        pageLoadTime: pageLoadTime,
+      }
+      const pageObject = createSDKPageObject(trackingData)
+      if (previousPathname.current !== pathName) {
+        const userData: TrackingSDKUserData = isError
+          ? { loginStatus: "Error" }
+          : userTrackingData
+
+        trackPageView({
+          event: "pageView",
+          pageInfo: pageObject,
+          userInfo: userData,
+          hotelInfo: hotelInfo,
+          paymentInfo,
+        })
+      }
+      previousPathname.current = pathName // Update for next render
+    }
+  }, [
+    isError,
+    isPending,
+    isTransitioning,
+    loading,
+    status,
+    setLoading,
+    stopRouterTransition,
+    pageData,
+    pathName,
+    hotelInfo,
+    getPageLoadTime,
+    sessionId,
+    paymentInfo,
+    userTrackingData,
+  ])
+}
+
+const trackPerformance = async ({
+  pathName,
+  sessionId,
+  paymentInfo,
+  hotelInfo,
+  userData,
+  pageData,
+}: {
+  pathName: string
+  sessionId: string | null
+  paymentInfo: TrackingSDKProps["paymentInfo"]
+  hotelInfo: TrackingSDKProps["hotelInfo"]
+  userData: TrackingSDKUserData
+  pageData: TrackingSDKProps["pageData"]
+}) => {
+  let pageLoadTime: number | undefined = undefined
+  let lcpTime: number | undefined = undefined
+
+  try {
+    pageLoadTime = await promiseWithTimeout(getPageLoadTimeEntry(), 3000)
+  } catch (error) {
+    console.error("Error obtaining pageLoadTime:", error)
+  }
+
+  try {
+    lcpTime = await promiseWithTimeout(getLCPTimeEntry(), 3000)
+  } catch (error) {
+    console.error("Error obtaining lcpTime:", error)
+  }
+
+  const trackingData = {
+    ...pageData,
+    sessionId,
+    pathName,
+    pageLoadTime,
+    lcpTime,
+  }
+  const pageObject = createSDKPageObject(trackingData)
+
+  trackPageView({
+    event: "pageView",
+    pageInfo: pageObject,
+    userInfo: userData,
+    hotelInfo,
+    paymentInfo,
+  })
+}
+
+const getLCPTimeEntry = () => {
+  return new Promise<number | undefined>((resolve) => {
+    const observer = new PerformanceObserver((entries) => {
+      const lastEntry = entries.getEntries().at(-1)
+      if (lastEntry) {
+        observer.disconnect()
+        resolve(lastEntry.startTime / 1000)
+      }
+    })
+
+    const lcpSupported = PerformanceObserver.supportedEntryTypes?.includes(
+      "largest-contentful-paint"
+    )
+
+    if (lcpSupported) {
+      observer.observe({
+        type: "largest-contentful-paint",
+        buffered: true,
+      })
+    } else {
+      resolve(undefined)
+    }
+  })
+}
+
+const getPageLoadTimeEntry = () => {
+  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 })
+  })
+}