From 1023ed9751aef7f887f70adc857ca13795efb98e Mon Sep 17 00:00:00 2001 From: Robert Koch Date: Sat, 19 Nov 2022 23:21:31 +1100 Subject: [PATCH] Update README.md --- README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/README.md b/README.md index f623b79..5c570d7 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,56 @@ function App({ Component, pageProps }) { export default App; ``` +or if using the experimental `appDir` option, add a client component to your root `layout.tsx` file. + +```tsx +// layout.tsx + +import Fathom from "./Fathom" + +export default function RootLayout({ children }: { children: ReactNode }) { + return ( + + + + + + {children} + + + ) +} +``` + +and create a client component like so + +```tsx +// Fathom.tsx +'use client' + +import { load, trackPageview } from 'fathom-client' +import { useEffect } from 'react' +import { usePathname, useSearchParams } from 'next/navigation' + +export default function Fathom() { + const pathname = usePathname() + const searchParams = useSearchParams() + useEffect(() => { + load('MY_FATHOM_ID', { + includedDomains: ['yourwebsite.com'] + }) + }, []) + + useEffect(() => { + trackPageview() + + // Record a pageview when route changes + }, [pathname, searchParams]) + + return null +} +``` + ## Upgrading to 3.x The 3.0 release comes with a new way to load Fathom: