Analytics Tracking (nand2tetris#179)

* Tracking acceptance banner.

* Tracking for some chips buttons.

Deploying and seeing what happens?

prettier scss

web/package.json

@@ -7,14 +7,14 @@
   "license": "ISC",
   "homepage": "https://nand2tetris.github.io/web-ide",
   "devDependencies": {
-    "@nand2tetris/components": "*",
-    "@nand2tetris/projects": "*",
-    "@nand2tetris/simulator": "*",
     "@davidsouther/jiffies": "^2.0.5",
     "@lingui/cli": "^3.14.0",
     "@lingui/macro": "^3.14.0",
     "@lingui/react": "^3.14.0",
     "@monaco-editor/react": "^4.4.5",
+    "@nand2tetris/components": "*",
+    "@nand2tetris/projects": "*",
+    "@nand2tetris/simulator": "*",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -95,5 +95,8 @@
     "transformIgnorePatterns": [
       "node_modules/(?!@davidsouther)"
     ]
+  },
+  "dependencies": {
+    "react-ga4": "^1.4.1"
   }
 }

web/src/App.context.ts

@@ -2,6 +2,7 @@ import { createContext, useCallback, useState } from "react";
 import { FileSystem } from "@davidsouther/jiffies/lib/esm/fs.js";
 import { useDialog } from "./shell/dialog";
 import { useFilePicker } from "./shell/file_select";
+import { useTracking } from "./tracking";
 
 export type Theme = "light" | "dark" | "system";
 
@@ -33,6 +34,7 @@ export function useAppContext(fs: FileSystem = new FileSystem()) {
     monaco: useMonaco(),
     settings: useDialog(),
     filePicker: useFilePicker(),
+    tracking: useTracking(),
     theme,
     setTheme,
   };
@@ -67,6 +69,22 @@ export const AppContext = createContext<ReturnType<typeof useAppContext>>({
     },
     isOpen: false,
   },
