better

src/App.tsx

@@ -17,6 +17,7 @@ import Header from "./components/Header";
 import TableOfContentsPage from "./pages/TableOfContentsPage";
 import AccountPage from "./pages/AccountPage";
 import { useEffect } from "react";
+import { isProd } from "./lib/isProd";
 
 import ReactGA from "react-ga";
 import { useUser } from "./user-context";
@@ -26,9 +27,7 @@ const chapters = content.reduce((chapters, item) => (
     : [...chapters, ...item.chapters]
 ), []);
 
-const prod = document.location.hostname === "grammar.lingdocs.com";
+if (isProd) {
-
-if (prod) {
   ReactGA.initialize("UA-196576671-2");
   ReactGA.set({ anonymizeIp: true });
 }
@@ -37,7 +36,7 @@ function App(props: RouteComponentProps) {
   const [navOpen, setNavOpen] = useState(false);
   const { user } = useUser();
   function logAnalytics() {
-    if (prod && !(user?.admin)) {
+    if (isProd && !(user?.admin)) {
       ReactGA.pageview(window.location.pathname);
     };
   }

src/games/GameCore.tsx

@@ -19,6 +19,7 @@ import {
     Types,
 } from "@lingdocs/pashto-inflector";
 import ReactGA from "react-ga";
+import { isProd } from "../lib/isProd";
 const errorVibration = 200;
 
 function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, id }:{
@@ -37,14 +38,20 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
     const [questionBox, setQuestionBox] = useState<QuestionGenerator<T>>(questions());
     const [timerKey, setTimerKey] = useState<number>(1);
 
+    function logGameEvent(action: string) {
+        if (isProd && !(user?.admin)) {
+            ReactGA.event({
+                category: "Game",
+                action: `${action} - ${id}`,
+                label: id,
+            });
+        }
+    }
+
     function handleCallback(correct: true | JSX.Element) {
         if (correct === true) handleAdvance();
         else {
-            ReactGA.event({
+            logGameEvent("fail on game");
-                category: "Game",
-                action: "fail on game",
-                label: id,
-            });
             setFinish({ msg: "fail", answer: correct });
             navigator.vibrate(errorVibration);
         }
@@ -73,11 +80,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         }).catch(console.error);
     }
     function handleFinish() {
-        ReactGA.event({
+        logGameEvent("passed game")
-            category: "Game",
-            action: "passed game",
-            label: id,
-        });
         setFinish("pass");
         rewardRef.current?.rewardMe();
         if (!user) return;
@@ -93,11 +96,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         setCurrent(undefined);
     }
     function handleRestart() {
-        ReactGA.event({
+        logGameEvent("started game");
-            category: "Game",
-            action: "started game",
-            label: id,
-        });
         const newQuestionBox = questions();
         const { value } = newQuestionBox.next();
         // just for type safety -- the generator will have at least one question
@@ -108,11 +107,7 @@ function GameCore<T>({ questions, Display, timeLimit, Instructions, studyLink, i
         setTimerKey(prev => prev + 1);
     }
     function handleTimeOut() {
-        ReactGA.event({
+        logGameEvent("timeout on game")
-            category: "Game",
-            action: "timeout on game",
-            label: id,
-        });
         setFinish("time out");
         navigator.vibrate(errorVibration);
     }

src/lib/isProd.ts

@@ -0,0 +1 @@
+export const isProd = document.location.hostname === "grammar.lingdocs.com";