From 2f39b53f3261d7620fe5fea395acb269e40df0e4 Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Mon, 25 Nov 2024 10:52:01 +0100 Subject: [PATCH] Enter details tracking WIP --- .../(standard)/step/enterDetailsTracking.tsx | 82 +++++++++++++++++++ .../hotelreservation/(standard)/step/page.tsx | 50 +++++++++++ 2 files changed, 132 insertions(+) create mode 100644 app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx 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 ( + + ) }