Tracking payment start event

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,

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 = {

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)