Merge pull request #12511 from ethereum/glossary-tooltip-matomo

feat: add matomo event to glossary tooltip

src/components/Glossary/GlossaryTooltip/index.tsx

@@ -1,15 +1,21 @@
 import React, { ReactNode } from "react"
+import { useRouter } from "next/router"
 import { Box, Text } from "@chakra-ui/react"
 
 import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
 import Tooltip from "@/components/Tooltip"
 
+import { trackCustomEvent } from "@/lib/utils/matomo"
+import { cleanPath } from "@/lib/utils/url"
+
 type GlossaryTooltipProps = {
   children: ReactNode
   termKey: string
 }
 
 const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
+  const { asPath } = useRouter()
+
   return (
     <Box display="inline-block">
       <Tooltip
@@ -20,6 +26,13 @@ const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
             options={{ ns: "glossary-tooltip" }}
           />
         }
+        onOpen={() => {
+          trackCustomEvent({
+            eventCategory: "Glossary Tooltip",
+            eventAction: cleanPath(asPath),
+            eventName: termKey,
+          })
+        }}
       >
         <Text
           as="u"