refactor: refactor fathom with custom hooks

acid-info · Oct 25, 2023 · bbd8ef2 · bbd8ef2
1 parent 3ec59c7
commit bbd8ef2
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 3 deletions.
diff --git a/.env b/.env
@@ -3,4 +3,5 @@ UNBODY_PROJECT_ID=
 SIMPLECAST_ACCESS_TOKEN=
 REVALIDATE_WEBHOOK_TOKEN=
 DISCORD_LOGS_WEBHOOK_URL=
-NEXT_PUBLIC_SITE_URL=
+NEXT_PUBLIC_SITE_URL=
+FATHOM_SITE_ID=
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@ UNBODY_PROJECT_ID=
 SIMPLECAST_ACCESS_TOKEN=
 REVALIDATE_WEBHOOK_TOKEN=
 NEXT_PUBLIC_SITE_URL=https://press.logos.co
+FATHOM_SITE_ID=
 ```
 
 This is a template for `.env.local`, which is included in `.gitignore`.

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import { GlobalAudioPlayer } from '@/components/GlobalAudioPlayer'
 import { ProgressBar } from '@/components/ProgressBar/ProgressBar'
 import { uiConfigs } from '@/configs/ui.configs'
 import { DefaultLayout } from '@/layouts/DefaultLayout'
+import useFathomAnalytics from '@/utils/useFathomAnalytics'
 import { css, Global } from '@emotion/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { NextComponentType, NextPageContext } from 'next'
@@ -27,6 +28,7 @@ const queryClient = new QueryClient()
 
 export default function App({ Component, pageProps }: AppLayoutProps) {
   const hydrated = useHydrated()
+  useFathomAnalytics()
 
   const getLayout =
     Component.getLayout ||

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,6 +1,8 @@
 import { Head, Html, Main, NextScript } from 'next/document'
 import { defaultThemeState } from '../states/themeState'
 
+const fathom = process.env.FATHOM_SITE_ID || ''
+
 export default function Document() {
   return (
     <Html lang="en" data-theme="light">
@@ -21,7 +23,7 @@ export default function Document() {
               o.async=1; o.src=t; o.id='fathom-script';
               m.parentNode.insertBefore(o,m)
             })(document, window, '//fathom.status.im/tracker.js', 'fathom');
-            fathom('set', 'siteId', 'VERNO');
+            fathom('set', 'siteId', '${fathom}');
             fathom('trackPageview');`,
           }}
         />

diff --git a/src/utils/useFathomAnalytics.ts b/src/utils/useFathomAnalytics.ts
@@ -0,0 +1,24 @@
+import Router from 'next/router'
+import { useEffect } from 'react'
+
+const useFathomAnalytics = () => {
+  useEffect(() => {
+    if (window.fathom) {
+      window.fathom('trackPageview')
+    }
+
+    const handleRouteChange = () => {
+      if (window.fathom) {
+        window.fathom('trackPageview')
+      }
+    }
+
+    Router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [])
+}
+
+export default useFathomAnalytics
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,6 +19,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./types"],
   "exclude": ["node_modules"]
 }
diff --git a/types/fathom.d.ts b/types/fathom.d.ts
@@ -0,0 +1,8 @@
+interface Fathom {
+  (command: string, ...args: any[]): void
+  q?: Array<any>
+}
+
+interface Window {
+  fathom?: Fathom
+}