refactor: refactor fathom with custom hooks
This commit is contained in:
parent
3ec59c7a64
commit
bbd8ef2ede
1
.env
1
.env
|
@ -4,3 +4,4 @@ SIMPLECAST_ACCESS_TOKEN=
|
|||
REVALIDATE_WEBHOOK_TOKEN=
|
||||
DISCORD_LOGS_WEBHOOK_URL=
|
||||
NEXT_PUBLIC_SITE_URL=
|
||||
FATHOM_SITE_ID=
|
|
@ -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`.
|
||||
|
|
|
@ -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 ||
|
||||
|
|
|
@ -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');`,
|
||||
}}
|
||||
/>
|
||||
|
|
|
@ -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
|
|
@ -19,6 +19,6 @@
|
|||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./types"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
interface Fathom {
|
||||
(command: string, ...args: any[]): void
|
||||
q?: Array<any>
|
||||
}
|
||||
|
||||
interface Window {
|
||||
fathom?: Fathom
|
||||
}
|
Loading…
Reference in New Issue