Merge pull request #13576 from rohitt-gupta/fix-event-tracking-wallet-page

fix event tracking: wallet page [Fixes #13420]

Author: corwintines

src/components/CardList.tsx

@@ -13,6 +13,7 @@ import {
 
 import { BaseLink } from "@/components/Link"
 
+import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import * as url from "@/lib/utils/url"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
@@ -102,12 +103,14 @@ export type CardListProps = BoxProps & {
   items: CardProps[]
   imageWidth?: number
   clickHandler?: (idx: string | number) => void
+  customEventOptions?: MatomoEventOptions
 }
 
 const CardList = ({
   items,
   imageWidth,
   clickHandler = () => null,
+  customEventOptions,
   ...props
 }: CardListProps) => (
   <Box bg="background.base" w="full" {...props}>
@@ -122,7 +125,10 @@ const CardList = ({
       ) : (
         <Card
           key={idx}
-          onClick={() => clickHandler(idx)}
+          onClick={() => {
+            customEventOptions && trackCustomEvent(customEventOptions)
+            clickHandler(idx)
+          }}
           mb={4}
           {...listItem}
         />

src/pages/wallets/index.tsx

@@ -170,18 +170,18 @@ const WalletsPage = () => {
               href: "/wallets/find-wallet/",
               content: t("page-wallets-find-wallet-link"),
               matomo: {
-                eventCategory: "wallet hero buttons",
+                eventCategory: "Header buttons",
                 eventAction: "click",
-                eventName: "find wallet",
+                eventName: "Find_wallet",
               },
             },
             {
               href: `#${SIMULATOR_ID}`,
               content: "How to use a wallet",
               matomo: {
-                eventCategory: "wallet hero buttons",
+                eventCategory: "Header buttons",
                 eventAction: "click",
-                eventName: "interactive tutorial",
+                eventName: "How_to_use_wallet",
               },
               variant: "outline",
             },
@@ -191,9 +191,9 @@ const WalletsPage = () => {
               href: "/wallets/find-wallet/",
               content: t("page-wallets-find-wallet-link"),
               matomo: {
-                eventCategory: "wallet hero buttons",
+                eventCategory: "Header button",
                 eventAction: "click",
-                eventName: "find wallet",
+                eventName: "Find_wallet",
               },
             },
           ],
@@ -253,22 +253,42 @@ const WalletsPage = () => {
       title: t("page-wallets-protecting-yourself"),
       description: "MyCrypto",
       link: "https://support.mycrypto.com/staying-safe/protecting-yourself-and-your-funds",
+      customEventOptions: {
+        eventCategory: "Link",
+        eventAction: "Clicked_external",
+        eventName: "protecting_yourself",
+      },
     },
     {
       title: t("page-wallets-keys-to-safety"),
       description: t("page-wallets-blog"),
       link: "https://www.coinbase.com/learn/crypto-basics/how-to-secure-crypto",
+      customEventOptions: {
+        eventCategory: "Link",
+        eventAction: "Clicked_external",
+        eventName: "the_keys_to_keeping_crypto_safe",
+      },
     },
   ]
 
   const guides = [
     {
       title: t("additional-reading-how-to-create-an-ethereum-account"),
       link: "/guides/how-to-create-an-ethereum-account/",
+      customEventOptions: {
+        eventCategory: "Link",
+        eventAction: "Clicked",
+        eventName: "Create_eth_acc",
+      },
     },
     {
       title: t("additional-reading-how-to-use-a-wallet"),
       link: "/guides/how-to-use-a-wallet/",
+      customEventOptions: {
+        eventCategory: "Link",
+        eventAction: "Clicked",
+        eventName: "How_to_use_wallet",
+      },
     },
   ]
 
@@ -400,7 +420,14 @@ const WalletsPage = () => {
               >
                 {t("page-wallets-features-desc")}
               </Box>
-              <ButtonLink href="/wallets/find-wallet/">
+              <ButtonLink
+                href="/wallets/find-wallet/"
+                customEventOptions={{
+                  eventCategory: "header buttons",
+                  eventAction: "click",
+                  eventName: "Find_wallet",
+                }}
+              >
                 {t("page-wallets-find-wallet-btn")}
               </ButtonLink>
               <Image