feat(analytics): integrate Google Analytics for tracking page views

- Added analytics module to load Google Analytics (GA4) only when a measurement ID is set.
- Implemented functions to initialize analytics, track virtual page views, and send events.
- Updated App component to track virtual page views based on active view state.

Author: Daniel-Robbins

packages/web/src/App.tsx

@@ -27,6 +27,7 @@ import { ResizeHandle } from "./components/ResizeHandle";
 import { useIsMobile } from "./hooks/useIsMobile";
 import { MobileLayout } from "./components/MobileLayout";
 import { dlog } from "./debug-log";
+import { gtagPageView } from "./analytics";
 
 export default function App() {
   const [state, dispatch] = useReducer(appReducer, initialState, (init): AppState => {
@@ -85,6 +86,11 @@ export default function App() {
     localStorage.setItem("botschat_active_view", state.activeView);
   }, [state.activeView]);
 
+  // Google Analytics: track virtual page views for SPA tabs
+  useEffect(() => {
+    gtagPageView(state.activeView);
+  }, [state.activeView]);
+
   // Persist selected cron task for automations view
   useEffect(() => {
     if (state.selectedCronTaskId) {

packages/web/src/analytics.ts

@@ -0,0 +1,57 @@
+/**
+ * Google Analytics (GA4). Only loads when VITE_GA_MEASUREMENT_ID is set (e.g. in .env.production).
+ * Set VITE_GA_MEASUREMENT_ID to your GA4 Measurement ID (e.g. G-XXXXXXXXXX) to enable.
+ */
+
+declare global {
+  interface Window {
+    dataLayer: unknown[];
+    gtag: (...args: unknown[]) => void;
+  }
+}
+
+const MEASUREMENT_ID = import.meta.env.VITE_GA_MEASUREMENT_ID as string | undefined;
+
+function loadGtag(): boolean {
+  if (!MEASUREMENT_ID || typeof window === "undefined") return false;
+  if (window.gtag) return true;
+
+  window.dataLayer = window.dataLayer || [];
+  window.gtag = function gtag() {
+    window.dataLayer.push(arguments);
+  };
+  window.gtag("js", new Date());
+  window.gtag("config", MEASUREMENT_ID);
+
+  const script = document.createElement("script");
+  script.async = true;
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${MEASUREMENT_ID}`;
+  document.head.appendChild(script);
+  return true;
+}
+
+let initialized = false;
+
+export function initAnalytics(): void {
+  if (initialized) return;
+  initialized = loadGtag();
+}
+
+export function isAnalyticsEnabled(): boolean {
+  return initialized && !!window.gtag;
+}
+
+/**
+ * Send a page_view or custom event to GA4. Use after route/view changes in the SPA.
+ */
+export function gtagEvent(name: string, params?: Record<string, string>): void {
+  if (!MEASUREMENT_ID || !window.gtag) return;
+  window.gtag("event", name, params);
+}
+
+/**
+ * Track a virtual page view (e.g. "Messages" / "Automations" tab).
+ */
+export function gtagPageView(page: string): void {
+  gtagEvent("page_view", { page_path: `/${page}`, page_title: page });
+}

packages/web/src/main.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import { initAnalytics } from "./analytics";
+
+initAnalytics();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>