feat: add matomo event to glossary tooltip

ethereum · Mar 19, 2024 · 09e12f7 · 09e12f7
1 parent 8b7f4c3
commit 09e12f7
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/components/Glossary/GlossaryTooltip/index.tsx b/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"