+  tracking: {
+    canTrack: false,
+    haveAsked: false,
+    accept() {
+      return undefined;
+    },
+    reject() {
+      return undefined;
+    },
+    trackEvent() {
+      return undefined;
+    },
+    trackPage() {
+      return undefined;
+    },
+  },
   theme: "system",
   setTheme() {
     return undefined;

web/src/App.tsx

@@ -24,6 +24,7 @@ import { FilePicker } from "./shell/file_select";
 
 import "./pico/flex.scss";
 import "./pico/pico.scss";
+import { TrackingBanner } from "./tracking";
 
 i18n.load("en", messages);
 i18n.load("en-PL", plMessages);
@@ -72,6 +73,7 @@ function App() {
               </Suspense>
             </main>
             <Footer />
+            <TrackingBanner />
           </Router>
         </AppContext.Provider>
       </BaseContext.Provider>

web/src/pages/chip.tsx

@@ -36,18 +36,48 @@ import { BaseContext } from "@nand2tetris/components/stores/base.context.js";
 
 export const Chip = () => {
   const { fs, setStatus } = useContext(BaseContext);
-  const { filePicker } = useContext(AppContext);
+  const { filePicker, tracking } = useContext(AppContext);
   const { state, actions, dispatch } = useChipPageStore();
 
   const [hdl, setHdl] = useStateInitializer(state.files.hdl);
   const [tst, setTst] = useStateInitializer(state.files.tst);
   const [cmp, setCmp] = useStateInitializer(state.files.cmp);
   const [out] = useStateInitializer(state.files.out);
 
+  useEffect(() => {
+    tracking.trackPage("/chip");
+  }, [tracking]);
+
   const saveChip = () => {
     actions.saveChip(hdl);
   };
 
+  useEffect(() => {
+    tracking.trackEvent("action", "setProject", state.controls.project);
+    tracking.trackEvent("action", "setChip", state.controls.chipName);
+  }, []);
+
+  const setProject = useCallback(
+    (project: keyof typeof CHIP_PROJECTS) => {
+      actions.setProject(project);
+      tracking.trackEvent("action", "setProject", project);
+    },
+    [actions, tracking]
+  );
+
+  const setChip = useCallback(
+    (chip: string) => {
+      actions.setChip(chip);
+      tracking.trackEvent("action", "setChip", chip);
+    },
+    [actions, tracking]
+  );
+
+  const doEval = useCallback(() => {
+    actions.eval();
+    tracking.trackEvent("action", "eval");
+  }, [actions, tracking]);
+
   const compile = useRef<(files?: Partial<Files>) => void>(() => undefined);
   compile.current = async (files: Partial<Files> = {}) => {
     await actions.updateFiles({
@@ -99,8 +129,10 @@ export const Chip = () => {
     () => ({
       toggle() {
         actions.clock();
+        tracking.trackEvent("action", "toggleClock");
       },
       reset() {
+        tracking.trackEvent("action", "resetClock");
         actions.reset();
       },
     }),
@@ -124,7 +156,7 @@ export const Chip = () => {
         <select
           value={state.controls.project}
           onChange={({ target: { value } }) => {
-            actions.setProject(value as keyof typeof CHIP_PROJECTS);
+            setProject(value as keyof typeof CHIP_PROJECTS);
           }}
           data-testid="project-picker"
         >
@@ -137,7 +169,7 @@ export const Chip = () => {
         <select
           value={state.controls.chipName}
           onChange={({ target: { value } }) => {
-            actions.setChip(value);
+            setChip(value);
           }}
           data-testid="chip-picker"
         >
@@ -192,11 +224,7 @@ export const Chip = () => {
 
   const chipButtons = (
     <fieldset role="group">
-      <button
-        onClick={actions.eval}
-        onKeyDown={actions.eval}
-        disabled={!state.sim.pending}
-      >
+      <button onClick={doEval} onKeyDown={doEval} disabled={!state.sim.pending}>
         <Trans>Eval</Trans>
       </button>
       <button
@@ -252,8 +280,16 @@ export const Chip = () => {
     </Panel>
   );
 
-  const [selectedTestTab, setSelectedTestTab] = useState<"tst" | "cmp" | "out">(
-    "tst"
+  const [selectedTestTab, doSetSelectedTestTab] = useState<
+    "tst" | "cmp" | "out"
+  >("tst");
+
+  const setSelectedTestTab = useCallback(
+    (tab: typeof selectedTestTab) => {
+      doSetSelectedTestTab(tab);
+      tracking.trackEvent("tab", "change", tab);
+    },
+    [tracking]
   );
 
   const testPanel = (

web/src/shell/settings.tsx

@@ -7,10 +7,12 @@ import { AppContext } from "../App.context";
 
 import "../pico/button-group.scss";
 import "../pico/property.scss";
+import { TrackingDisclosure } from "src/tracking";
 
 export const Settings = () => {
   const { fs, setStatus } = useContext(BaseContext);
-  const { settings, monaco, theme, setTheme } = useContext(AppContext);
+  const { settings, monaco, theme, setTheme, tracking } =
+    useContext(AppContext);
 
   const writeLocale = useMemo(
     () => (locale: string) => {
@@ -169,6 +171,28 @@ export const Settings = () => {
                 </label>
               </fieldset>
             </dd>
+            <dt>
+              <Trans>Tracking</Trans>
+            </dt>
+            <dd>
+              <label>
+                <input
+                  type="checkbox"
+                  name="switch"
+                  role="switch"
+                  checked={tracking.canTrack}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      tracking.accept();
+                    } else {
+                      tracking.reject();
+                    }
+                  }}
+                />
+                <Trans>Allow anonymous interaction tracking</Trans>
+                <TrackingDisclosure />
+              </label>
+            </dd>
           </dl>
         </main>
       </article>

web/src/tracking.scss

@@ -0,0 +1,21 @@
+#trackingBanner {
+  background-color: ghostwhite;
+  border-top: 1px solid black;
+  position: absolute;
+  padding: var(--spacing);
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  [role="button"] {
+    &.accept {
+      color: black;
+      background-color: lightgreen;
+    }
+
+    &.reject {
+      color: black;
+      background-color: lightpink;
+    }
+  }
+}