Merged in feat/SW-1472-destination-tracking (pull request #1474)

Feat/SW-1472 destination tracking

* feat(SW-1472): Added default tracking for destination overview page

* feat(SW-1472): Added default tracking for destination country/city page

* feat(SW-1472): moved tracking functions to different files for better overview

* feat(SW-1472): added destination page tracking


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx

@@ -7,7 +7,6 @@ import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
 import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import TrackingSDK from "@/components/TrackingSDK"
 
 import ExperienceList from "../ExperienceList"
 import HotelDataContainer, { preload } from "../HotelDataContainer"
@@ -16,6 +15,7 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
 import StaticMap from "../StaticMap"
 import TopImages from "../TopImages"
+import DestinationTracking from "../Tracking"
 import CityMap from "./CityMap"
 import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton"
 
@@ -65,6 +65,7 @@ export default async function DestinationCityPage() {
                   <DestinationPageSidePeek
                     buttonText={sidepeek_button_text}
                     sidePeekContent={sidepeek_content}
+                    location={city.name}
                   />
                 )}
 
@@ -85,7 +86,7 @@ export default async function DestinationCityPage() {
           />
         </HotelDataContainer>
       </Suspense>
-      <TrackingSDK pageData={tracking} />
+      <DestinationTracking pageData={tracking} />
     </>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx

@@ -7,7 +7,6 @@ import Blocks from "@/components/Blocks"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import TrackingSDK from "@/components/TrackingSDK"
 
 import CityDataContainer, { preload } from "../CityDataContainer"
 import CityListing from "../CityListing"
@@ -16,6 +15,7 @@ import SidebarContentWrapper from "../SidebarContentWrapper"
 import DestinationPageSidePeek from "../Sidepeek"
 import StaticMap from "../StaticMap"
 import TopImages from "../TopImages"
+import DestinationTracking from "../Tracking"
 import CountryMap from "./CountryMap"
 import DestinationCountryPageSkeleton from "./DestinationCountryPageSkeleton"
 
@@ -69,6 +69,7 @@ export default async function DestinationCountryPage() {
                   <DestinationPageSidePeek
                     buttonText={sidepeek_button_text}
                     sidePeekContent={sidepeek_content}
+                    location={translatedCountry}
                   />
                 )}
                 <StaticMap
@@ -86,7 +87,7 @@ export default async function DestinationCountryPage() {
           />
         </CityDataContainer>
       </Suspense>
-      <TrackingSDK pageData={tracking} />
+      <DestinationTracking pageData={tracking} />
     </>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/index.tsx

@@ -8,6 +8,8 @@ import { useCallback } from "react"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
+import { trackMapClick } from "@/utils/tracking/destinationPage"
+
 import styles from "./clusterMarker.module.css"
 
 interface ClusterMarkerProps {
@@ -34,7 +36,8 @@ export default function ClusterMarker({
     if (onMarkerClick) {
       onMarkerClick(position)
     }
-  }, [onMarkerClick, position])
+    trackMapClick(`cluster with hotelIds: ${hotelIds.join(",")}`)
+  }, [onMarkerClick, position, hotelIds])
 
   return (
     <AdvancedMarker

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx

@@ -10,6 +10,7 @@ import { useCallback } from "react"
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import HotelMarkerByType from "@/components/Maps/Markers"
+import { trackMapClick } from "@/utils/tracking/destinationPage"
 
 import HotelMapCard from "../../../HotelMapCard"
 
@@ -28,6 +29,7 @@ export default function Marker({ position, properties }: MarkerProps) {
 
   const handleClick = useCallback(() => {
     setClickedHotel(properties.id)
+    trackMapClick(properties.name)
   }, [setClickedHotel, properties])
 
   function handleCloseCard() {

apps/scandic-web/components/ContentType/DestinationPage/Sidepeek/index.tsx

@@ -6,6 +6,7 @@ import { ChevronRightSmallIcon } from "@/components/Icons"
 import JsonToHtml from "@/components/JsonToHtml"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
+import { trackOpenSidePeekOnDestinationPagesEvent } from "@/utils/tracking/destinationPage"
 
 import type { DestinationCityPageData } from "@/types/trpc/routers/contentstack/destinationCityPage"
 import type { DestinationCountryPageData } from "@/types/trpc/routers/contentstack/destinationCountryPage"
@@ -16,18 +17,25 @@ interface DestinationPageSidepeekProps {
     | DestinationCityPageData["sidepeek_content"]
     | DestinationCountryPageData["sidepeek_content"]
   >
+  location: string
 }
 export default function DestinationPageSidepeek({
   buttonText,
   sidePeekContent,
+  location,
 }: DestinationPageSidepeekProps) {
   const [sidePeekIsOpen, setSidePeekIsOpen] = useState(false)
   const { heading, content } = sidePeekContent
 
+  function handleButtonClick() {
+    setSidePeekIsOpen(true)
+    trackOpenSidePeekOnDestinationPagesEvent(location)
+  }
+
   return (
     <div>
       <Button
-        onPress={() => setSidePeekIsOpen(true)}
+        onPress={handleButtonClick}
         theme="base"
         variant="icon"
         intent="text"
@@ -40,6 +48,7 @@ export default function DestinationPageSidepeek({
       <SidePeek
         title={heading}
         isOpen={sidePeekIsOpen}
+        openInRoot
         handleClose={() => setSidePeekIsOpen(false)}
       >
         <JsonToHtml

apps/scandic-web/components/ContentType/DestinationPage/Tracking/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+
+import TrackingSDK from "@/components/TrackingSDK"
+import { trackOpenMapView } from "@/utils/tracking/destinationPage"
+
+import type { TrackingSDKPageData } from "@/types/components/tracking"
+
+interface DestinationTrackingProps {
+  pageData: TrackingSDKPageData
+}
+
+export default function DestinationTracking({
+  pageData,
+}: DestinationTrackingProps) {
+  const searchParams = useSearchParams()
+  const isMapView = searchParams.get("view") === "map"
+
+  useEffect(() => {
+    if (isMapView) {
+      trackOpenMapView(pageData.pageName, pageData.pageType)
+    }
+  }, [isMapView, pageData.pageName, pageData.pageType])
+
+  return <TrackingSDK pageData={pageData} />
+}