track analytics for the site

RyanClementsHax · May 13, 2024 · 8f269be · 8f269be
1 parent d708773
commit 8f269be
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 1 deletion.
diff --git a/app/[...not-found]/page.tsx b/app/[...not-found]/page.tsx
@@ -0,0 +1,6 @@
+import { Track404 } from 'components/Track404'
+
+// Defining it in a catch all route allows for it to be wrapped by the root layout
+export default function NotFound(): JSX.Element {
+  return <Track404 />
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { ThemeScript } from 'components/theme/ThemeScript'
 import { rssMetadata } from 'lib/content/rss'
 import { fontClass } from 'lib/fonts'
 import deepmerge from '@fastify/deepmerge'
+import PlausibleProvider from 'next-plausible'
 
 import 'styles/global.scss'
 import { Metadata, Viewport } from 'next'
@@ -40,7 +41,13 @@ export default function RootLayout({
   return (
     <ThemeProvider>
       <Html lang="en" className={fontClass}>
-        <head />
+        <head>
+          <PlausibleProvider
+            trackOutboundLinks
+            taggedEvents
+            domain="ryanclements.dev"
+          />
+        </head>
         <body>
           <ThemeScript />
           {children}

diff --git a/components/Redirect.tsx b/components/Redirect.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useEffect } from 'react'
+
+export interface RedirectProps {
+  to: string
+}
+
+export function Redirect({ to }: RedirectProps): React.ReactNode {
+  const router = useRouter()
+  useEffect(() => {
+    void router.replace(to)
+  }, [router, to])
+  return null
+}
diff --git a/components/Track404.tsx b/components/Track404.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { useAnalytics } from 'lib/analytics'
+import { Redirect } from './Redirect'
+import { useEffect } from 'react'
+
+export function Track404(): JSX.Element {
+  const { track404 } = useAnalytics()
+
+  useEffect(() => {
+    track404()
+  }, [track404])
+
+  return <Redirect to="/" />
+}
diff --git a/lib/analytics.ts b/lib/analytics.ts
@@ -0,0 +1,21 @@
+'use client'
+
+import { usePlausible } from 'next-plausible'
+import { useRef } from 'react'
+
+type Analytics = {
+  '404': { path: string }
+}
+
+export function useAnalytics(): { track404(): void } {
+  const notFoundTracked = useRef(false)
+  const plausible = usePlausible<Analytics>()
+  return {
+    track404: () => {
+      if (!notFoundTracked.current) {
+        plausible('404', { props: { path: document.location.pathname } })
+        notFoundTracked.current = true
+      }
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "gray-matter": "^4.0.3",
     "hast-util-to-string": "^3.0.0",
     "next": "^14.0.4",
+    "next-plausible": "^3.12.0",
     "parse-numeric-range": "^1.3.0",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.31",