refactor: refactor fathom with custom hooks
This commit is contained in:
parent
3ec59c7a64
commit
bbd8ef2ede
3
.env
3
.env
|
@ -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=
|
|
@ -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`.
|
||||||
|
|
|
@ -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 ||
|
||||||
|
|
|
@ -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');`,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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/*"]
|
"@/*": ["./src/*"]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./types"],
|
||||||
"exclude": ["node_modules"]
|
"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