diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index b66c26567..a5fc2a773 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx @@ -31,6 +31,7 @@ import { useAvailablePaymentOptions } from "@/hooks/booking/useAvailablePaymentO import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus" import { usePaymentFailedToast } from "@/hooks/booking/usePaymentFailedToast" import useLang from "@/hooks/useLang" +import { trackPaymentEvent } from "@/utils/tracking" import { bedTypeMap } from "../../SelectRate/RoomSelection/utils" import PriceChangeDialog from "../PriceChangeDialog" @@ -206,6 +207,14 @@ export default function PaymentClient({ const paymentRedirectUrl = `${env.NEXT_PUBLIC_NODE_ENV === "development" ? `http://localhost:${env.NEXT_PUBLIC_PORT}` : ""}/${lang}/hotelreservation/payment-callback` + trackPaymentEvent({ + event: "paymentAttemptStart", + hotelId: hotel, + method: paymentMethod, + isSavedCreditCard: savedCreditCard ? true : false, + smsEnable: data.smsConfirmation, + }) + initiateBooking.mutate({ language: lang, hotelId: hotel, diff --git a/types/components/tracking.ts b/types/components/tracking.ts index 7226da977..dd27cc0bd 100644 --- a/types/components/tracking.ts +++ b/types/components/tracking.ts @@ -105,6 +105,15 @@ export type TrackingSDKData = TrackingSDKPageData & { pathName: string } +export type PaymentEvent = { + event: string + hotelId: string + method: string + isSavedCreditCard: boolean + smsEnable: boolean + errorMessage?: string +} + // Old tracking setup types: // TODO: Remove this when we delete "current site" export type TrackingProps = { diff --git a/utils/tracking.ts b/utils/tracking.ts index 53da7d744..f68692c20 100644 --- a/utils/tracking.ts +++ b/utils/tracking.ts @@ -1,4 +1,8 @@ -import type { TrackingPosition, TrackingSDKData } from "@/types/components/tracking" +import type { + PaymentEvent, + TrackingPosition, + TrackingSDKData, +} from "@/types/components/tracking" export function trackClick(name: string) { pushToDataLayer({ @@ -40,6 +44,23 @@ export function trackUpdatePaymentMethod(hotelId: string, method: string) { pushToDataLayer(paymentSelectionEvent) } +export function trackPaymentEvent(paymentEvent: PaymentEvent) { + const paymentAttempt = { + event: paymentEvent.event, + hotelInfo: { + hotelId: paymentEvent.hotelId, + }, + paymentInfo: { + isSavedCreditCard: paymentEvent.isSavedCreditCard, + status: "attempt", + type: paymentEvent.method, + smsEnable: paymentEvent.smsEnable, + errorMessage: paymentEvent.errorMessage, + }, + } + pushToDataLayer(paymentAttempt) +} + function pushToDataLayer(data: any) { if (typeof window !== "undefined" && window.adobeDataLayer) { console.log("TRACKING: Pushing to datalayer", data)