diff --git a/components/Current/Header/LoginButton.tsx b/components/Current/Header/LoginButton.tsx index 0ab6bb481..46bdb6058 100644 --- a/components/Current/Header/LoginButton.tsx +++ b/components/Current/Header/LoginButton.tsx @@ -7,12 +7,14 @@ import { login } from "@/constants/routes/handleAuth" import Link from "@/components/TempDesignSystem/Link" +import type { TrackableLoginId } from "@/types/components/tracking" import { LangParams } from "@/types/params" export default function LoginButton({ className, + trackingId, lang, -}: LangParams & { className: string }) { +}: LangParams & { className: string; trackingId: TrackableLoginId }) { const { formatMessage } = useIntl() const pathName = usePathname() @@ -20,6 +22,7 @@ export default function LoginButton({ {formatMessage({ id: "Log in" })} diff --git a/components/Current/Header/MainMenu/index.tsx b/components/Current/Header/MainMenu/index.tsx index ae068072c..8d2532956 100644 --- a/components/Current/Header/MainMenu/index.tsx +++ b/components/Current/Header/MainMenu/index.tsx @@ -98,6 +98,7 @@ export function MainMenu({
  • diff --git a/components/Current/Header/TopMenu/index.tsx b/components/Current/Header/TopMenu/index.tsx index be0e99d97..b2850616b 100644 --- a/components/Current/Header/TopMenu/index.tsx +++ b/components/Current/Header/TopMenu/index.tsx @@ -65,6 +65,7 @@ export default async function TopMenu({ ) : ( diff --git a/components/Current/TrackingSDK.tsx b/components/Current/TrackingSDK.tsx index d4b3d8d89..1452f62db 100644 --- a/components/Current/TrackingSDK.tsx +++ b/components/Current/TrackingSDK.tsx @@ -5,6 +5,8 @@ import { useEffect } from "react" import { SiteSectionObject, + TrackableClickIdEnum, + TrackingPosition, TrackingSDKData, TrackingSDKProps, } from "@/types/components/tracking" @@ -107,5 +109,66 @@ export default function TrackingSDK({ pageData }: TrackingSDKProps) { } }, []) + function loginClick(position: TrackingPosition) { + if (window.adobeDataLayer) { + const loginEvent = { + event: "loginStart", + login: { + position, + action: "login start", + ctaName: "login", + }, + } + window.adobeDataLayer.push(loginEvent) + } + } + + function linkClick(name: string) { + if (window.adobeDataLayer) { + window.adobeDataLayer.push({ + event: "linkClick", + cta: { + name: name, + }, + }) + } + } + + useEffect(() => { + // Handle clickable events + document + .getElementById(TrackableClickIdEnum.LoginStartTopMenu) + ?.addEventListener("click", () => loginClick("top menu")) + document + .getElementById(TrackableClickIdEnum.LoginStartJoinScandicFriends) + ?.addEventListener("click", () => + loginClick("join scandic friends sidebar") + ) + document + .getElementById(TrackableClickIdEnum.LoginStartHamburgerMenu) + ?.addEventListener("click", () => loginClick("hamburger menu")) + + document + .getElementById(TrackableClickIdEnum.ProfilePictureLink) + ?.addEventListener("click", () => linkClick("profile picture link")) + + return () => { + document + .getElementById(TrackableClickIdEnum.LoginStartTopMenu) + ?.removeEventListener("click", () => loginClick("top menu")) + document + .getElementById(TrackableClickIdEnum.LoginStartJoinScandicFriends) + ?.removeEventListener("click", () => + loginClick("join scandic friends sidebar") + ) + document + .getElementById(TrackableClickIdEnum.LoginStartHamburgerMenu) + ?.removeEventListener("click", () => loginClick("hamburger menu")) + document + .getElementById(TrackableClickIdEnum.ProfilePictureLink) + ?.removeEventListener("click", () => linkClick("profile picture link")) + } + }, []) + return null } diff --git a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx index 0a49a80e3..ed1be157b 100644 --- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx +++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx @@ -13,6 +13,7 @@ import Contact from "./Contact" import styles from "./joinLoyalty.module.css" import type { JoinLoyaltyContactProps } from "@/types/components/loyalty/sidebar" +import { TrackableClickIdEnum } from "@/types/components/tracking" import { LangParams } from "@/types/params" export default async function JoinLoyaltyContact({ @@ -58,6 +59,7 @@ export default async function JoinLoyaltyContact({ href={`/${lang}/login`} variant="icon" size="small" + id={TrackableClickIdEnum.LoginStartJoinScandicFriends} > { + if (trackingId) { + document.getElementById(trackingId)?.addEventListener("click", () => {}) + return () => { + document + .getElementById(trackingId) + ?.removeEventListener("click", () => {}) + } + } + }, [trackingId]) + return ( + +export type TrackingPosition = + | "top menu" + | "hamburger menu" + | "join scandic friends sidebar"