feat(SW-392): Added tab navigation click tracking

components/ButtonLink/index.tsx

@@ -13,7 +13,7 @@ export default function ButtonLink({
   target,
   trackingId,
   trackingParams,
-  onClick,
+  onClick = () => {},
   ...buttonProps
 }: ButtonLinkProps) {
   return (
@@ -22,9 +22,7 @@ export default function ButtonLink({
         href={href}
         target={target}
         onClick={(e) => {
-          if (onClick) {
-            onClick(e)
-          }
+          onClick(e)
           if (trackingId) {
             trackClick(trackingId, trackingParams)
           }

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -10,6 +10,7 @@ import Link from "@/components/TempDesignSystem/Link"
 import useHash from "@/hooks/useHash"
 import useScrollSpy from "@/hooks/useScrollSpy"
 import useStickyPosition from "@/hooks/useStickyPosition"
+import { trackHotelTabClick } from "@/utils/tracking"
 
 import styles from "./tabNavigation.module.css"
 
@@ -95,7 +96,10 @@ export default function TabNavigation({
               color="burgundy"
               textDecoration="none"
               scroll={true}
-              onClick={pauseScrollSpy}
+              onClick={() => {
+                pauseScrollSpy()
+                trackHotelTabClick(link.text)
+              }}
             >
               {link.text}
             </Link>

components/ContentType/HotelPage/hotelPage.module.css

@@ -5,7 +5,8 @@
 
   --hotel-page-navigation-height: 59px;
   --hotel-page-scroll-margin-top: calc(
-    var(--hotel-page-navigation-height) + var(--Spacing-x2)
+    var(--hotel-page-navigation-height) + var(--booking-widget-mobile-height) +
+      var(--Spacing-x2)
   );
   display: grid;
   grid-template-areas:
@@ -37,6 +38,7 @@
 .overview {
   display: grid;
   gap: var(--Spacing-x3);
+  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 .introContainer {
@@ -44,7 +46,6 @@
   flex-wrap: wrap;
   justify-content: space-between;
   gap: var(--Spacing-x4);
-  scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
 .alertsContainer {
@@ -65,6 +66,10 @@
 
 @media screen and (min-width: 1367px) {
   .pageContainer {
+    --hotel-page-scroll-margin-top: calc(
+      var(--hotel-page-navigation-height) + var(--booking-widget-desktop-height) +
+        var(--Spacing-x2)
+    );
     grid-template-areas:
       "header mapContainer"
       "tabNavigation mapContainer"

hooks/useScrollSpy.ts

@@ -16,7 +16,7 @@ export default function useScrollSpy(
       // Make sure only to activate the section when it reaches the top of the viewport.
       // A negative value for rootMargin shrinks the root bounding box inward,
       // meaning elements will only be considered intersecting when they are further inside the viewport.
-      rootMargin: "-8% 0% -90% 0%",
+      rootMargin: "-15% 0% -85% 0%",
       threshold: 0,
       ...options,
     }),

utils/tracking.ts

@@ -77,6 +77,16 @@ export function trackAccordionClick(option: string) {
   pushToDataLayer(event)
 }
 
+export function trackHotelTabClick(name: string) {
+  pushToDataLayer({
+    event: "linkClick",
+    link: {
+      action: "hotel menu click",
+      option: `hotel menu:${name}`,
+    },
+  })
+}
+
 export function trackUpdatePaymentMethod(hotelId: string, method: string) {
   const paymentSelectionEvent = {
     event: "paymentSelection",