Merge pull request #11708 from ethereum/matomo-updates

Matomo updates

Author: corwintines

src/components/Buttons/Button.tsx

@@ -6,6 +6,7 @@ import {
 } from "@chakra-ui/react"
 
 import { scrollIntoView } from "../../utils/scrollIntoView"
+import { type MatomoEventOptions, trackCustomEvent } from "../../utils/matomo"
 
 export const checkIsSecondary = (props: {
   variant?: string
@@ -33,15 +34,15 @@ export interface IProps extends ButtonProps {
    * `NOTE`: Does not apply to the `Solid` or `Link` variants
    */
   isSecondary?: boolean
+  customEventOptions?: MatomoEventOptions
 }
 
 const Button = forwardRef<IProps, "button">((props, ref) => {
-  const { toId, onClick, isSecondary, ...rest } = props
+  const { toId, onClick, isSecondary, customEventOptions, ...rest } = props
 
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (toId) {
-      scrollIntoView(toId)
-    }
+    toId && scrollIntoView(toId)
+    customEventOptions && trackCustomEvent(customEventOptions)
 
     onClick?.(e)
   }

src/components/FindWallet/WalletTable/index.tsx

@@ -427,11 +427,13 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
             <Wallet
               onClick={() => {
                 updateMoreInfo(wallet.key)
-                trackCustomEvent({
-                  eventCategory: "WalletMoreInfo",
-                  eventAction: `More info wallet`,
-                  eventName: `More info ${wallet.name} ${wallet.moreInfo}`,
-                })
+                // Log "more info" event only on expanding
+                wallet.moreInfo &&
+                  trackCustomEvent({
+                    eventCategory: "WalletMoreInfo",
+                    eventAction: `More info wallet`,
+                    eventName: `More info ${wallet.name}`,
+                  })
               }}
             >
               <Td lineHeight="revert">
@@ -473,7 +475,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                           customEventOptions={{
                             eventCategory: "WalletExternalLinkList",
                             eventAction: `Go to wallet`,
-                            eventName: `${wallet.name} ${idx}`,
+                            eventName: `Website: ${wallet.name} ${idx}`,
                             eventValue: JSON.stringify(filters),
                           }}
                         >
@@ -486,7 +488,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Twitter: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >
@@ -504,7 +506,7 @@ const WalletTable = ({ data, filters, walletData }: WalletTableProps) => {
                             customEventOptions={{
                               eventCategory: "WalletExternalLinkList",
                               eventAction: `Go to wallet`,
-                              eventName: `${wallet.name} ${idx}`,
+                              eventName: `Discord: ${wallet.name} ${idx}`,
                               eventValue: JSON.stringify(filters),
                             }}
                           >

src/utils/matomo.ts

@@ -13,19 +13,17 @@ export const trackCustomEvent = ({
   eventName,
   eventValue,
 }: MatomoEventOptions): void => {
-  if (process.env.NODE_ENV === "production" || window.dev === true) {
-    const optedOutValue = localStorage.getItem(MATOMO_LS_KEY) || "false"
-    const isOptedOut = JSON.parse(optedOutValue)
-    if (!window._paq || isOptedOut) return
+  if (process.env.NODE_ENV !== "production" && !window.dev) return
+  const optedOutValue = localStorage.getItem(MATOMO_LS_KEY) || "false"
+  const isOptedOut = JSON.parse(optedOutValue)
+  if (!window._paq || isOptedOut) return
 
-    const { _paq, dev } = window
+  const { _paq, dev } = window
 
-    _paq.push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
+  _paq.push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
+  if (!dev) return
 
-    if (dev) {
-      console.debug(
-        `[Matomo] event tracked, category: ${eventCategory}, action: ${eventAction}, name: ${eventName}, value: ${eventValue}`
-      )
-    }
-  }
+  console.debug(
+    `[Matomo] event tracked, category: ${eventCategory}, action: ${eventAction}, name: ${eventName}, value: ${eventValue}`
+  )
 }