refactor(analyitics): finished analyitics as a base

frontend/src/lib/umami.utils.ts

@@ -0,0 +1,65 @@
+type RuntimeConfig = {
+	appName: string;
+	site: string;
+	server: string;
+	appVersion: string;
+	umamiHost: string;
+	umamiWebsiteId: string;
+};
+
+declare global {
+	interface Window {
+		LST_CONFIG?: RuntimeConfig;
+		umami?: {
+			track: (eventName: string, eventData?: Record<string, unknown>) => void;
+		};
+	}
+}
+
+export const runtimeConfig: RuntimeConfig = {
+	appName: window.LST_CONFIG?.appName ?? "LST",
+	site: window.LST_CONFIG?.site ?? "unknown",
+	server: window.LST_CONFIG?.server ?? "unknown",
+	appVersion: window.LST_CONFIG?.appVersion ?? "dev",
+	umamiHost: window.LST_CONFIG?.umamiHost ?? "",
+	umamiWebsiteId: window.LST_CONFIG?.umamiWebsiteId ?? "",
+};
+
+export function loadUmami() {
+	if (!runtimeConfig.umamiHost) return;
+	if (!runtimeConfig.umamiWebsiteId) return;
+	if (document.querySelector("script[data-website-id]")) return;
+
+	const script = document.createElement("script");
+	script.defer = true;
+	script.src = `${runtimeConfig.umamiHost}/script.js`;
+	script.setAttribute("data-website-id", runtimeConfig.umamiWebsiteId);
+
+	document.head.appendChild(script);
+}
+
+export function trackLstEvent(
+	eventName: string,
+	eventData?: Record<string, unknown>,
+) {
+	window.umami?.track(eventName, {
+		app: runtimeConfig.appName,
+		site: runtimeConfig.site,
+		server: runtimeConfig.server,
+		appVersion: runtimeConfig.appVersion,
+		...eventData,
+	});
+}
+
+/*
+
+event type
+
+		trackLstEvent("exampleClick", {
+			module: "example",
+			action: "test_click",
+			label: "Example Button",
+			page: window.location.pathname,
+		});
+
+*/

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import { createRouter, RouterProvider } from "@tanstack/react-router";
 import socket from "./lib/socket.io";
+import { loadUmami } from "./lib/umami.utils";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
@@ -38,6 +39,7 @@ declare module "@tanstack/react-router" {
 // Render the app
 const rootElement = document.getElementById("root")!;
 if (!rootElement.innerHTML) {
+	loadUmami();
 	const root = ReactDOM.createRoot(rootElement);
 	root.render(
 		<StrictMode>

frontend/src/routes/index.tsx

@@ -3,6 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import z from "zod";
 
 import { useSession } from "../lib/auth-client";
+import { trackLstEvent } from "../lib/umami.utils";
 
 export const Route = createFileRoute("/")({
 	validateSearch: z.object({
@@ -27,6 +28,16 @@ function Index() {
 		url = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
 	}
 
+	//test tracking
+	const click = () => {
+		trackLstEvent("silly_click", {
+			module: "silly",
+			action: "click",
+			label: "rick rolled",
+			page: window.location.pathname,
+		});
+	};
+
 	return (
 		<div className="flex justify-center m-10 flex-col">
 			<h3 className="w-2xl text-3xl">Welcome Lst - V3</h3>
@@ -43,16 +54,18 @@ function Index() {
 					<b>
 						<strong>Click</strong>
 					</b>
-				</a>
-				<a
-					href={`https://www.youtube.com/watch?v=dQw4w9WgXcQ`}
-					target="_blank"
-					rel="noopener"
-				>
-					<b>
-						<strong> Here</strong>
-					</b>
-				</a>
+				</a>{" "}
+				<button onClick={click}>
+					<a
+						href={`https://www.youtube.com/watch?v=dQw4w9WgXcQ`}
+						target="_blank"
+						rel="noopener"
+					>
+						<b>
+							<strong> Here</strong>
+						</b>
+					</a>
+				</button>
 			</p>
 		</div>
 	);