fix: track user on page load

components/Current/Header/LoginButton.tsx

@@ -1,30 +1,53 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useIntl } from "react-intl"
+import { PropsWithChildren, useEffect } from "react"
 
 import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
+import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import { trackLoginClick } from "@/utils/tracking"
 
-import type { TrackableLoginId } from "@/types/components/tracking"
+import { TrackingPosition } from "@/types/components/tracking"
 import { LangParams } from "@/types/params"
 
 export default function LoginButton({
   className,
+  position,
   trackingId,
   lang,
-}: LangParams & { className: string; trackingId: TrackableLoginId }) {
-  const { formatMessage } = useIntl()
+  children,
+  color = "black",
+}: PropsWithChildren<
+  LangParams & {
+    className: string
+    trackingId: string
+    position: TrackingPosition
+    color?: LinkProps["color"]
+  }
+>) {
   const pathName = usePathname()
 
+  useEffect(() => {
+    document
+      .getElementById(trackingId)
+      ?.addEventListener("click", () => trackLoginClick(position))
+    return () => {
+      document
+        .getElementById(trackingId)
+        ?.removeEventListener("click", () => trackLoginClick(position))
+    }
+  }, [position, trackingId])
+
   return (
     <Link
-      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
       className={className}
       id={trackingId}
+      color={color}
+      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
     >
-      {formatMessage({ id: "Log in" })}
+      {children}
     </Link>
   )
 }

components/Current/Header/MainMenu/index.tsx

@@ -8,6 +8,7 @@ import useDropdownStore from "@/stores/main-menu"
 import Image from "@/components/Image"
 import Avatar from "@/components/MyPages/Avatar"
 import Link from "@/components/TempDesignSystem/Link"
+import { trackClick } from "@/utils/tracking"
 
 import BookingButton from "../BookingButton"
 import LoginButton from "../LoginButton"
@@ -37,6 +38,11 @@ export function MainMenu({
     toggleMyPagesMobileMenu,
   } = useDropdownStore()
 
+  function handleMyPagesMobileMenuClick() {
+    trackClick("profile picture icon")
+    toggleMyPagesMobileMenu()
+  }
+
   return (
     <div className={styles.mainMenu}>
       <div
@@ -98,10 +104,13 @@ export function MainMenu({
                   </li>
                   <li className={styles.mobileLinkRow}>
                     <LoginButton
-                      trackingId="LoginStartHamburgerMenu"
+                      position="hamburger menu"
+                      trackingId="loginStartHamburgerMenu"
                       className={styles.mobileLinkButton}
                       lang={lang}
-                    />
+                    >
+                      {intl.formatMessage({ id: "Log in" })}
+                    </LoginButton>
                   </li>
                 </>
               )}
@@ -118,9 +127,17 @@ export function MainMenu({
             <ul className={styles.mainLinks}>
               {links.map((link, i) => (
                 <li className={styles.li} key={link.href + i}>
-                  <a className={styles.link} href={link.href}>
+                  <Link
+                    className={styles.link}
+                    href={link.href}
+                    trackingId={
+                      isHamburgerMenuOpen
+                        ? `hamburger - ${link.title}`
+                        : undefined
+                    }
+                  >
                     {link.title}
-                  </a>
+                  </Link>
                 </li>
               ))}
             </ul>
@@ -128,9 +145,17 @@ export function MainMenu({
             <ul className={styles.mobileList}>
               {topMenuMobileLinks.map(({ link }, i) => (
                 <li className={styles.mobileLi} key={link.href + i}>
-                  <a className={styles.mobileLink} href={link.href}>
+                  <Link
+                    className={styles.mobileLink}
+                    href={link.href}
+                    trackingId={
+                      isHamburgerMenuOpen
+                        ? `hamburger - ${link.title}`
+                        : undefined
+                    }
+                  >
                     {link.title}
-                  </a>
+                  </Link>
                 </li>
               ))}
             </ul>
@@ -159,7 +184,7 @@ export function MainMenu({
             {myPagesMobileDropdown && user ? (
               <div
                 role="button"
-                onClick={() => toggleMyPagesMobileMenu()}
+                onClick={handleMyPagesMobileMenuClick}
                 className={styles.avatarButton}
               >
                 <Avatar firstName={user.firstName} lastName={user.lastName} />

components/Current/Header/TopMenu/index.tsx

@@ -65,10 +65,13 @@ export default async function TopMenu({
               </>
             ) : (
               <LoginButton
-                trackingId="LoginStartTopMenu"
-                lang={lang}
+                position="hamburger menu"
+                trackingId="loginStartTopMeny"
                 className={`${styles.sessionLink} ${styles.loginLink}`}
-              />
+                lang={lang}
+              >
+                {formatMessage({ id: "Log in" })}
+              </LoginButton>
             )}
           </li>
         </ul>

components/Current/TrackingSDK.tsx

@@ -5,8 +5,6 @@ import { useEffect } from "react"
 
 import {
   SiteSectionObject,
-  TrackableClickIdEnum,
-  TrackingPosition,
   TrackingSDKData,
   TrackingSDKProps,
 } from "@/types/components/tracking"
@@ -63,7 +61,7 @@ function createSDKPageObject(trackingData: TrackingSDKData) {
   return page_obj
 }
 
-export default function TrackingSDK({ pageData }: TrackingSDKProps) {
+export default function TrackingSDK({ pageData, userData }: TrackingSDKProps) {
   const pathName = usePathname()
 
   function CookiebotCallbackOnAccept() {
@@ -91,9 +89,9 @@ export default function TrackingSDK({ pageData }: TrackingSDKProps) {
     if (window.adobeDataLayer) {
       const trackingData = { ...pageData, pathName }
       const pageObject = createSDKPageObject(trackingData)
-      window.adobeDataLayer.push(pageObject)
+      window.adobeDataLayer.push({ ...pageObject, userInfo: userData })
     }
-  }, [pathName, pageData])
+  }, [pathName, pageData, userData])
 
   useEffect(() => {
     // handle consent
@@ -109,66 +107,5 @@ 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
 }