diff --git a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx index 0dcdc5a8a..f04beed41 100644 --- a/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx +++ b/apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx @@ -12,6 +12,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import Footnote from "@/components/TempDesignSystem/Text/Footnote" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { isValidClientSession } from "@/utils/clientSession" +import { trackEvent } from "@/utils/tracking/base" import HotelPointsRow from "../../HotelCard/HotelPointsRow" import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard" @@ -217,6 +218,17 @@ export default function StandaloneHotelCardDialog({ theme="base" size="small" className={styles.button} + onClick={() => + trackEvent({ + event: "hotelClickMap", + map: { + action: "hotel click - map", + }, + hotelInfo: { + hotelId: operaId, + }, + }) + } > state.toggleFilter) useInitializeFiltersFromUrl() const activeFilters = useHotelFilterStore((state) => state.activeFilters) + const facilityMap = new Map( + filters.facilityFilters.map((f) => [f.id.toString(), f.name]) + ) + const surroundingsMap = new Map( + filters.surroundingsFilters.map((f) => [f.id.toString(), f.name]) + ) + + function trackFiltersEvent() { + const hotelFacilitiesFilter = activeFilters + .filter((id) => facilityMap.has(id)) + .map((id) => facilityMap.get(id)) + .join(",") + + const hotelSurroundingsFilter = activeFilters + .filter((id) => surroundingsMap.has(id)) + .map((id) => surroundingsMap.get(id)) + .join(",") + + trackEvent({ + event: "filterUsed", + filter: { + filtersUsed: `Filters values - hotelfacilities:${hotelFacilitiesFilter}|hotelsurroundings:${hotelSurroundingsFilter}`, + }, + }) + } // Update the URL when the filters changes useEffect(() => { @@ -35,6 +61,7 @@ export default function HotelFilter({ className, filters }: HotelFiltersProps) { if (values === "") { newSearchParams.delete("filters") } else { + trackFiltersEvent() newSearchParams.set("filters", values) } diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx index 95e1c4822..ab81ddb37 100644 --- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx +++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx @@ -5,6 +5,7 @@ import { useCallback } from "react" import { useIntl } from "react-intl" import Select from "@/components/TempDesignSystem/Select" +import { trackEvent } from "@/utils/tracking/base" import { type HotelSorterProps, @@ -28,7 +29,12 @@ export default function HotelSorter({ discreet }: HotelSorterProps) { const newSearchParams = new URLSearchParams(searchParams) newSearchParams.set("sort", newSort) - + trackEvent({ + event: "sortOptionClick", + filter: { + sortOptions: newSort, + }, + }) window.history.replaceState( null, "", diff --git a/apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx b/apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx index 0dc6808c9..e87be81dc 100644 --- a/apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx +++ b/apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx @@ -7,6 +7,7 @@ import { useCallback } from "react" import { useHotelsMapStore } from "@/stores/hotels-map" import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog" +import { trackEvent } from "@/utils/tracking/base" import HotelPin from "./HotelPin" @@ -19,12 +20,20 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) { useHotelsMapStore() const toggleActiveHotelPin = useCallback( - (pinName: string | null) => { + (pinName: string | null, hotelId: string) => { if (activeHotel === pinName || pinName === null) { deactivate() return } - + trackEvent({ + event: "hotelClickMap", + map: { + action: "hotel click - map", + }, + hotelInfo: { + hotelId, + }, + }) activate(pinName) }, [activeHotel, activate, deactivate] @@ -58,7 +67,7 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) { zIndex={isActiveOrHovered ? 2 : 0} onMouseEnter={() => engage(pin.name)} onMouseLeave={() => disengage()} - onClick={() => toggleActiveHotelPin(pin.name)} + onClick={() => toggleActiveHotelPin(pin.name, pin.operaId)} >