fix: fathom (#4137)

package.json

@@ -113,6 +113,7 @@
     "eslint-config-next": "^13.4.3",
     "ethereum-block-by-date": "1.4.6",
     "ethers": "^5.7.0",
+    "fathom-client": "^3.6.0",
     "forge-run-parser": "^1.0.2",
     "formidable": "^2.0.1",
     "formik": "^2.2.9",

src/components/common/SEO/SEO.tsx

@@ -2,7 +2,6 @@ import config from 'config/seo_meta.json'
 import Head from 'next/head'
 import { FC, ReactNode } from 'react'
 import { ipfsUriToGatewayUrl } from 'utils/ipfs'
-import { FathomScript } from '../Head/scripts/FathomScript'
 import { HotjarScript } from '../Head/scripts/HotjarScript'
 import { OpenGraphMetaTags } from './OpenGraphMetaTags'
 import {
@@ -93,7 +92,6 @@ export const SEO: FC<React.PropsWithChildren<SEOProps>> = ({
        */}
       {process.env.NODE_ENV === 'production' && (
         <>
-          <FathomScript />
           <HotjarScript />
         </>
       )}

src/lib/fathom.ts

@@ -1,8 +1,12 @@
-interface Fathom {
+import * as Fathom from 'fathom-client'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+interface FathomInstance {
   trackGoal: (eventId: string, value: number) => void
 }
 
-let fathom: Fathom | undefined = undefined
+export let fathom: FathomInstance | undefined = undefined
 if (typeof window !== 'undefined') {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   fathom = (window as any).fathom
@@ -12,4 +16,37 @@ export const trackFathomGoal = (eventId: string) => {
   fathom?.trackGoal(eventId, 0)
 }
 
-export { fathom }
+/**
+ * @link https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel
+ */
+export function useFathom() {
+  const router = useRouter()
+
+  useEffect(
+    () => {
+      if (process.env.NODE_ENV !== 'production') {
+        return
+      }
+      // Initialize Fathom when the app loads
+      // Example: yourdomain.com
+      //  - Do not include https://
+      //  - This must be an exact match of your domain.
+      //  - If you're using www. for your domain, make sure you include that here.
+      Fathom.load('ERYRRJSV', {
+        includedDomains: ['juicebox.money', 'www.juicebox.money'],
+      })
+
+      function onRouteChangeComplete() {
+        Fathom.trackPageview()
+      }
+      // Record a pageview when route changes
+      router.events.on('routeChangeComplete', onRouteChangeComplete)
+
+      // Unassign event listener
+      return () => {
+        router.events.off('routeChangeComplete', onRouteChangeComplete)
+      }
+    },
+    [], // eslint-disable-line
+  )
+}

src/pages/_app.tsx

@@ -2,6 +2,7 @@ import { Head } from 'components/common'
 import { LanguageProvider } from 'contexts/Language/LanguageProvider'
 import SupabaseSessionProvider from 'contexts/SupabaseSession/SupabaseSessionProvider'
 import { initWeb3Onboard, useInitWallet } from 'hooks/Wallet'
+import { useFathom } from 'lib/fathom'
 import type { AppProps } from 'next/app'
 import '../styles/index.scss'
 
@@ -15,6 +16,7 @@ initWeb3Onboard()
 export default function MyApp({ Component, pageProps }: AppProps) {
   // Currently, init() must be called *here* (as opposed to AppWrapper), or else it breaks when navigating between pages.
   useInitWallet()
+  useFathom()
 
   if (!pageProps.i18n) {
     console.error(

yarn.lock

@@ -11298,6 +11298,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fathom-client@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/fathom-client/-/fathom-client-3.6.0.tgz#f46d8949cf73df89998a8793e51ad2c21efd703b"
+  integrity sha512-/mrgmVvpw4HqDCcqUfPulERhONKgnJGL74RAxfqKDuRQ+7w9lKoTHMzqBWE7WNBvmsgZEthQWJFOWOEjv+T3gA==
+
 fb-watchman@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"