scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-392): Added accordion click tracking for hotel amenities

Browse Source
This commit is contained in:
Erik Tiekstra
2025-01-09 13:19:25 +01:00
parent 14e8e2254c
commit 4bbd02f307
7 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
View File

@@ -18,6 +18,7 @@ export default async function AccessibilityAmenity({
title={intl.formatMessage({ id: "Accessibility" })} title={intl.formatMessage({ id: "Accessibility" })}
icon={IconName.Accessibility} icon={IconName.Accessibility}
variant="sidepeek" variant="sidepeek"
trackingId="amenities:accessibility"
> >
<div className={styles.wrapper}> <div className={styles.wrapper}>
{accessibility?.description && ( {accessibility?.description && (

1
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
View File

@@ -16,6 +16,7 @@ export default async function BreakfastAmenity({
title={intl.formatMessage({ id: "Breakfast" })} title={intl.formatMessage({ id: "Breakfast" })}
icon={IconName.CoffeeAlt} icon={IconName.CoffeeAlt}
variant="sidepeek" variant="sidepeek"
trackingId="amenities:breakfast"
> >
<OpeningHours <OpeningHours
openingHours={openingHours} openingHours={openingHours}

1
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
View File

@@ -15,6 +15,7 @@ export default async function CheckInAmenity({
title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`} title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
icon={IconName.Business} icon={IconName.Business}
variant="sidepeek" variant="sidepeek"
trackingId="amenities:check-in"
> >
<Body textTransform="bold">{intl.formatMessage({ id: "Times" })}</Body> <Body textTransform="bold">{intl.formatMessage({ id: "Times" })}</Body>
<Body color="uiTextHighContrast">{`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`}</Body> <Body color="uiTextHighContrast">{`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`}</Body>

1
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
View File

@@ -26,6 +26,7 @@ export default async function ParkingAmenity({
title={intl.formatMessage({ id: "Parking" })} title={intl.formatMessage({ id: "Parking" })}
icon={IconName.Parking} icon={IconName.Parking}
variant="sidepeek" variant="sidepeek"
trackingId="amenities:parking"
> >
<div className={styles.wrapper}> <div className={styles.wrapper}>
{parking.map((data) => ( {parking.map((data) => (

1
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
View File

@@ -8,4 +8,5 @@ export interface AccordionItemProps
VariantProps<typeof accordionItemVariants> { VariantProps<typeof accordionItemVariants> {
title: string title: string
icon?: IconName icon?: IconName
trackingId?: string
} }

5
components/TempDesignSystem/Accordion/AccordionItem/index.tsx
View File

@@ -4,6 +4,7 @@ import { useRef } from "react"
import { ChevronDownIcon } from "@/components/Icons" import { ChevronDownIcon } from "@/components/Icons"
import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
import { trackAccordionClick } from "@/utils/tracking"
import Body from "../../Text/Body" import Body from "../../Text/Body"
import Subtitle from "../../Text/Subtitle" import Subtitle from "../../Text/Subtitle"
@@ -20,6 +21,7 @@ export default function AccordionItem({
theme, theme,
variant, variant,
className, className,
trackingId,
}: AccordionItemProps) { }: AccordionItemProps) {
const contentRef = useRef<HTMLDivElement>(null) const contentRef = useRef<HTMLDivElement>(null)
const detailsRef = useRef<HTMLDetailsElement>(null) const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -40,6 +42,9 @@ export default function AccordionItem({
}, },
{ once: true } { once: true }
) )
if (trackingId) {
trackAccordionClick(trackingId)
}
} else { } else {
content.style.maxHeight = "0" content.style.maxHeight = "0"
} }

11
utils/tracking.ts
View File

@@ -66,6 +66,17 @@ export function trackHotelMapClick() {
pushToDataLayer(event) pushToDataLayer(event)
} }
export function trackAccordionClick(option: string) {
const event = {
event: "accordionClick",
accordion: {
action: "accordion open click",
option,
},
}
pushToDataLayer(event)
}
export function trackUpdatePaymentMethod(hotelId: string, method: string) { export function trackUpdatePaymentMethod(hotelId: string, method: string) {
const paymentSelectionEvent = { const paymentSelectionEvent = {
event: "paymentSelection", event: "paymentSelection",