Merge pull request #157 from ethereum/matomo-links

Implement Matomo tracking in Link component

Author: corwintines

src/components/Link.tsx

@@ -1,4 +1,3 @@
-import { FC, RefAttributes } from "react"
 import { useRouter } from "next/router"
 import { RxExternalLink } from "react-icons/rx"
 import {
@@ -13,8 +12,8 @@ import {
   VisuallyHidden,
 } from "@chakra-ui/react"
 
+import { type MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import { getRelativePath } from "@/lib/utils/relativePath"
-// import { trackCustomEvent, MatomoEventOptions } from "@/lib/utils/matomo"
 import * as url from "@/lib/utils/url"
 
 import { DISCORD_PATH, SITE_URL } from "@/lib/constants"
@@ -28,13 +27,11 @@ type BaseProps = {
   hideArrow?: boolean
   isPartiallyActive?: boolean
   activeStyle?: StyleProps
-  // customEventOptions?: MatomoEventOptions
+  customEventOptions?: MatomoEventOptions
 }
 
 export type LinkProps = BaseProps & Omit<NextLinkProps, "href">
 
-type LinkComponent = FC<RefAttributes<HTMLAnchorElement> & LinkProps>
-
 /**
  * Link wrapper which handles:
  *
@@ -47,23 +44,25 @@ type LinkComponent = FC<RefAttributes<HTMLAnchorElement> & LinkProps>
  * - PDFs & static files (which open in a new tab)
  * e.g. <Link href="/eth-whitepaper.pdf">
  */
-export const BaseLink: LinkComponent = forwardRef(function Link(props, ref) {
-  const {
-    href: hrefProp,
+export const BaseLink = forwardRef(function Link(
+  {
     to,
+    href: hrefProp,
     children,
     hideArrow,
     isPartiallyActive = true,
     activeStyle = { color: "primary.base" },
-    ...rest
-  } = props
-
-  let href = (to ?? hrefProp)!
+    customEventOptions,
+    ...props
+  }: LinkProps,
+  ref
+) {
+  let href = (to ?? hrefProp) as string
 
   const { asPath, locale } = useRouter()
   const { flipForRtl } = useRtlFlip()
-  const isActive = url.isHrefActive(href, asPath, isPartiallyActive)
 
+  const isActive = url.isHrefActive(href, asPath, isPartiallyActive)
   const isDiscordInvite = url.isDiscordInvite(href)
   const isPdf = url.isPdf(href)
   const isExternal = url.isExternal(href)
@@ -81,14 +80,29 @@ export const BaseLink: LinkComponent = forwardRef(function Link(props, ref) {
 
   const commonProps = {
     ref,
-    href,
-    ...rest,
+    ...props,
     ...(isActive && activeStyle),
+    href,
   }
 
   if (isInternalPdf || isExternal) {
     return (
-      <ChakraLink {...commonProps} isExternal>
+      <ChakraLink
+        isExternal
+        onClick={() =>
+          trackCustomEvent(
+            customEventOptions ?? {
+              eventCategory: `Link`,
+              eventAction: `Clicked`,
+              eventName: `Clicked on ${
+                isInternalPdf ? "internal PDF" : "external link"
+              }`,
+              eventValue: href,
+            }
+          )
+        }
+        {...commonProps}
+      >
         {children}
         <VisuallyHidden>(opens in a new tab)</VisuallyHidden>
         {!hideArrow && (
@@ -106,13 +120,26 @@ export const BaseLink: LinkComponent = forwardRef(function Link(props, ref) {
   }
 
   return (
-    <NextLink locale={locale} {...commonProps}>
+    <NextLink
+      locale={locale}
+      onClick={() =>
+        trackCustomEvent(
+          customEventOptions ?? {
+            eventCategory: `Link`,
+            eventAction: `Clicked`,
+            eventName: `Clicked on internal link`,
+            eventValue: href,
+          }
+        )
+      }
+      {...commonProps}
+    >
       {children}
     </NextLink>
   )
 })
 
-const InlineLink: FC<LinkProps> = forwardRef((props, ref) => {
+const InlineLink = forwardRef((props: LinkProps, ref) => {
   const { locale } = useRouter()
 
   return <BaseLink data-inline-link ref={ref} locale={locale} {...props} />