Refactor

components/TrackingSDK/Client.tsx

@@ -1,93 +0,0 @@
-"use client"
-
-import { usePathname } from "next/navigation"
-import { useCallback, useEffect, useRef } from "react"
-
-import { webviews } from "@/constants/routes/webviews"
-import useTrackingStore from "@/stores/tracking"
-
-import { createSDKPageObject } from "@/utils/tracking"
-
-import { TrackingSDKProps } from "@/types/components/tracking"
-
-export default function TrackingSDK({
-  pageData,
-  userData,
-  hotelInfo,
-}: TrackingSDKProps) {
-  const pathName = usePathname()
-  const isWebview = webviews.includes(pathName)
-  const { hasRun, setHasRun, getPageLoadTime } = useTrackingStore()
-  const hasRunLocal = useRef<boolean>(false)
-  const CookiebotCallbackOnAccept = useCallback(() => {
-    const cookie = window._satellite.cookie.get("CookieConsent")
-
-    if (window.Cookiebot?.changed && window.adobe) {
-      // For webviews we always set the consent to true since we don't have cookiebot.
-      if (isWebview) {
-        window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
-      } else if (cookie?.includes("statistics:true")) {
-        window.adobe.optIn.approve(window.adobe.OptInCategories.ANALYTICS, true)
-      } else {
-        window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
-      }
-      window.adobe.optIn.complete()
-      console.warn("window.load event explicitly dispatched.")
-      window.dispatchEvent(new Event("load"))
-    }
-  }, [isWebview])
-
-  function CookebotCallbackOnDecline() {
-    if (window.Cookiebot?.changed && window.adobe) {
-      window.adobe.optIn.deny(window.adobe.OptInCategories.ANALYTICS, true)
-    }
-  }
-
-  useEffect(() => {
-    if (!hasRun && !hasRunLocal.current) {
-      hasRunLocal.current = true
-      setHasRun()
-
-      if (window.adobeDataLayer) {
-        const trackingData = {
-          ...pageData,
-          pathName,
-          pageLoadTime: getPageLoadTime(),
-        }
-
-        const pageObject = createSDKPageObject(trackingData)
-        console.log("TRACKING: Tracking pageView", pageObject, userData)
-        window.adobeDataLayer.push({
-          event: "pageView",
-          pageInfo: pageObject,
-          userInfo: userData,
-          hotelInfo: hotelInfo,
-        })
-      }
-    }
-  }, [
-    pathName,
-    pageData,
-    userData,
-    hasRun,
-    setHasRun,
-    hotelInfo,
-    getPageLoadTime,
-  ])
-
-  useEffect(() => {
-    // handle consent
-    window.addEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
-    window.addEventListener("CookiebotOnDecline", CookebotCallbackOnDecline)
-
-    return () => {
-      window.removeEventListener("CookiebotOnAccept", CookiebotCallbackOnAccept)
-      window.removeEventListener(
-        "CookiebotOnDecline",
-        CookebotCallbackOnDecline
-      )
-    }
-  }, [CookiebotCallbackOnAccept])
-
-  return null
-}

components/TrackingSDK/RouterTracking.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { usePathname, useSearchParams } from "next/navigation"
+import { startTransition, useEffect } from "react"
+
+import useRouterTransitionStore from "@/stores/router-transition"
+import useTrackingStore from "@/stores/tracking"
+
+import { trackPageViewStart } from "@/utils/tracking"
+
+export default function RouterTracking({ children }: React.PropsWithChildren) {
+  const pathName = usePathname()
+  const searchParams = useSearchParams()
+  const { setInitialPageLoadTime } = useTrackingStore()
+
+  const { startRouterTransition } = useRouterTransitionStore()
+
+  useEffect(() => {
+    setInitialPageLoadTime(Date.now())
+    trackPageViewStart()
+    startTransition(() => {
+      startRouterTransition()
+    })
+  }, [pathName, searchParams, setInitialPageLoadTime, startRouterTransition])
+
+  return <>{children}</>
+}

components/TrackingSDK/RouterTransition.tsx

@@ -6,7 +6,7 @@ import { startTransition, useEffect, useOptimistic, useState } from "react"
 import useRouterTransitionStore from "@/stores/router-transition"
 import useTrackingStore from "@/stores/tracking"
 
-import { createSDKPageObject, trackPageViewStart } from "@/utils/tracking"
+import { createSDKPageObject } from "@/utils/tracking"
 
 import { TrackingSDKProps } from "@/types/components/tracking"
 
@@ -32,17 +32,6 @@ export default function RouterTransition({
   const pathName = usePathname()
   const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
 
-  // useEffect(() => {
-  //   const handleStart = () => {
-  //     trackPageViewStart()
-  //     setInitialPageLoadTime(Date.now())
-  //   }
-
-  //   return () => {
-  //     handleStart()
-  //   }
-  // }, [pathName])
-
   useEffect(() => {
     if (isTransitioning && status === TransitionStatusEnum.NotRun) {
       startTransition(() => {

components/TrackingSDK/index.tsx

@@ -2,8 +2,6 @@ import { serverClient } from "@/lib/trpc/server"
 
 import RouterTransition from "@/components/TrackingSDK/RouterTransition"
 
-import TrackingSDKClient from "./Client"
-
 import {
   TrackingSDKHotelInfo,
   TrackingSDKPageData,
@@ -23,17 +21,10 @@ export default async function TrackingSDK({
   const userTrackingData = await serverClient().user.tracking()
 
   return (
-    <>
-      <TrackingSDKClient
-        pageData={pageData}
-        userData={userTrackingData}
-        hotelInfo={hotelInfo}
-      />
-      <RouterTransition
-        pageData={pageData}
-        userData={userTrackingData}
-        hotelInfo={hotelInfo}
-      />
-    </>
+    <RouterTransition
+      pageData={pageData}
+      userData={userTrackingData}
+      hotelInfo={hotelInfo}
+    />
   )
 }