feat(SW-395): Added tracking to header and footer

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>