diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx
new file mode 100644
index 000000000..0e515a8cc
--- /dev/null
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx
@@ -0,0 +1,82 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useEffect, useState } from "react"
+
+import { Lang } from "@/constants/languages"
+import { useStepsStore } from "@/stores/steps"
+import useTrackingStore from "@/stores/tracking"
+
+import { createSDKPageObject } from "@/utils/tracking"
+
+import {
+ TrackingChannelEnum,
+ TrackingSDKHotelInfo,
+ TrackingSDKPageData,
+ TrackingSDKUserData,
+} from "@/types/components/tracking"
+
+type Props = {
+ initialHotelsTrackingData: TrackingSDKHotelInfo
+ userTrackingData: TrackingSDKUserData
+ lang: Lang
+}
+
+export default function EnterDetailsTracking(props: Props) {
+ const { initialHotelsTrackingData, userTrackingData, lang } = props
+ const currentStep = useStepsStore((state) => state.currentStep)
+ const { getPageLoadTime, hasRun } = useTrackingStore()
+ const pathName = usePathname()
+
+ const [hotelsTrackingData, setHotelsTrackingData] = useState(
+ initialHotelsTrackingData
+ )
+
+ useEffect(() => {
+ function trackData() {
+ const pageTrackingData: TrackingSDKPageData = {
+ pageId: currentStep,
+ domainLanguage: lang,
+ channel: TrackingChannelEnum["hotelreservation"],
+ pageName: `hotelreservation|${currentStep}`,
+ siteSections: `hotelreservation|${currentStep}`,
+ pageType: currentStep, // TODO: Change to correct
+ }
+
+ const trackingData = {
+ ...pageTrackingData,
+ pathName,
+ pageLoadTime: getPageLoadTime(),
+ }
+ const pageObject = createSDKPageObject(trackingData)
+ console.log("TRACKING: Tracking RouterTransition pageViewEnd", pageObject)
+ console.log(
+ "TRACKING: Tracking RouterTransition userData",
+ userTrackingData
+ )
+ console.log(
+ "TRACKING: Tracking RouterTransition hotelInfo",
+ hotelsTrackingData
+ )
+ window.adobeDataLayer.push({
+ event: "pageViewEnd",
+ pageInfo: pageObject,
+ userInfo: userTrackingData,
+ hotelInfo: hotelsTrackingData,
+ })
+ }
+ if (hasRun) {
+ trackData()
+ }
+ }, [
+ currentStep,
+ getPageLoadTime,
+ hotelsTrackingData,
+ pathName,
+ userTrackingData,
+ hasRun,
+ lang,
+ ])
+
+ return null
+}
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
index 4fbaae7ff..13db81f15 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx
@@ -1,5 +1,6 @@
import "./enterDetailsLayout.css"
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
import { notFound } from "next/navigation"
import {
@@ -8,6 +9,7 @@ import {
getHotelData,
getProfileSafely,
getSelectedRoomAvailability,
+ getUserTracking,
} from "@/lib/trpc/memoizedRequests"
import BedType from "@/components/HotelReservation/EnterDetails/BedType"
@@ -21,10 +23,18 @@ import {
generateChildrenString,
getQueryParamsForEnterDetails,
} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
+import TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import StepsProvider from "@/providers/StepsProvider"
+import EnterDetailsTracking from "./enterDetailsTracking"
+
import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import {
+ TrackingChannelEnum,
+ TrackingSDKHotelInfo,
+ TrackingSDKPageData,
+} from "@/types/components/tracking"
import { StepEnum } from "@/types/enums/step"
import type { LangParams, PageArgs } from "@/types/params"
@@ -88,6 +98,7 @@ export default async function StepPage({
const breakfastPackages = await getBreakfastPackages(breakfastInput)
const user = await getProfileSafely()
const savedCreditCards = await getCreditCardsSafely()
+ const userTrackingData = await getUserTracking()
if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
return notFound()
@@ -120,6 +131,36 @@ export default async function StepPage({
}
: undefined
+ const arrivalDate = new Date(searchParams.fromDate)
+ const departureDate = new Date(searchParams.toDate)
+ const hotelAttributes = hotelData?.data.attributes
+
+ const initialPageTrackingData: TrackingSDKPageData = {
+ pageId: searchParams.step,
+ domainLanguage: lang,
+ channel: TrackingChannelEnum["hotelreservation"],
+ pageName: `hotelreservation|${searchParams.step}`,
+ siteSections: `hotelreservation|${searchParams.step}`,
+ pageType: searchParams.step, // TODO: Change to correct
+ }
+
+ const initialHotelsTrackingData: TrackingSDKHotelInfo = {
+ searchTerm: searchParams.city,
+ arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+ departureDate: format(departureDate, "yyyy-MM-dd"),
+ noOfAdults: adults,
+ noOfChildren: children?.length,
+ //childBedPreference // "adults|adults|extra|adults"
+ noOfRooms: 1, // // TODO: Handle multiple rooms
+ duration: differenceInCalendarDays(departureDate, arrivalDate),
+ leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+ searchType: "hotel",
+ bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+ country: hotelAttributes?.address.country,
+ region: hotelAttributes?.address.city,
+ //lowestRoomPrice:
+ }
+
return (
+
+
)
}