Add fathom analytics client

2 files changed, 38 insertions, 1 deletions

diff --git a/app/components/Fathom.tsx b/app/components/Fathom.tsx
new file mode 100644
index 0000000..4dbd21b
--- /dev/null
+++ b/app/components/Fathom.tsx
@@ -0,0 +1,35 @@
+'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();
+
+  useEffect(() => {
+    load('MBXPLVRM', {
+      auto: false
+    });
+  }, []);
+
+  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>
+  );
+}
\ No newline at end of file
diff --git a/app/components/Geshem.tsx b/app/components/Geshem.tsx
index ba67b34..ba5f65c 100644
--- a/app/components/Geshem.tsx
+++ b/app/components/Geshem.tsx
@@ -1,11 +1,12 @@
 "use client"
 
 import React, { useState, useEffect } from "react";
-// import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { Map } from "./Map";
 import { Slider } from "./Slider";
 import { DateTime } from "./Datetime";
+import Fathom from "./Fathom";
+
 import { IMAGES_BASE_URL, PLAYBACK_HOURS, PLAYBACK_SLOTS } from "./config";
 
 import "rc-slider/assets/index.css";
@@ -74,6 +75,7 @@ export function Geshem() {
 
   return (
     <>
+      <Fathom />
       <Map images={images} slider={slider} />
       <DateTime images={images} slider={slider} />
       <Slider slider={slider} playback={fragment} setSlider={setSlider} />