fix: track user on page load

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} />