diff --git a/components/ButtonLink/index.tsx b/components/ButtonLink/index.tsx index 73c33f1dd..1b5c89359 100644 --- a/components/ButtonLink/index.tsx +++ b/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) } diff --git a/components/ContentType/HotelPage/TabNavigation/index.tsx b/components/ContentType/HotelPage/TabNavigation/index.tsx index b2699f461..c8a7d3d37 100644 --- a/components/ContentType/HotelPage/TabNavigation/index.tsx +++ b/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} diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css index a4096d7d5..3632a4b61 100644 --- a/components/ContentType/HotelPage/hotelPage.module.css +++ b/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" diff --git a/hooks/useScrollSpy.ts b/hooks/useScrollSpy.ts index 90fc7c18d..8de1d3d86 100644 --- a/hooks/useScrollSpy.ts +++ b/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, }), diff --git a/utils/tracking.ts b/utils/tracking.ts index ba6f9898e..5d83145ad 100644 --- a/utils/tracking.ts +++ b/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",