GuidesAnalytics

Plausible

Create a new site on Plausible
Plausible script is already added in the main /app/layout.js file.

/app/layout.js

1<head>
2  <PlausibleProvider domain={config.domainName} />
3</head>

You have to set domainName in the /config.js file.

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.js file.

/app/layout.js

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

Terminal

1npm i fathom-client

Create a Fathom component /components/Fathom.js

/components/Fathom.js

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 null;
29}
30
31export default function Fathom() {
32  return (
33    <Suspense fallback={null}>
34      <TrackPageView />
35    </Suspense>
36  );
37}

Then use the component in the main /app/layout.js file replacing the Plausible script:

/app/layout.js

1<Fathom />

Docs: https://usefathom.com/docs

GuidesAnalytics

Table of Contents:

Plausible

Simple Analytics

Fathom Analytics