matomo: "join" events

Author: wackerow

src/components/Homepage/useHome.ts

@@ -174,27 +174,31 @@ export const useHome = () => {
       description: t(
         "page-index:page-index-join-action-contribute-description"
       ),
+      eventName: "contribute",
     },
     {
       Svg: FaGithub,
       label: "GitHub",
       href: GITHUB_REPO_URL,
       className: "text-accent-a hover:text-accent-a-hover",
       description: t("page-index:page-index-join-action-github-description"),
+      eventName: "GitHub",
     },
     {
       Svg: FaDiscord,
       label: "Discord",
       href: "/discord/",
       className: "text-primary hover:text-primary-hover",
       description: t("page-index:page-index-join-action-discord-description"),
+      eventName: "Discord",
     },
     {
       Svg: FaXTwitter,
       label: "X",
       href: "https://x.com/EthDotOrg",
       className: "text-accent-b hover:text-accent-b-hover",
       description: t("page-index:page-index-join-action-twitter-description"),
+      eventName: "Twitter",
     },
   ]
 

src/pages/index.tsx

@@ -821,14 +821,19 @@ const HomePage = ({
             </div>
             <div className="mx-auto grid grid-cols-1 gap-16 md:grid-cols-2">
               {joinActions.map(
-                ({ Svg, label, href, className, description }) => (
+                ({ Svg, label, href, className, description, eventName }) => (
                   <SvgButtonLink
                     key={label}
                     Svg={Svg}
                     label={label}
                     href={href}
                     className={cn("max-w-screen-sm", className)}
                     variant="row"
+                    customEventOptions={{
+                      eventCategory: "Homepage",
+                      eventAction: "join",
+                      eventName,
+                    }}
                   >
                     <p className="text-body">{description}</p>
                   </SvgButtonLink>