Files
web/utils/tracking.ts
Linus Flood 7db6c54beb Merged in fix/tracking-pageloadtime-fix (pull request #1247)
fix: using already created performance instead of creating a new one. Also payment tracking fix

* fix: using already created performance instead of creating a new one. Also payment tracking fix


Approved-by: Joakim Jäderberg
2025-02-04 09:46:58 +00:00

200 lines
4.3 KiB
TypeScript

import type { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
import type {
LowestRoomPriceEvent,
PaymentEvent,
PaymentFailEvent,
TrackingPosition,
TrackingSDKData,
} from "@/types/components/tracking"
export function trackClick(
name: string,
additionalParams?: Record<string, string>
) {
trackEvent({
event: "linkClick",
cta: {
...additionalParams,
name,
},
})
}
export function trackPageViewStart() {
trackEvent({
event: "pageViewStart",
})
}
export function trackLoginClick(position: TrackingPosition) {
const event = {
event: "loginStart",
login: {
position,
action: "login start",
ctaName: "login",
},
}
trackEvent(event)
}
export function trackSocialMediaClick(socialMediaName: string) {
const event = {
event: "social media",
social: {
socialIconClicked: socialMediaName,
},
}
trackEvent(event)
}
export function trackFooterClick(group: string, name: string) {
const event = {
event: "footer link",
footer: {
footerLinkClicked: `${group}:${name}`,
},
}
trackEvent(event)
}
export function trackHotelMapClick() {
const event = {
event: "map click",
map: {
action: "map click - open/explore mearby",
},
}
trackEvent(event)
}
export function trackAccordionClick(option: string) {
const event = {
event: "accordionClick",
accordion: {
action: "accordion open click",
option,
},
}
trackEvent(event)
}
export function trackHotelTabClick(name: string) {
trackEvent({
event: "linkClick",
link: {
action: "hotel menu click",
option: `hotel menu:${name}`,
},
})
}
export function trackUpdatePaymentMethod(hotelId: string, method: string) {
const paymentSelectionEvent = {
event: "paymentSelection",
hotelInfo: {
hotelId: hotelId,
},
cta: {
name: method,
},
}
trackEvent(paymentSelectionEvent)
}
export function trackOpenSidePeekEvent(
sidePeek: SidePeekEnum | null,
hotelId: string,
pathName: string,
roomTypeCode?: string | null
) {
const openSidePeekEvent = {
event: "openSidePeek",
hotelInfo: {
hotelId: hotelId,
},
cta: {
name: sidePeek,
roomTypeCode,
pathName,
},
}
trackEvent(openSidePeekEvent)
}
export function trackPaymentEvent(paymentEvent: PaymentEvent) {
const paymentAttempt = {
event: paymentEvent.event,
hotelInfo: {
hotelId: paymentEvent.hotelId,
},
paymentInfo: {
isSavedCard: paymentEvent.isSavedCreditCard,
status: paymentEvent.status,
type: paymentEvent.method,
smsEnable: paymentEvent.smsEnable,
errorMessage: isPaymentFailEvent(paymentEvent)
? paymentEvent.errorMessage
: undefined,
},
}
trackEvent(paymentAttempt)
}
export function trackLowestRoomPrice(event: LowestRoomPriceEvent) {
const lowestRoomPrice = {
event: "lowestRoomPrice",
hotelInfo: {
hotelId: event.hotelId,
arrivalDate: event.arrivalDate,
departureDate: event.departureDate,
},
viewItemInfo: {
lowestPrice: event.lowestPrice,
currency: event.currency,
},
}
trackEvent(lowestRoomPrice)
}
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)
}
}
export function createSDKPageObject(
trackingData: TrackingSDKData
): TrackingSDKData {
let pageName = convertSlashToPipe(trackingData.pageName)
let siteSections = convertSlashToPipe(trackingData.siteSections)
if (trackingData.pathName.indexOf("/webview/") > -1) {
pageName = "webview|" + pageName
siteSections = "webview|" + siteSections
}
return {
...trackingData,
domain: typeof window !== "undefined" ? window.location.host : "",
pageName: pageName,
siteSections: siteSections,
}
}
function convertSlashToPipe(url: string) {
const formattedUrl = url.startsWith("/") ? url.slice(1) : url
return formattedUrl.replaceAll("/", "|")
}
function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent {
return "errorMessage" in event
}