Track sessionId

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -8,6 +8,7 @@ import { RoomConfiguration } from "@/server/routers/hotels/output"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 import useTrackingStore from "@/stores/tracking"
 
+import { useSessionId } from "@/hooks/useSessionId"
 import { createSDKPageObject } from "@/utils/tracking"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
@@ -47,6 +48,7 @@ export default function EnterDetailsTracking(props: Props) {
   } = useEnterDetailsStore((state) => state)
   const { getPageLoadTime, hasRun } = useTrackingStore()
   const pathName = usePathname()
+  const sessionId = useSessionId()
 
   // We need this check to differentiate hard vs soft navigations
   // This is not because of StrictMode
@@ -91,12 +93,13 @@ export default function EnterDetailsTracking(props: Props) {
 
     const trackingData = {
       ...pageTrackingData,
+      sessionId,
       pathName,
       pageLoadTime: getPageLoadTime(),
     }
     const pageObject = createSDKPageObject(trackingData)
     return pageObject
-  }, [currentStep, getPageLoadTime, lang, pathName])
+  }, [currentStep, getPageLoadTime, lang, pathName, sessionId])
 
   const hotelDetailsData = useMemo(() => {
     const isMember = true

components/TrackingSDK/RouterTransition.tsx

@@ -12,6 +12,7 @@ import {
 import useRouterTransitionStore from "@/stores/router-transition"
 import useTrackingStore from "@/stores/tracking"
 
+import { useSessionId } from "@/hooks/useSessionId"
 import { createSDKPageObject } from "@/utils/tracking"
 
 import { TrackingSDKProps } from "@/types/components/tracking"
@@ -35,6 +36,7 @@ export default function RouterTransition({
   )
   const { getPageLoadTime, hasRun, setHasRun } = useTrackingStore()
 
+  const sessionId = useSessionId()
   const pathName = usePathname()
   const { isTransitioning, stopRouterTransition } = useRouterTransitionStore()
 
@@ -49,6 +51,7 @@ export default function RouterTransition({
         if (entry) {
           const trackingData = {
             ...pageData,
+            sessionId,
             pathName,
             pageLoadTime: entry.duration / 1000,
           }
@@ -73,7 +76,7 @@ export default function RouterTransition({
       hasRunInitial.current = true
       setHasRun()
     }
-  }, [pathName, hasRun, setHasRun, hotelInfo, userData, pageData])
+  }, [pathName, hasRun, setHasRun, hotelInfo, userData, pageData, sessionId])
 
   useEffect(() => {
     if (isTransitioning && status === TransitionStatusEnum.NotRun) {
@@ -96,6 +99,7 @@ export default function RouterTransition({
       if (window.adobeDataLayer && hasRun && !hasRunInitial.current) {
         const trackingData = {
           ...pageData,
+          sessionId,
           pathName,
           pageLoadTime: getPageLoadTime(),
         }
@@ -126,6 +130,7 @@ export default function RouterTransition({
     hotelInfo,
     getPageLoadTime,
     hasRun,
+    sessionId,
   ])
 
   return null

components/TrackingSDK/index.tsx

@@ -1,5 +1,4 @@
 import { getUserTracking } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
 
 import RouterTransition from "@/components/TrackingSDK/RouterTransition"
 

hooks/useSessionId.ts

@@ -0,0 +1,17 @@
+import { useMemo } from "react"
+import { v4 as uuidv4 } from "uuid"
+
+const storageKey = "sessionId"
+
+export function useSessionId(): string {
+  const sessionId = useMemo(() => {
+    let currentSessionId = sessionStorage.getItem(storageKey)
+    if (!currentSessionId) {
+      currentSessionId = uuidv4()
+      sessionStorage.setItem(storageKey, currentSessionId)
+    }
+    return currentSessionId
+  }, [])
+
+  return sessionId
+}

package-lock.json

@@ -57,6 +57,7 @@
         "sonner": "^1.7.0",
         "superjson": "^2.2.1",
         "usehooks-ts": "3.1.0",
+        "uuid": "^11.0.3",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
       },
@@ -2518,6 +2519,14 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/@contentstack/live-preview-utils/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -2569,6 +2578,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@cypress/xvfb": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@cypress/xvfb/-/xvfb-1.2.4.tgz",
@@ -19757,11 +19775,15 @@
       "dev": true
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
+      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "integrity": "sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
-        "uuid": "dist/bin/uuid"
+        "uuid": "dist/esm/bin/uuid"
       }
     },
     "node_modules/v8-compile-cache-lib": {

package.json

@@ -72,6 +72,7 @@
     "sonner": "^1.7.0",
     "superjson": "^2.2.1",
     "usehooks-ts": "3.1.0",
+    "uuid": "^11.0.3",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },

types/components/tracking.ts

@@ -23,6 +23,7 @@ export type TrackingSDKPageData = {
   domain?: string
   siteSections: string
   pageLoadTime?: number // Page load time in seconds
+  sessionId?: string
 }
 
 export enum LoginTypeEnum {