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

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,

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
                   >

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>

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 {

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",
+    },
+  })
+}

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,
+    },
+  })
+}