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

2025-01-09 13:19:25 +01:00
parent 14e8e2254c
commit 4bbd02f307
7 changed files with 21 additions and 0 deletions
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx
@@ -18,6 +18,7 @@ export default async function AccessibilityAmenity({
      title={intl.formatMessage({ id: "Accessibility" })}
      icon={IconName.Accessibility}
      variant="sidepeek"
+      trackingId="amenities:accessibility"
    >
      <div className={styles.wrapper}>
        {accessibility?.description && (
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
@@ -16,6 +16,7 @@ export default async function BreakfastAmenity({
      title={intl.formatMessage({ id: "Breakfast" })}
      icon={IconName.CoffeeAlt}
      variant="sidepeek"
+      trackingId="amenities:breakfast"
    >
      <OpeningHours
        openingHours={openingHours}
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/CheckIn/index.tsx
@@ -15,6 +15,7 @@ export default async function CheckInAmenity({
      title={`${intl.formatMessage({ id: "Check-in" })}/${intl.formatMessage({ id: "Check-out" })}`}
      icon={IconName.Business}
      variant="sidepeek"
+      trackingId="amenities:check-in"
    >
      <Body textTransform="bold">{intl.formatMessage({ id: "Times" })}</Body>
      <Body color="uiTextHighContrast">{`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`}</Body>
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
@@ -26,6 +26,7 @@ export default async function ParkingAmenity({
      title={intl.formatMessage({ id: "Parking" })}
      icon={IconName.Parking}
      variant="sidepeek"
+      trackingId="amenities:parking"
    >
      <div className={styles.wrapper}>
        {parking.map((data) => (
--- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
+++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts
@@ -8,4 +8,5 @@ export interface AccordionItemProps
    VariantProps<typeof accordionItemVariants> {
  title: string
  icon?: IconName
+  trackingId?: string
 }
--- a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
+++ b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx
@@ -4,6 +4,7 @@ import { useRef } from "react"

 import { ChevronDownIcon } from "@/components/Icons"
 import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { trackAccordionClick } from "@/utils/tracking"

 import Body from "../../Text/Body"
 import Subtitle from "../../Text/Subtitle"
@@ -20,6 +21,7 @@ export default function AccordionItem({
  theme,
  variant,
  className,
+  trackingId,
 }: AccordionItemProps) {
  const contentRef = useRef<HTMLDivElement>(null)
  const detailsRef = useRef<HTMLDetailsElement>(null)
@@ -40,6 +42,9 @@ export default function AccordionItem({
          },
          { once: true }
        )
+        if (trackingId) {
+          trackAccordionClick(trackingId)
+        }
      } else {
        content.style.maxHeight = "0"
      }
--- a/utils/tracking.ts
+++ b/utils/tracking.ts
@@ -66,6 +66,17 @@ export function trackHotelMapClick() {
  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) {
  const paymentSelectionEvent = {
    event: "paymentSelection",