Add GA events

Author: ajhai

llmstack/client/src/App.js

@@ -52,7 +52,9 @@ export default function App({ children }) {
   const location = useLocation();
 
   useEffect(() => {
-    ReactGA.initialize("G-WV60HC9CHD");
+    ReactGA.initialize(
+      process.env.REACT_APP_GA_MEASUREMENT_ID || "G-WV60HC9CHD",
+    );
     ReactGA.send({
       hitType: "pageview",
       page: location.pathname + location.search,

llmstack/client/src/components/Connections.jsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import ReactGA from "react-ga4";
 import { Button, Stack, Typography } from "@mui/material";
 import { AddOutlined } from "@mui/icons-material";
 import AddConnectionModal from "./connections/AddConnectionModal";
@@ -74,6 +75,13 @@ function Connections() {
             });
             reject(err);
           });
+
+        ReactGA.event({
+          category: "Connections",
+          action: "Create Connection",
+          label: conn.connection_type_slug,
+          transport: "beacon",
+        });
       }
     });
   };

llmstack/client/src/components/apps/AgentRenderer.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactGA from "react-ga4";
 import { Avatar, Box, Chip, Fab, Grid, Stack, Typography } from "@mui/material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { Liquid } from "liquidjs";
@@ -511,6 +512,13 @@ export function AgentRenderer({ app, isMobile, embed = false, ws }) {
         session_id: appSessionId,
       }),
     );
+
+    ReactGA.event({
+      category: "App",
+      action: "Run Agent",
+      label: app?.name,
+      transport: "beacon",
+    });
   };
 
   useEffect(() => {

llmstack/client/src/components/apps/AppTemplatesList.jsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import ReactGA from "react-ga4";
 import { Card, CardContent, Chip, Stack, Typography } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import { axios } from "../../data/axios";
@@ -98,6 +99,13 @@ export function AppTemplatesList() {
             key={index}
             style={{ maxWidth: "300px", cursor: "pointer" }}
             onClick={() => {
+              ReactGA.event({
+                category: "App Template",
+                action: "Select",
+                label: template.slug,
+                transport: "beacon",
+              });
+
               navigate(`/apps/templates/${template.slug}`);
             }}
           >

llmstack/client/src/components/apps/WebAppRenderer.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import ReactGA from "react-ga4";
 import { Button } from "@mui/material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { CircularProgress, Grid } from "@mui/material";
@@ -164,6 +165,13 @@ export function WebAppRenderer({ app, ws }) {
       }),
     );
     setIsRunning(true);
+
+    ReactGA.event({
+      category: "App",
+      action: "Run Web App",
+      label: app?.name,
+      transport: "beacon",
+    });
   };
 
   return (

llmstack/client/src/components/apps/WebChatRender.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactGA from "react-ga4";
 import { Avatar, Chip, Fab, Grid, Stack, Typography } from "@mui/material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { Liquid } from "liquidjs";
@@ -324,6 +325,13 @@ export function WebChatRender({ app, isMobile, embed = false, ws }) {
         session_id: appSessionId,
       }),
     );
+
+    ReactGA.event({
+      category: "App",
+      action: "Run Chat App",
+      label: app?.name,
+      transport: "beacon",
+    });
   };
 
   useEffect(() => {

llmstack/client/src/pages/AppRender.jsx

@@ -35,11 +35,14 @@ function AppRenderPage({ headless = false }) {
   }/ws`;
 
   useEffect(() => {
-    ReactGA.initialize("G-WV60HC9CHD", {
-      gaOptions: {
-        cookieFlags: "SameSite=None;Secure",
+    ReactGA.initialize(
+      process.env.REACT_APP_GA_MEASUREMENT_ID || "G-WV60HC9CHD",
+      {
+        gaOptions: {
+          cookieFlags: "SameSite=None;Secure",
+        },
       },
-    });
+    );
   }, []);
 
   const isMobile = useRecoilValue(isMobileState);