migrate to umami

index.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Video compressor</title>
     <meta name="description" content="The simplest video compressor" />
+    <script
+      defer
+      src="https://umami.podter.me/script.js"
+      data-website-id="059849ae-8f98-4c0f-9d93-774386f4ab2e"
+      data-domains="localhost"
+      crossorigin="anonymous"
+    ></script>
     <link rel="dns-prefetch" href="https://unpkg.com" />
     <link rel="preconnect" crossorigin="anonymous" href="https://unpkg.com" />
     <meta

package.json

@@ -23,7 +23,6 @@
     "jotai": "^2.9.2",
     "js-confetti": "^0.12.0",
     "lucide-react": "^0.417.0",
-    "plausible-tracker": "^0.3.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",

src/app.tsx

@@ -14,7 +14,6 @@ import {
   errorAtom,
   ffmpegAtom,
   originalFileAtom,
-  plausibleAtom,
 } from "./lib/atoms";
 import { usePWA } from "./lib/use-pwa";
 
@@ -39,17 +38,6 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ffmpeg]);
 
-  const { enableAutoPageviews, enableAutoOutboundTracking } =
-    useAtomValue(plausibleAtom);
-  useEffect(() => {
-    const cleanupPageviews = enableAutoPageviews();
-    const cleanupOutbound = enableAutoOutboundTracking();
-    return () => {
-      cleanupPageviews();
-      cleanupOutbound();
-    };
-  }, [enableAutoPageviews, enableAutoOutboundTracking]);
-
   return (
     <>
       <Header />

src/components/save.tsx

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { useAtomValue } from "jotai";
 import { ArrowRight, Check, Download } from "lucide-react";
 
-import { plausibleAtom } from "~/lib/atoms";
 import { Button } from "./ui/button";
 
 interface SaveProps {
@@ -11,8 +9,6 @@ interface SaveProps {
 }
 
 export default function Save({ originalFile, compressedFile }: SaveProps) {
-  const { trackEvent } = useAtomValue(plausibleAtom);
-
   const { filename, url } = useMemo(() => {
     const oldFilename = originalFile.name.replace(/\.[^/.]+$/, "");
     const filename = `${oldFilename} (compressed).mp4`;
@@ -44,7 +40,7 @@ export default function Save({ originalFile, compressedFile }: SaveProps) {
   );
 
   useEffect(() => {
-    trackEvent("Video compressed");
+    window.umami.track("Video compressed");
     import("js-confetti").then(async ({ default: JSConfetti }) => {
       const confetti = new JSConfetti();
 
@@ -77,7 +73,6 @@ export default function Save({ originalFile, compressedFile }: SaveProps) {
 
       confetti.destroyCanvas();
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/lib/atoms.ts

@@ -1,21 +1,13 @@
 import { createFFmpeg } from "@ffmpeg/ffmpeg";
 import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
-import Plausible from "plausible-tracker";
 
 export const ffmpegAtom = atom(() =>
   createFFmpeg({
     log: true,
   }),
 );
 
-export const plausibleAtom = atom(() =>
-  Plausible({
-    domain: "compress.podter.me",
-    apiHost: "https://plausible.podter.me",
-  }),
-);
-
 export const originalFileAtom = atom<File | null>(null);
 export const compressedFileAtom = atom<Blob | null>(null);
 

src/main.ts

@@ -9,6 +9,14 @@ import { Provider as JotaiProvider } from "jotai";
 import App from "./app";
 import { TooltipProvider } from "./components/ui/tooltip";
 
+declare global {
+  interface Window {
+    umami: {
+      track: (event: string, data?: unknown) => void;
+    };
+  }
+}
+
 ReactDOM.createRoot(document.getElementById("root")!).render(
   React.createElement(JotaiProvider, {
     children: React.createElement(TooltipProvider, {