From bbd8ef2ede441ba8ab20b2639992eb5f09a4cd98 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Wed, 25 Oct 2023 22:24:34 +0900 Subject: [PATCH] refactor: refactor fathom with custom hooks --- .env | 3 ++- README.md | 1 + src/pages/_app.tsx | 2 ++ src/pages/_document.tsx | 4 +++- src/utils/useFathomAnalytics.ts | 24 ++++++++++++++++++++++++ tsconfig.json | 2 +- types/fathom.d.ts | 8 ++++++++ 7 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 src/utils/useFathomAnalytics.ts create mode 100644 types/fathom.d.ts diff --git a/.env b/.env index 5ffe2c15..7c684106 100644 --- 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= \ No newline at end of file +NEXT_PUBLIC_SITE_URL= +FATHOM_SITE_ID= \ No newline at end of file diff --git a/README.md b/README.md index d850ca50..dfd4fc3c 100644 --- 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 index 5df64f87..6c2f16f9 100644 --- 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 index 591c0097..434add04 100644 --- 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 ( @@ -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 new file mode 100644 index 00000000..e2c0c9ae --- /dev/null +++ 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 index 537dba92..ad1a1602 100644 --- 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 new file mode 100644 index 00000000..27a30321 --- /dev/null +++ b/types/fathom.d.ts @@ -0,0 +1,8 @@ +interface Fathom { + (command: string, ...args: any[]): void + q?: Array +} + +interface Window { + fathom?: Fathom +}