add fathom

vvo · Nov 20, 2023 · 1071ac9 · 1071ac9
1 parent 43e8099
commit 1071ac9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 1 deletion.
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "fathom-client": "3.6.0",
     "iron-session": "workspace:*",
     "next": "14.0.3",
     "react": "^18",

diff --git a/examples/next/src/app/fathom.tsx b/examples/next/src/app/fathom.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { load, trackPageview } from "fathom-client";
+import { useEffect, Suspense } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+
+function TrackPageView() {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  // Load the Fathom script on mount
+  useEffect(() => {
+    load("YKGUEAZB", {
+      auto: false,
+    });
+  }, []);
+
+  // Record a pageview when route changes
+  useEffect(() => {
+    if (!pathname) return;
+
+    trackPageview({
+      url: pathname + searchParams.toString(),
+      referrer: document.referrer,
+    });
+  }, [pathname, searchParams]);
+
+  return null;
+}
+
+export default function Fathom() {
+  return (
+    <Suspense fallback={null}>
+      <TrackPageView />
+    </Suspense>
+  );
+}
diff --git a/examples/next/src/app/layout.tsx b/examples/next/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Fathom from "./fathom";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-gray-50`}>{children}</body>
+      <body className={`${inter.className} bg-gray-50`}>
+        <Fathom />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml