Add fathom analytics client

5 files changed, 48 insertions, 2 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} />
diff --git a/app/layout.tsx b/app/layout.tsx
index 14a4e0c..c3a6d1d 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,7 +14,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Geshem.space | Real-Time Israel Rain Radar Visualization",
+  title: "geshem.space | Real-Time Israel Rain Radar Visualization",
   description: "Track Israel's rainfall in real-time with Geshem.space's advanced radar visualizer. Get accurate, up-to-date precipitation data and forecasts for precise weather monitoring across Israel.",
 };
 
diff --git a/package-lock.json b/package-lock.json
index 2f5907b..d88df59 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "axios": "^1.7.7",
         "eslint": "^8",
         "eslint-config-next": "14.2.13",
+        "fathom-client": "^3.7.2",
         "luxon": "^3.5.0",
         "mapbox-gl": "^3.6.0",
         "postcss": "^8",
@@ -2426,6 +2427,13 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fathom-client": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/fathom-client/-/fathom-client-3.7.2.tgz",
+      "integrity": "sha512-sWtaNivhg7uwp/q1bUuIiNj4LeQZMEZ5NXXFFpZ8le4uDedAfQG84gPOdYehtVXbl+1yX2s8lmXZ2+IQ9a/xxA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fflate": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
diff --git a/package.json b/package.json
index 1133ec7..df065d6 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "axios": "^1.7.7",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
+    "fathom-client": "^3.7.2",
     "luxon": "^3.5.0",
     "mapbox-gl": "^3.6.0",
     "postcss": "^8",