Matomo events

ethereum · Sep 19, 2024 · 51b29da · 51b29da
1 parent 591e9fb
commit 51b29da
Show file tree

Hide file tree

Showing 8 changed files with 411 additions and 42 deletions.
diff --git a/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx b/src/components/FindWalletProductTable/FindWalletLanguageSelectInput.tsx
@@ -9,8 +9,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/Select"
 
+import { getLanguageCodeName } from "@/lib/utils/intl"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLanguageCountWalletsData } from "@/lib/utils/wallets"
 
 interface FindWalletLanguageSelectInputProps {
@@ -42,6 +44,11 @@ const FindWalletLanguageSelectInput = ({
       <Select
         value={inputState as string}
         onValueChange={(e: Lang) => {
+          trackCustomEvent({
+            eventCategory: "WalletFilterSidebar",
+            eventAction: "Language search",
+            eventName: getLanguageCodeName(e, locale!),
+          })
           updateFilterState(filterIndex, itemIndex, e)
         }}
       >
@@ -68,6 +75,11 @@ const FindWalletLanguageSelectInput = ({
               key={language.langCode}
               className="cursor-pointer text-sm text-primary"
               onClick={() => {
+                trackCustomEvent({
+                  eventCategory: "WalletFilterSidebar",
+                  eventAction: "Language search",
+                  eventName: getLanguageCodeName(language.langCode, locale!),
+                })
                 updateFilterState(filterIndex, itemIndex, language.langCode)
               }}
             >

diff --git a/src/components/FindWalletProductTable/FindWalletsNoResults.tsx b/src/components/FindWalletProductTable/FindWalletsNoResults.tsx
@@ -1,18 +1,36 @@
 import { useTranslation } from "react-i18next"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
 import { Button } from "../ui/buttons/Button"
 
 const FindWalletsNoResults = ({ resetFilters }) => {
   const { t } = useTranslation("page-wallets-find-wallet")
 
+  // Track empty state
+  trackCustomEvent({
+    eventCategory: "Wallet_empty_state",
+    eventAction: "reset",
+    eventName: "triggered",
+  })
+
+  const handleClick = () => {
+    resetFilters()
+    trackCustomEvent({
+      eventCategory: "Wallet_empty_state",
+      eventAction: "reset",
+      eventName: "reset_button_clicked",
+    })
+  }
+
   return (
     <div className="m-24 border-2 border-dashed border-body-light">
       <div className="p-12">
         <h3 className="mb-6 text-3xl font-normal">
           {t("page-find-wallet-empty-results-title")}
         </h3>
         <p>{t("page-find-wallet-empty-results-desc")}</p>
-        <Button variant="ghost" onClick={resetFilters}>
+        <Button variant="ghost" onClick={handleClick}>
           <p>{t("page-find-wallet-reset-filters")}</p>
         </Button>
       </div>

diff --git a/src/components/FindWalletProductTable/WalletSubComponent.tsx b/src/components/FindWalletProductTable/WalletSubComponent.tsx
@@ -14,6 +14,7 @@ import InlineLink from "@/components/Link"
 import Tooltip from "@/components/Tooltip"
 
 import { cn } from "@/lib/utils/cn"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLocaleFormattedDate } from "@/lib/utils/time"
 
 const SocialLink = (props) => (
@@ -33,9 +34,15 @@ const SocialLink = (props) => (
 
 interface WalletSubComponentProps {
   wallet: WalletData
+  filters: FilterOption[]
+  listIdx: number
 }
 
-const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
+const WalletSubComponent = ({
+  wallet,
+  filters,
+  listIdx,
+}: WalletSubComponentProps) => {
   const { locale } = useRouter()
   const { t } = useTranslation("page-wallets-find-wallet")
   const walletFiltersOptions: FilterOption[] = WalletFilters()
@@ -53,6 +60,12 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
     wallet.last_updated
   )
 
+  trackCustomEvent({
+    eventCategory: "WalletMoreInfo",
+    eventAction: "More info wallet",
+    eventName: `More info ${wallet.name}`,
+  })
+
   return (
     <div className="flex flex-row gap-2">
       <div className="w-1 md:w-14">
@@ -103,10 +116,7 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
                             {item.filterLabel}{" "}
                             <Tooltip
                               content={
-                                <p className="text-body">
-                                  {/* TODO: Add filter description */}
-                                  {item.description}
-                                </p>
+                                <p className="text-body">{item.description}</p>
                               }
                             >
                               <span className="whitespace-nowrap">
@@ -127,16 +137,43 @@ const WalletSubComponent = ({ wallet }: WalletSubComponentProps) => {
             {t("page-find-wallet-social-links")}
           </h4>
           <div className="flex flex-row gap-4">
-            <SocialLink href={wallet.url} hideArrow>
+            <SocialLink
+              href={wallet.url}
+              hideArrow
+              customEventOptions={{
+                eventCategory: "WalletExternalLinkList",
+                eventAction: "Go to wallet",
+                eventName: `Website: ${wallet.name} ${listIdx}`,
+                eventValue: JSON.stringify(filters),
+              }}
+            >
               <FaGlobe size="2xl" />
             </SocialLink>
             {wallet.discord && (
-              <SocialLink href={wallet.discord} hideArrow>
+              <SocialLink
+                href={wallet.discord}
+                hideArrow
+                customEventOptions={{
+                  eventCategory: "WalletExternalLinkList",
+                  eventAction: "Go to wallet",
+                  eventName: `Discord: ${wallet.name} ${listIdx}`,
+                  eventValue: JSON.stringify(filters),
+                }}
+              >
                 <FaDiscord color="#7289da" size="2xl" />
               </SocialLink>
             )}
             {wallet.twitter && (
-              <SocialLink href={wallet.twitter} hideArrow>
+              <SocialLink
+                href={wallet.twitter}
+                hideArrow
+                customEventOptions={{
+                  eventCategory: "WalletExternalLinkList",
+                  eventAction: "Go to wallet",
+                  eventName: `Twitter: ${wallet.name} ${listIdx}`,
+                  eventValue: JSON.stringify(filters),
+                }}
+              >
                 <FaXTwitter color="#1da1f2" size="2xl" />
               </SocialLink>
             )}