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"