From b9111511b75544b6dff86a51356fd5bf9173ae6c Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Tue, 3 Dec 2024 11:46:43 +0100 Subject: [PATCH] Track sessionId --- .../(standard)/step/enterDetailsTracking.tsx | 5 +++- components/TrackingSDK/RouterTransition.tsx | 7 ++++- components/TrackingSDK/index.tsx | 1 - hooks/useSessionId.ts | 17 +++++++++++ package-lock.json | 30 ++++++++++++++++--- package.json | 1 + types/components/tracking.ts | 1 + 7 files changed, 55 insertions(+), 7 deletions(-) create mode 100644 hooks/useSessionId.ts diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx index f1cadee52..27587f370 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx +++ b/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 diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index c16e47d6e..a51e60a49 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/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 diff --git a/components/TrackingSDK/index.tsx b/components/TrackingSDK/index.tsx index bfd2abb58..98406edea 100644 --- a/components/TrackingSDK/index.tsx +++ b/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" diff --git a/hooks/useSessionId.ts b/hooks/useSessionId.ts new file mode 100644 index 000000000..3a14a5027 --- /dev/null +++ b/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 +} diff --git a/package-lock.json b/package-lock.json index b4509615e..545ed43af 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.3.tgz", + "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": { diff --git a/package.json b/package.json index efb824197..12372050e 100644 --- a/package.json +++ b/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" }, diff --git a/types/components/tracking.ts b/types/components/tracking.ts index bf048198e..a4c9e30d5 100644 --- a/types/components/tracking.ts +++ b/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 {