refactor: refactor fathom with custom hooks

This commit is contained in:
jinhojang6 2023-10-25 22:24:34 +09:00 committed by Jinho Jang
parent 3ec59c7a64
commit bbd8ef2ede
7 changed files with 41 additions and 3 deletions

3
.env
View File

@ -3,4 +3,5 @@ UNBODY_PROJECT_ID=
SIMPLECAST_ACCESS_TOKEN= SIMPLECAST_ACCESS_TOKEN=
REVALIDATE_WEBHOOK_TOKEN= REVALIDATE_WEBHOOK_TOKEN=
DISCORD_LOGS_WEBHOOK_URL= DISCORD_LOGS_WEBHOOK_URL=
NEXT_PUBLIC_SITE_URL= NEXT_PUBLIC_SITE_URL=
FATHOM_SITE_ID=

View File

@ -25,6 +25,7 @@ UNBODY_PROJECT_ID=
SIMPLECAST_ACCESS_TOKEN= SIMPLECAST_ACCESS_TOKEN=
REVALIDATE_WEBHOOK_TOKEN= REVALIDATE_WEBHOOK_TOKEN=
NEXT_PUBLIC_SITE_URL=https://press.logos.co NEXT_PUBLIC_SITE_URL=https://press.logos.co
FATHOM_SITE_ID=
``` ```
This is a template for `.env.local`, which is included in `.gitignore`. This is a template for `.env.local`, which is included in `.gitignore`.

View File

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

View File

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

View File

@ -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

View File

@ -19,6 +19,6 @@
"@/*": ["./src/*"] "@/*": ["./src/*"]
} }
}, },
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./types"],
"exclude": ["node_modules"] "exclude": ["node_modules"]
} }

8
types/fathom.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
interface Fathom {
(command: string, ...args: any[]): void
q?: Array<any>
}
interface Window {
fathom?: Fathom
}