Refactor

components/CookieBot/index.tsx

@@ -1,24 +1,13 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect } 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) {
+export default function CookieBot() {
   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")
 
@@ -43,38 +32,6 @@ export default function TrackingSDK({
     }
   }
 
-  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)

components/Current/GTMScript.tsx

@@ -0,0 +1,21 @@
+export default function GTMScript() {
+  return (
+    <script
+      data-cookieconsent="statistics"
+      dangerouslySetInnerHTML={{
+        __html: `
+        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':​
+
+        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],​
+        
+        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=​
+        
+        'https://analytics.scandichotels.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);​
+        
+        })(window,document,'script','adobeDataLayer','GTM-KNJCW67W');
+        `,
+      }}
+      async
+    />
+  )
+}

components/TempDesignSystem/Link/index.tsx

@@ -3,10 +3,7 @@ import NextLink from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { startTransition, useCallback } from "react"
 
-import useRouterTransitionStore from "@/stores/router-transition"
-import useTrackingStore from "@/stores/tracking"
-
-import { trackClick, trackPageViewStart } from "@/utils/tracking"
+import { trackClick } from "@/utils/tracking"
 
 import { linkVariants } from "./variants"
 
@@ -28,7 +25,6 @@ export default function Link({
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
-  const { setInitialPageLoadTime } = useTrackingStore()
   let isActive = active || currentPageSlug === href
 
   if (partialMatch && !isActive) {
@@ -46,10 +42,6 @@ export default function Link({
 
   const router = useRouter()
 
-  const startRouterTransition = useRouterTransitionStore(
-    (state) => state.startRouterTransition
-  )
-
   const trackClickById = useCallback(() => {
     if (trackingId) {
       trackClick(trackingId)
@@ -74,10 +66,7 @@ export default function Link({
           return
         }
         e.preventDefault()
-        setInitialPageLoadTime(Date.now())
-        trackPageViewStart()
         startTransition(() => {
-          startRouterTransition()
           router.push(href, { scroll })
         })
       }}

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}
+    />
   )
 }