From d11b9e8aee5a66d2e5b22148f3b65fd7b549d8d8 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 8 Jan 2025 14:18:12 +0100
Subject: [PATCH] feat(SW-395): Added tracking to header and footer

---
 .../Footer/Details/SocialLink/index.tsx       | 29 +++++++++++++++++++
 components/Footer/Details/index.tsx           | 24 ++-------------
 .../Footer/Navigation/MainNav/index.tsx       |  5 +++-
 .../Footer/Navigation/SecondaryNav/index.tsx  | 29 +++++++++++--------
 components/LoginButton/index.tsx              |  4 +--
 types/components/footer/socialLink.ts         |  6 ++++
 utils/tracking.ts                             | 24 +++++++++++++--
 7 files changed, 83 insertions(+), 38 deletions(-)
 create mode 100644 components/Footer/Details/SocialLink/index.tsx
 create mode 100644 types/components/footer/socialLink.ts

diff --git a/components/Footer/Details/SocialLink/index.tsx b/components/Footer/Details/SocialLink/index.tsx
new file mode 100644
index 000000000..2303c7a24
--- /dev/null
+++ b/components/Footer/Details/SocialLink/index.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import { trackSocialMediaClick } from "@/utils/tracking"
+
+import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
+import type { SocialLinkProps } from "@/types/components/footer/socialLink"
+import type { IconName } from "@/types/components/icon"
+
+function SocialIcon({ iconName }: SocialIconsProps) {
+  const SocialIcon = getIconByIconName(iconName as IconName)
+  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
+}
+
+export default function SocialLink({ link }: SocialLinkProps) {
+  const { href, title } = link
+  return (
+    <a
+      color="white"
+      href={href}
+      key={title}
+      target="_blank"
+      aria-label={title}
+      onClick={() => trackSocialMediaClick(title)}
+    >
+      <SocialIcon iconName={title} />
+    </a>
+  )
+}
diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx
index 7827f6043..2471fafca 100644
--- a/components/Footer/Details/index.tsx
+++ b/components/Footer/Details/index.tsx
@@ -1,6 +1,5 @@
 import { getFooter, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
-import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
 import Image from "@/components/Image"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -9,16 +8,10 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
+import SocialLink from "./SocialLink"
+
 import styles from "./details.module.css"
 
-import type { SocialIconsProps } from "@/types/components/footer/socialIcons"
-import type { IconName } from "@/types/components/icon"
-
-function SocialIcon({ iconName }: SocialIconsProps) {
-  const SocialIcon = getIconByIconName(iconName as IconName)
-  return SocialIcon ? <SocialIcon color="white" /> : <span>{iconName}</span>
-}
-
 export default async function FooterDetails() {
   const lang = getLang()
   const intl = await getIntl()
@@ -40,18 +33,7 @@ export default async function FooterDetails() {
         </Link>
         <nav className={styles.socialNav}>
           {footer?.socialMedia.links.map(
-            (link) =>
-              link.href && (
-                <a
-                  color="white"
-                  href={link.href.href}
-                  key={link.href.title}
-                  target="_blank"
-                  aria-label={link.href.title}
-                >
-                  <SocialIcon iconName={link.href.title} />
-                </a>
-              )
+            ({ href }) => href && <SocialLink link={href} key={href.title} />
           )}
         </nav>
       </div>
diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx
index d9b499603..6e7b4a861 100644
--- a/components/Footer/Navigation/MainNav/index.tsx
+++ b/components/Footer/Navigation/MainNav/index.tsx
@@ -1,7 +1,10 @@
+"use client"
+
 import { ArrowRightIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { trackFooterClick } from "@/utils/tracking"
 
 import styles from "./mainnav.module.css"
 
@@ -19,9 +22,9 @@ export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
                 href={link.url}
                 className={styles.mainNavigationLink}
                 target={link.openInNewTab ? "_blank" : undefined}
+                onClick={() => trackFooterClick("main", link.title)}
               >
                 {link.title}
-
                 <ArrowRightIcon color="peach80" />
               </Link>
             </Subtitle>
diff --git a/components/Footer/Navigation/SecondaryNav/index.tsx b/components/Footer/Navigation/SecondaryNav/index.tsx
index 1af85c16c..e65a34c53 100644
--- a/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/components/Footer/Navigation/SecondaryNav/index.tsx
@@ -1,8 +1,11 @@
+"use client"
+
 import Image from "@/components/Image"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
-import { getLang } from "@/i18n/serverContext"
+import useLang from "@/hooks/useLang"
+import { trackFooterClick, trackSocialMediaClick } from "@/utils/tracking"
 
 import styles from "./secondarynav.module.css"
 
@@ -13,7 +16,7 @@ export default function FooterSecondaryNav({
   secondaryLinks,
   appDownloads,
 }: FooterSecondaryNavProps) {
-  const lang = getLang()
+  const lang = useLang()
 
   return (
     <div className={styles.secondaryNavigation}>
@@ -28,18 +31,19 @@ export default function FooterSecondaryNav({
           </Caption>
           <ul className={styles.secondaryNavigationList}>
             {appDownloads.links.map(
-              (link) =>
-                link.href && (
-                  <li key={link.type} className={styles.appDownloadItem}>
+              ({ href, type }) =>
+                href && (
+                  <li key={type} className={styles.appDownloadItem}>
                     <a
-                      href={link.href.href}
+                      href={href.href}
                       target="_blank"
-                      aria-label={link.href.title}
+                      aria-label={href.title}
+                      onClick={() => trackSocialMediaClick(href.title)}
                     >
                       <Image
                         src={
                           AppDownLoadLinks[
-                            `${link.type}_${lang}` as keyof typeof AppDownLoadLinks
+                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
                           ]
                         }
                         alt=""
@@ -53,22 +57,23 @@ export default function FooterSecondaryNav({
           </ul>
         </nav>
       )}
-      {secondaryLinks.map((link) => (
-        <nav className={styles.secondaryNavigationGroup} key={link.title}>
+      {secondaryLinks.map((group) => (
+        <nav className={styles.secondaryNavigationGroup} key={group.title}>
           <Caption
             color="textMediumContrast"
             textTransform="uppercase"
             type="label"
           >
-            {link.title}
+            {group.title}
           </Caption>
           <ul className={styles.secondaryNavigationList}>
-            {link?.links?.map((link) => (
+            {group?.links?.map((link) => (
               <li key={link.title} className={styles.secondaryNavigationItem}>
                 <Link
                   href={link.url}
                   target={link.openInNewTab ? "_blank" : undefined}
                   color="burgundy"
+                  onClick={() => trackFooterClick(group.title, link.title)}
                 >
                   {link.title}
                 </Link>
diff --git a/components/LoginButton/index.tsx b/components/LoginButton/index.tsx
index 6e0b1ee1c..e52b5e0f5 100644
--- a/components/LoginButton/index.tsx
+++ b/components/LoginButton/index.tsx
@@ -1,7 +1,5 @@
 "use client"
 
-import { type PropsWithChildren } from "react"
-
 import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
@@ -9,6 +7,8 @@ import useLang from "@/hooks/useLang"
 import { useLazyPathname } from "@/hooks/useLazyPathname"
 import { trackLoginClick } from "@/utils/tracking"
 
+import type { PropsWithChildren } from "react"
+
 import type { TrackingPosition } from "@/types/components/tracking"
 import type { LinkProps } from "@/components/TempDesignSystem/Link/link"
 
diff --git a/types/components/footer/socialLink.ts b/types/components/footer/socialLink.ts
new file mode 100644
index 000000000..5b41e87f2
--- /dev/null
+++ b/types/components/footer/socialLink.ts
@@ -0,0 +1,6 @@
+export interface SocialLinkProps {
+  link: {
+    href: string
+    title: string
+  }
+}
diff --git a/utils/tracking.ts b/utils/tracking.ts
index 59b7dd965..6f0897149 100644
--- a/utils/tracking.ts
+++ b/utils/tracking.ts
@@ -19,7 +19,7 @@ export function trackPageViewStart() {
 }
 
 export function trackLoginClick(position: TrackingPosition) {
-  const loginEvent = {
+  const event = {
     event: "loginStart",
     login: {
       position,
@@ -27,7 +27,27 @@ export function trackLoginClick(position: TrackingPosition) {
       ctaName: "login",
     },
   }
-  pushToDataLayer(loginEvent)
+  pushToDataLayer(event)
+}
+
+export function trackSocialMediaClick(socialMediaName: string) {
+  const event = {
+    event: "social media",
+    social: {
+      socialIconClicked: socialMediaName,
+    },
+  }
+  pushToDataLayer(event)
+}
+
+export function trackFooterClick(group: string, name: string) {
+  const event = {
+    event: "footer link",
+    footer: {
+      footerLinkClicked: `${group}:${name}`,
+    },
+  }
+  pushToDataLayer(event)
 }
 
 export function trackUpdatePaymentMethod(hotelId: string, method: string) {