fix: support for tracking link clicks

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({
     <Link
       href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
       className={className}
+      id={trackingId}
     >
       {formatMessage({ id: "Log in" })}
     </Link>

components/Current/Header/MainMenu/index.tsx

@@ -98,6 +98,7 @@ export function MainMenu({
                   </li>
                   <li className={styles.mobileLinkRow}>
                     <LoginButton
+                      trackingId="LoginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
                       lang={lang}
                     />

components/Current/Header/TopMenu/index.tsx

@@ -65,6 +65,7 @@ export default async function TopMenu({
               </>
             ) : (
               <LoginButton
+                trackingId="LoginStartTopMenu"
                 lang={lang}
                 className={`${styles.sessionLink} ${styles.loginLink}`}
               />

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
 }

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}
           >
             <ArrowRight
               color="burgundy"

components/TempDesignSystem/Link/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname } from "next/navigation"
+import { useEffect } from "react"
 
 import { linkVariants } from "./variants"
 
@@ -16,6 +17,7 @@ export default function Link({
   scroll = true,
   prefetch,
   variant,
+  trackingId,
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
@@ -31,6 +33,18 @@ export default function Link({
     size,
     variant,
   })
+
+  useEffect(() => {
+    if (trackingId) {
+      document.getElementById(trackingId)?.addEventListener("click", () => {})
+      return () => {
+        document
+          .getElementById(trackingId)
+          ?.removeEventListener("click", () => {})
+      }
+    }
+  }, [trackingId])
+
   return (
     <NextLink
       scroll={scroll}

components/TempDesignSystem/Link/link.ts

@@ -9,4 +9,5 @@ export interface LinkProps
   scroll?: boolean
   partialMatch?: boolean
   prefetch?: boolean
+  trackingId?: string
 }

types/components/tracking.ts

@@ -55,3 +55,24 @@ export type SiteSectionObject = {
   sitesection5: string
   sitesection6: string
 }
+
+export enum TrackableClickIdEnum {
+  LoginStartTopMenu = "LoginStartTopMenu",
+  LoginStartHamburgerMenu = "LoginStartHamburgerMenu",
+  LoginStartJoinScandicFriends = "LoginStartJoinScandicFriends",
+  LoginFail = "LoginFail",
+  HamburgerLink = "HamburgerLink",
+  ProfilePictureLink = "ProfilePictureLink",
+}
+
+type TrackableClickId = keyof typeof TrackableClickIdEnum
+
+export type TrackableLoginId = Exclude<
+  TrackableClickId,
+  "HamburgerLink" | "ProfilePictureLink" | "LoginFail"
+>
+
+export type TrackingPosition =
+  | "top menu"
+  | "hamburger menu"
+  | "join scandic friends sidebar"