send cta clicks to plausible

blockworks-foundation · Feb 5, 2024 · 1531dfc · 1531dfc
1 parent d77eb9b
commit 1531dfc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 4 deletions.
diff --git a/app/components/home/Announcement.tsx b/app/components/home/Announcement.tsx
@@ -3,6 +3,10 @@ import { HomePageAnnouncement } from '../../../contentful/homePageAnnouncement'
 // import { ChevronRightIcon } from '@heroicons/react/20/solid'
 import { ReactNode } from 'react'
 import Link from 'next/link'
+import { usePlausible } from 'next-plausible'
+
+const classNames =
+  'border border-th-bkg-4 py-3 px-4 rounded-lg flex items-center justify-between md:hover:bg-th-bkg-3'
 
 const AnnouncementWrapper = ({
   children,
@@ -13,14 +17,27 @@ const AnnouncementWrapper = ({
   isExternal: boolean
   path: string
 }) => {
-  const classNames =
-    'border border-th-bkg-4 py-3 px-4 rounded-lg flex items-center justify-between md:hover:bg-th-bkg-3'
+  const telemetry = usePlausible()
+
+  const trackClick = () => {
+    telemetry('homeAnnouncement', {
+      props: {
+        path: path,
+      },
+    })
+  }
+
   return isExternal ? (
-    <a className={classNames} href={path} rel="noopener noreferrer">
+    <a
+      className={classNames}
+      href={path}
+      rel="noopener noreferrer"
+      onClick={trackClick}
+    >
       {children}
     </a>
   ) : (
-    <Link className={classNames} href={path} shallow>
+    <Link className={classNames} href={path} onClick={trackClick} shallow>
       {children}
     </Link>
   )

diff --git a/app/components/shared/ButtonLink.tsx b/app/components/shared/ButtonLink.tsx
@@ -1,3 +1,4 @@
+import { usePlausible } from 'next-plausible'
 import { FunctionComponent, ReactNode } from 'react'
 
 interface ButtonLinkProps {
@@ -17,6 +18,16 @@ const ButtonLink: FunctionComponent<ButtonLinkProps> = ({
   size,
   target,
 }) => {
+  const telemetry = usePlausible()
+
+  const trackClick = () => {
+    telemetry('ctaClick', {
+      props: {
+        path: path,
+      },
+    })
+  }
+
   return (
     <a
       className={`flex w-max items-center justify-center rounded-md ${
@@ -33,6 +44,7 @@ const ButtonLink: FunctionComponent<ButtonLinkProps> = ({
       href={path}
       rel="noopener noreferrer"
       target={target ? target : undefined}
+      onClick={trackClick}
     >
       {linkText}
     </a>