track pageview

src/index.tsx

@@ -28,10 +28,10 @@ import { AlertsPage } from "@/pages/alerts";
 import { StreamSummaryPage } from "@/pages/summary";
 import { EmbededPage } from "./pages/embed";
 import Markdown from "./element/markdown";
+import { Async } from "./element/async-loader";
 const DashboardPage = lazy(() => import("./pages/dashboard"));
 
 import Faq from "@/faq.md";
-import { Async } from "./element/async-loader";
 
 const db = new SnortSystemDb();
 const System = new NostrSystem({

src/pages/embed.tsx

@@ -2,12 +2,19 @@ import { StreamState } from "@/const";
 import LiveVideoPlayer from "@/element/live-video-player";
 import { useCurrentStreamFeed } from "@/hooks/current-stream-feed";
 import { useStreamLink } from "@/hooks/stream-link";
-import { extractStreamInfo } from "@/utils";
+import { extractStreamInfo, trackEvent } from "@/utils";
 import { NostrLink } from "@snort/system";
-import { Suspense } from "react";
+import { Suspense, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 export function EmbededPage() {
   const link = useStreamLink();
+  const location = useLocation();
+  
+  useEffect(() => {
+    trackEvent("pageview");
+  }, [location]);
+
   if (link) {
     return <EmbededPagePlayer link={link} />;
   }

src/pages/layout.tsx

@@ -1,8 +1,8 @@
 import "./layout.css";
 
-import { CSSProperties, useState, useSyncExternalStore } from "react";
+import { CSSProperties, useEffect, useState, useSyncExternalStore } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
-import { Link, Outlet, useNavigate } from "react-router-dom";
+import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Helmet } from "react-helmet";
 import { FormattedMessage } from "react-intl";
 import { Menu, MenuItem } from "@szhsin/react-menu";
@@ -18,15 +18,21 @@ import { useLang } from "@/hooks/lang";
 import { AllLocales } from "@/intl";
 import { NewVersion } from "@/serviceWorker";
 import AsyncButton from "@/element/async-button";
+import { trackEvent } from "@/utils";
 
 export function LayoutPage() {
   const navigate = useNavigate();
+  const location = useLocation();
   const login = useLogin();
   const [showLogin, setShowLogin] = useState(false);
   const { lang, setLang } = useLang();
 
   useLoginEvents(login?.pubkey, true);
 
+  useEffect(() => {
+    trackEvent("pageview");
+  }, [location]);
+
   function langSelector() {
     return (
       <Menu

src/utils.ts

@@ -127,3 +127,25 @@ export function extractStreamInfo(ev?: NostrEvent) {
 
   return ret;
 }
+
+export function trackEvent(
+  event: string,
+  props?: Record<string, string | boolean>,
+  e?: { destination?: { url: string } }
+) {
+  if (!import.meta.env.DEV) {
+    fetch("https://analytics.v0l.io/api/event", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        d: window.location.host,
+        n: event,
+        r: document.referrer === location.href ? null : document.referrer,
+        p: props,
+        u: e?.destination?.url ?? `${location.protocol}//${location.host}${location.pathname}`,
+      }),
+    });
+  }
+}