Merged in fix/SW-2676-tracking-select-hotel (pull request #2165)

Fix/SW-2676 tracking select hotel

* fix(SW-2676): add tracking select hotel

* fix(SW-2676): fix tracking text

* fix(SW-2676): create tracking function


Approved-by: Tobias Johansson

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,
+                    },
+                  })
+                }
               >
                 <Link
                   href={`${selectRate(lang)}?hotel=${operaId}`}

apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -9,6 +9,7 @@ import { useHotelFilterStore } from "@/stores/hotel-filters"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
+import { trackEvent } from "@/utils/tracking/base"
 
 import FilterCheckbox from "./FilterCheckbox"
 
@@ -26,6 +27,31 @@ export default function HotelFilter({ className, filters }: HotelFiltersProps) {
   const toggleFilter = useHotelFilterStore((state) => 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)
     }
 

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,
         "",

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)}
           >
             <div className={styles.dialogContainer}>
               <HotelCardDialog