analytics

skedwards88 · skedwards88 · commit 8a96efa8f997 · 2025-11-08T12:41:37.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/App.js b/src/components/App.js
@@ -14,6 +14,10 @@ import InstallOverview from "@skedwards88/shared-components/src/components/Insta
 import PWAInstall from "@skedwards88/shared-components/src/components/PWAInstall";
 import {timerInit} from "../logic/timerInit";
 import {timerReducer} from "../logic/timerReducer";
+import {getUserId} from "@skedwards88/shared-components/src/logic/getUserId";
+import {v4 as uuidv4} from "uuid";
+import {sendAnalyticsCF} from "@skedwards88/shared-components/src/logic/sendAnalyticsCF";
+import {isRunningStandalone} from "@skedwards88/shared-components/src/logic/isRunningStandalone";
 
 function parseURLQuery() {
   // Get the seed and game settings from the query params
@@ -126,6 +130,52 @@ export default function App() {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
   });
 
+  // ******
+  // Start analytics setup
+  // ******
+
+  // Store userID so I don't have to read local storage every time
+  const userId = getUserId("gribbles_uid");
+
+  // Store sessionID as a ref so I have the same session ID until app refresh
+  const sessionIdRef = React.useRef(uuidv4());
+  const sessionId = sessionIdRef.current;
+
+  // Send analytics on load
+  React.useEffect(() => {
+    sendAnalyticsCF({
+      userId,
+      sessionId,
+      analyticsToLog: [
+        {
+          eventName: "app_load",
+          // os, browser, and isMobile are parsed on the server from the user agent headers
+          screenWidth: window.screen.width,
+          screenHeight: window.screen.height,
+          isStandalone: isRunningStandalone(),
+          devicePixelRatio: window.devicePixelRatio,
+        },
+      ],
+    });
+    // Just run once on app load
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Send analytics following reducer updates, if needed
+  React.useEffect(() => {
+    const analyticsToLog = gameState.analyticsToLog;
+
+    if (!analyticsToLog || !analyticsToLog.length) {
+      return;
+    }
+
+    sendAnalyticsCF({userId, sessionId, analyticsToLog});
+  }, [gameState?.analyticsToLog, sessionId, userId]);
+
+  // ******
+  // End analytics setup
+  // ******
+
   switch (display) {
     case "settings":
       return (
diff --git a/src/index.html b/src/index.html
@@ -1,23 +1,6 @@
 <!doctype html>
 <html>
   <head lang="en">
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-YYJ7HQ3XLG"
-    ></script>
-    <script>
-      const host = window.location.hostname;
-      if (host != "localhost") {
-        window.dataLayer = window.dataLayer || [];
-        function gtag() {
-          dataLayer.push(arguments);
-        }
-        gtag("js", new Date());
-
-        gtag("config", "G-YYJ7HQ3XLG");
-      }
-    </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Gribbles</title>
diff --git a/src/logic/gameInit.js b/src/logic/gameInit.js
@@ -73,7 +73,12 @@ export function gameInit({
     savedGameState.easyMode == easyMode &&
     savedGameState.seed === seed
   ) {
-    return {...savedGameState, playedIndexes: [], result: ""};
+    return {
+      ...savedGameState,
+      playedIndexes: [],
+      result: "",
+      analyticsToLog: [],
+    };
   }
 
   // use the specified settings, otherwise check local storage, otherwise use default
@@ -98,5 +103,14 @@ export function gameInit({
     allWords: allWords,
     easyMode: easyMode,
     seed: seed,
+    analyticsToLog: [
+      {
+        eventName: "new_game",
+        eventInfo: {
+          minWordLength,
+          easyMode,
+        },
+      },
+    ],
   };
 }
