fix: track user on page load

2024-07-15 09:13:20 +02:00
parent edb6005a72
commit c96008fb78
18 changed files with 247 additions and 122 deletions
--- a/components/ContentType/LoyaltyPage/LoyaltyPage.tsx
+++ b/components/ContentType/LoyaltyPage/LoyaltyPage.tsx
@@ -19,6 +19,8 @@ export default async function LoyaltyPage({ lang }: LangParams) {
  const loyaltyPageTracking =
    await serverClient().contentstack.loyaltyPage.tracking()

+  const userTracking = await serverClient().user.tracking()
+
  return (
    <section className={styles.content}>
      {loyaltyPage.sidebar.length ? (
@@ -31,7 +33,7 @@ export default async function LoyaltyPage({ lang }: LangParams) {
          <Blocks blocks={loyaltyPage.blocks} lang={lang} />
        ) : null}
      </MaxWidth>
-      <TrackingSDK pageData={loyaltyPageTracking} />
+      <TrackingSDK pageData={loyaltyPageTracking} userData={userTracking} />
    </section>
  )
 }
--- a/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/components/ContentType/LoyaltyPage/loyaltyPage.module.css
@@ -27,6 +27,7 @@

  .content:has(> aside) .blocks {
    grid-column: 2 / -1;
+    height: fit-content;
  }

  .blocks {
--- a/components/Current/Header/LoginButton.tsx
+++ b/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>
  )
 }
--- a/components/Current/Header/MainMenu/index.tsx
+++ b/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} />
--- a/components/Current/Header/TopMenu/index.tsx
+++ b/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>
--- a/components/Current/TrackingSDK.tsx
+++ b/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
 }
--- a/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Loyalty/Sidebar/JoinLoyalty/index.tsx
@@ -1,5 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"

+import LoginButton from "@/components/Current/Header/LoginButton"
 import ArrowRight from "@/components/Icons/ArrowRight"
 import { ScandicFriends } from "@/components/Levels"
 import Button from "@/components/TempDesignSystem/Button"
@@ -13,7 +14,6 @@ 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({
@@ -53,13 +53,12 @@ export default async function JoinLoyaltyContact({
        ) : null}
        <section className={styles.loginContainer}>
          <Body>{formatMessage({ id: "Already a friend?" })}</Body>
-          <Link
+          <LoginButton
            className={styles.link}
+            lang={lang}
+            trackingId="loginJoinLoyalty"
+            position="join scandic friends sidebar"
            color="burgundy"
-            href={`/${lang}/login`}
-            variant="icon"
-            size="small"
-            id={TrackableClickIdEnum.LoginStartJoinScandicFriends}
          >
            <ArrowRight
              color="burgundy"
@@ -68,7 +67,7 @@ export default async function JoinLoyaltyContact({
              width="20"
            />
            {formatMessage({ id: "Log in here" })}
-          </Link>
+          </LoginButton>
        </section>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -3,6 +3,8 @@ import NextLink from "next/link"
 import { usePathname } from "next/navigation"
 import { useEffect } from "react"

+import { trackClick } from "@/utils/tracking"
+
 import { linkVariants } from "./variants"

 import type { LinkProps } from "./link"
@@ -36,11 +38,13 @@ export default function Link({

  useEffect(() => {
    if (trackingId) {
-      document.getElementById(trackingId)?.addEventListener("click", () => {})
+      document
+        .getElementById(trackingId)
+        ?.addEventListener("click", () => trackClick(trackingId))
      return () => {
        document
          .getElementById(trackingId)
-          ?.removeEventListener("click", () => {})
+          ?.removeEventListener("click", () => trackClick(trackingId))
      }
    }
  }, [trackingId])
@@ -51,6 +55,7 @@ export default function Link({
      prefetch={prefetch}
      className={classNames}
      href={href}
+      id={trackingId}
      {...props}
    />
  )