From d626e0f7aee22c44820f3762903ed0310658cdf5 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Mon, 9 Jun 2025 08:49:39 +0000
Subject: [PATCH] Merged in feat/SW-2653-aa-tracking-click-tracking-on-se (pull
 request #2301)

feat: SW-2653 Implemented click tracking on Search btn and lang switch

* feat: SW-2653 Implemented click tracking on Search btn and lang switch


Approved-by: Erik Tiekstra
---
 .../components/Forms/BookingWidget/index.tsx       |  2 ++
 .../LanguageSwitcherContent/index.tsx              |  2 +-
 .../components/LanguageSwitcher/index.tsx          |  8 +++++++-
 .../languageSwitcher/languageSwitcher.ts           |  2 +-
 apps/scandic-web/utils/tracking/booking.ts         | 14 ++++++++++++++
 apps/scandic-web/utils/tracking/navigation.ts      | 10 ++++++++++
 6 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/apps/scandic-web/components/Forms/BookingWidget/index.tsx b/apps/scandic-web/components/Forms/BookingWidget/index.tsx
index c234e8fc1..850800f97 100644
--- a/apps/scandic-web/components/Forms/BookingWidget/index.tsx
+++ b/apps/scandic-web/components/Forms/BookingWidget/index.tsx
@@ -9,6 +9,7 @@ import { REDEMPTION } from "@/constants/booking"
 import { selectHotel, selectRate } from "@/constants/routes/hotelReservation"
 
 import useLang from "@/hooks/useLang"
+import { trackBookingSearchClick } from "@/utils/tracking/booking"
 import { serializeBookingSearchParams } from "@/utils/url"
 
 import FormContent, { BookingWidgetFormContentSkeleton } from "./FormContent"
@@ -37,6 +38,7 @@ export default function Form({ type, onClose }: BookingWidgetFormProps) {
     useFormContext<BookingWidgetSchema>()
 
   function onSubmit(data: BookingWidgetSchema) {
+    trackBookingSearchClick(data.search, data.hotel ? "hotel" : "destination")
     const bookingFlowPage = data.hotel ? selectRate(lang) : selectHotel(lang)
     const bookingWidgetParams = serializeBookingSearchParams({
       rooms: data.rooms,
diff --git a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
index 5c1792e41..b7166c891 100644
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -56,7 +56,7 @@ export default function LanguageSwitcherContent({
                     className={styles.link}
                     href={replaceUrlPart(pathname, url)}
                     rel={env.isLangLive(key) ? undefined : "nofollow"}
-                    onClick={onLanguageSwitch}
+                    onClick={() => onLanguageSwitch(key)}
                     variant="languageSwitcher"
                     keepSearchParams
                   >
diff --git a/apps/scandic-web/components/LanguageSwitcher/index.tsx b/apps/scandic-web/components/LanguageSwitcher/index.tsx
index 3579a5d10..8e6e97357 100644
--- a/apps/scandic-web/components/LanguageSwitcher/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/index.tsx
@@ -15,6 +15,7 @@ import useDropdownStore from "@/stores/main-menu"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
+import { trackLanguageSwitchClick } from "@/utils/tracking/navigation"
 
 import SkeletonShimmer from "../SkeletonShimmer"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
@@ -94,6 +95,11 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
     defaultMessage: "Open language menu",
   })
 
+  function onLanguageSwitch(toLang: string) {
+    trackLanguageSwitchClick(currentLanguage, toLang)
+    toggleDropdown(dropdownType)
+  }
+
   if (isLoading) {
     return <SkeletonShimmer width="12ch" />
   }
@@ -132,7 +138,7 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
           <LanguageSwitcherContainer type={type}>
             <LanguageSwitcherContent
               urls={languagesResponse.urls}
-              onLanguageSwitch={() => toggleDropdown(dropdownType)}
+              onLanguageSwitch={onLanguageSwitch}
             />
           </LanguageSwitcherContainer>
         </FocusLock>
diff --git a/apps/scandic-web/types/components/languageSwitcher/languageSwitcher.ts b/apps/scandic-web/types/components/languageSwitcher/languageSwitcher.ts
index c58b227a8..36aa2f9a3 100644
--- a/apps/scandic-web/types/components/languageSwitcher/languageSwitcher.ts
+++ b/apps/scandic-web/types/components/languageSwitcher/languageSwitcher.ts
@@ -16,7 +16,7 @@ export interface LanguageSwitcherProps {
 
 export interface LanguageSwitcherContentProps {
   urls: LanguageSwitcherData
-  onLanguageSwitch: () => void
+  onLanguageSwitch: (lang: string) => void
 }
 
 export interface LanguageSwitcherContainerProps {
diff --git a/apps/scandic-web/utils/tracking/booking.ts b/apps/scandic-web/utils/tracking/booking.ts
index f649bc0f6..009588212 100644
--- a/apps/scandic-web/utils/tracking/booking.ts
+++ b/apps/scandic-web/utils/tracking/booking.ts
@@ -67,3 +67,17 @@ export function trackBreakfastSelection({
     },
   })
 }
+
+export function trackBookingSearchClick(
+  searchTerm: string,
+  searchType: string
+) {
+  trackEvent({
+    event: "hotelSearchButtonClick",
+    hotelInfo: {
+      searchTerm,
+      searchType,
+      action: "Hotel search",
+    },
+  })
+}
diff --git a/apps/scandic-web/utils/tracking/navigation.ts b/apps/scandic-web/utils/tracking/navigation.ts
index 3691fccb8..edf239ec3 100644
--- a/apps/scandic-web/utils/tracking/navigation.ts
+++ b/apps/scandic-web/utils/tracking/navigation.ts
@@ -30,3 +30,13 @@ export function trackLoginClick(position: TrackingPosition) {
     },
   })
 }
+
+export function trackLanguageSwitchClick(fromLang: string, toLang: string) {
+  trackEvent({
+    event: "languageSelection",
+    language: {
+      fromSelection: fromLang,
+      toSelection: toLang,
+    },
+  })
+}