GuidesAnalytics
Table of Contents:
Plausible
- Create a new site on Plausible
- Plausible script is already added in the main
/app/layout.tsxfile. - You have to set
domainNamein the/config.tsfile.
/app/layout.tsx
1<head>
2 <PlausibleProvider domain={config.domainName} />
3</head>Props: https://www.npmjs.com/package/next-plausible#plausibleprovider-props
Simple Analytics
- Create a new site on Simple Analytics (You can get 1 month free if you accept it)
- Remove the Plausible script and add this after the
<body>tag in the/app/layout.tsxfile.
/app/layout.tsx
1<Script src="https://scripts.simpleanalyticscdn.com/latest.js" />Docs: https://docs.simpleanalytics.com/
Fathom Analytics
- Create a new site on Fathom Analytics (Get $10 when you sign up with this link)
- Install fathom-client
- Create a Fathom component
/components/Fathom.tsx - Then use the component in the main
/app/layout.tsxfile replacing the Plausible script:
Terminal
1npm i fathom-client/components/Fathom.tsx
1"use client";
2
3import { load, trackPageview } from "fathom-client";
4import { useEffect, Suspense } from "react";
5import { usePathname, useSearchParams } from "next/navigation";
6
7function TrackPageView() {
8 const pathname = usePathname();
9 const searchParams = useSearchParams();
10
11 // Load the Fathom script on mount
12 useEffect(() => {
13 load("MY_FATHOM_ID", {
14 auto: false,
15 });
16 }, []);
17
18 // Record a pageview when route changes
19 useEffect(() => {
20 if (!pathname) return;
21
22 trackPageview({
23 url: pathname + searchParams.toString(),
24 referrer: document.referrer,
25 });
26 }, [pathname, searchParams]);
27
28 return <></>;
29}
30
31export default function Fathom() {
32 return (
33 <Suspense fallback={null}>
34 <TrackPageView />
35 </Suspense>
36 );
37}
38/app/layout.tsx
1<Fathom />