diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Accessibility/index.tsx index d922114bd..988201e7c 100644 --- 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" >
{accessibility?.description && ( diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx index 8e7c7c479..1cc256461 100644 --- 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" > {intl.formatMessage({ id: "Times" })} {`${intl.formatMessage({ id: "Check in from" })}: ${checkInTime}`} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx index 8f38b0ded..364eee7b8 100644 --- 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" >
{parking.map((data) => ( diff --git a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts index 6e0a4a827..59024169a 100644 --- a/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts +++ b/components/TempDesignSystem/Accordion/AccordionItem/accordionItem.ts @@ -8,4 +8,5 @@ export interface AccordionItemProps VariantProps { title: string icon?: IconName + trackingId?: string } diff --git a/components/TempDesignSystem/Accordion/AccordionItem/index.tsx b/components/TempDesignSystem/Accordion/AccordionItem/index.tsx index 80e64b8ca..20d6768a3 100644 --- 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(null) const detailsRef = useRef(null) @@ -40,6 +42,9 @@ export default function AccordionItem({ }, { once: true } ) + if (trackingId) { + trackAccordionClick(trackingId) + } } else { content.style.maxHeight = "0" } diff --git a/utils/tracking.ts b/utils/tracking.ts index 8b3441e27..ba6f9898e 100644 --- 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",