From cea4e3f3fe17e30c26014fd83e1acebfb425c15b Mon Sep 17 00:00:00 2001 From: Linus Flood Date: Fri, 24 Jan 2025 07:49:00 +0000 Subject: [PATCH] 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 --- .../(standard)/step/enterDetailsTracking.tsx | 4 +-- .../Payment/PaymentCallback/index.tsx | 2 ++ .../EnterDetails/Payment/PaymentClient.tsx | 2 ++ components/TrackingSDK/RouterTransition.tsx | 6 ++-- types/components/tracking.ts | 1 + utils/tracking.ts | 35 +++++++++++-------- 6 files changed, 31 insertions(+), 19 deletions(-) diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx index 278efc742..5f158c37a 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx +++ b/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, diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx index 22b8a5d40..81510f33d 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentCallback/index.tsx +++ b/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", }) } diff --git a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx b/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx index e55931560..385294521 100644 --- a/components/HotelReservation/EnterDetails/Payment/PaymentClient.tsx +++ b/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({ diff --git a/components/TrackingSDK/RouterTransition.tsx b/components/TrackingSDK/RouterTransition.tsx index 265bc5fbe..a47185c87 100644 --- a/components/TrackingSDK/RouterTransition.tsx +++ b/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, diff --git a/types/components/tracking.ts b/types/components/tracking.ts index 29fe50f06..12b7853f9 100644 --- a/types/components/tracking.ts +++ b/types/components/tracking.ts @@ -127,6 +127,7 @@ type BasePaymentEvent = { method?: string isSavedCreditCard?: boolean smsEnable?: boolean + status: "attempt" | "cancelled" | "failed" } export type PaymentAttemptStartEvent = BasePaymentEvent diff --git a/utils/tracking.ts b/utils/tracking.ts index 2bd8b1420..4e227bc6f 100644 --- a/utils/tracking.ts +++ b/utils/tracking.ts @@ -11,7 +11,7 @@ export function trackClick( name: string, additionalParams?: Record ) { - 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) }