Merged in fix/tracking-requests (pull request #1208)

Added siteversion to all events and fixed payment status

* Added siteversion to all events and fixed payment status

* Fixed bug


Approved-by: Erik Tiekstra

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef } from "react"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { useSessionId } from "@/hooks/useSessionId"
-import { createSDKPageObject, pushToDataLayer } from "@/utils/tracking"
+import { createSDKPageObject, trackPageView } from "@/utils/tracking"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import {
@@ -156,7 +156,7 @@ export default function EnterDetailsTracking(props: Props) {
 
   useEffect(() => {
     if (previousPathname.current !== pathName) {
-      pushToDataLayer({
+      trackPageView({
         event: "pageView",
         pageInfo: pageObject,
         userInfo: userTrackingData,

components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx

@@ -38,6 +38,7 @@ export default function PaymentCallback({
         trackPaymentEvent({
           event: "paymentCancel",
           hotelId: detailsStorage.booking.hotelId,
+          status: "cancelled",
         })
       }
       if (status === "error") {
@@ -45,6 +46,7 @@ export default function PaymentCallback({
           event: "paymentFail",
           hotelId: detailsStorage.booking.hotelId,
           errorMessage,
+          status: "failed",
         })
       }
 

components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx

@@ -176,6 +176,7 @@ export default function PaymentClient({
         isSavedCreditCard,
         smsEnable,
         errorMessage,
+        status: "failed",
       })
     },
     [intl, methods, savedCreditCards, hotelId]
@@ -230,6 +231,7 @@ export default function PaymentClient({
         method: paymentMethod,
         isSavedCreditCard: !!savedCreditCard,
         smsEnable: data.smsConfirmation,
+        status: "attempt",
       })
 
       initiateBooking.mutate({

components/TrackingSDK/RouterTransition.tsx

@@ -13,7 +13,7 @@ import useRouterTransitionStore from "@/stores/router-transition"
 import useTrackingStore from "@/stores/tracking"
 
 import { useSessionId } from "@/hooks/useSessionId"
-import { createSDKPageObject, pushToDataLayer } from "@/utils/tracking"
+import { createSDKPageObject, trackPageView } from "@/utils/tracking"
 
 import type { TrackingSDKProps } from "@/types/components/tracking"
 
@@ -59,7 +59,7 @@ export default function RouterTransition({
             pageLoadTime: entry.duration / 1000,
           }
           const pageObject = createSDKPageObject(trackingData)
-          pushToDataLayer({
+          trackPageView({
             event: "pageView",
             pageInfo: pageObject,
             userInfo: userData,
@@ -115,7 +115,7 @@ export default function RouterTransition({
         }
         const pageObject = createSDKPageObject(trackingData)
         if (previousPathname.current !== pathName) {
-          pushToDataLayer({
+          trackPageView({
             event: "pageView",
             pageInfo: pageObject,
             userInfo: userData,

types/components/tracking.ts

@@ -127,6 +127,7 @@ type BasePaymentEvent = {
   method?: string
   isSavedCreditCard?: boolean
   smsEnable?: boolean
+  status: "attempt" | "cancelled" | "failed"
 }
 
 export type PaymentAttemptStartEvent = BasePaymentEvent

utils/tracking.ts

@@ -11,7 +11,7 @@ export function trackClick(
   name: string,
   additionalParams?: Record<string, string>
 ) {
-  pushToDataLayer({
+  trackEvent({
     event: "linkClick",
     cta: {
       ...additionalParams,
@@ -21,7 +21,7 @@ export function trackClick(
 }
 
 export function trackPageViewStart() {
-  pushToDataLayer({
+  trackEvent({
     event: "pageViewStart",
   })
 }
@@ -35,7 +35,7 @@ export function trackLoginClick(position: TrackingPosition) {
       ctaName: "login",
     },
   }
-  pushToDataLayer(event)
+  trackEvent(event)
 }
 
 export function trackSocialMediaClick(socialMediaName: string) {
@@ -45,7 +45,7 @@ export function trackSocialMediaClick(socialMediaName: string) {
       socialIconClicked: socialMediaName,
     },
   }
-  pushToDataLayer(event)
+  trackEvent(event)
 }
 
 export function trackFooterClick(group: string, name: string) {
@@ -55,7 +55,7 @@ export function trackFooterClick(group: string, name: string) {
       footerLinkClicked: `${group}:${name}`,
     },
   }
-  pushToDataLayer(event)
+  trackEvent(event)
 }
 
 export function trackHotelMapClick() {
@@ -65,7 +65,7 @@ export function trackHotelMapClick() {
       action: "map click - open/explore mearby",
     },
   }
-  pushToDataLayer(event)
+  trackEvent(event)
 }
 
 export function trackAccordionClick(option: string) {
@@ -76,11 +76,11 @@ export function trackAccordionClick(option: string) {
       option,
     },
   }
-  pushToDataLayer(event)
+  trackEvent(event)
 }
 
 export function trackHotelTabClick(name: string) {
-  pushToDataLayer({
+  trackEvent({
     event: "linkClick",
     link: {
       action: "hotel menu click",
@@ -99,7 +99,7 @@ export function trackUpdatePaymentMethod(hotelId: string, method: string) {
       name: method,
     },
   }
-  pushToDataLayer(paymentSelectionEvent)
+  trackEvent(paymentSelectionEvent)
 }
 
 export function trackOpenSidePeekEvent(
@@ -119,7 +119,7 @@ export function trackOpenSidePeekEvent(
       pathName,
     },
   }
-  pushToDataLayer(openSidePeekEvent)
+  trackEvent(openSidePeekEvent)
 }
 
 export function trackPaymentEvent(paymentEvent: PaymentEvent) {
@@ -130,7 +130,7 @@ export function trackPaymentEvent(paymentEvent: PaymentEvent) {
     },
     paymentInfo: {
       isSavedCreditCard: paymentEvent.isSavedCreditCard,
-      status: "attempt",
+      status: paymentEvent.status,
       type: paymentEvent.method,
       smsEnable: paymentEvent.smsEnable,
       errorMessage: isPaymentFailEvent(paymentEvent)
@@ -138,7 +138,7 @@ export function trackPaymentEvent(paymentEvent: PaymentEvent) {
         : undefined,
     },
   }
-  pushToDataLayer(paymentAttempt)
+  trackEvent(paymentAttempt)
 }
 
 export function trackLowestRoomPrice(event: LowestRoomPriceEvent) {
@@ -154,10 +154,17 @@ export function trackLowestRoomPrice(event: LowestRoomPriceEvent) {
       currency: event.currency,
     },
   }
-  pushToDataLayer(lowestRoomPrice)
+  trackEvent(lowestRoomPrice)
 }
 
-export function pushToDataLayer(data: any) {
+function trackEvent(data: any) {
+  if (typeof window !== "undefined" && window.adobeDataLayer) {
+    data = { ...data, siteVersion: "new-web" }
+    window.adobeDataLayer.push(data)
+  }
+}
+
+export function trackPageView(data: any) {
   if (typeof window !== "undefined" && window.adobeDataLayer) {
     window.adobeDataLayer.push(data)
   }