Analytics

package.json

@@ -42,6 +42,7 @@
     "electron-updater": "^4.3.8",
     "express": "^4.17.1",
     "prerender-node": "^3.2.5",
+    "react-ga": "^3.3.0",
     "react-use": "^17.1.1",
     "serialport": "9.0.2"
   },

src/index.js

@@ -7,6 +7,7 @@ import * as SentryReact from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import React from "react";
 import ReactDOM from "react-dom";
+import ReactGA from 'react-ga';
 import { hot } from "react-hot-loader";
 
 import isDev from "~/utils/isDev";
@@ -16,6 +17,13 @@ import Main from "./main";
 require("@tailwindcss/ui");
 require("./index.pcss");
 
+ReactGA.initialize('UA-131034779-4', {
+  gaOptions: {
+    siteSpeedOptions: 100
+  }
+});
+ReactGA.pageview(window.location.pathname + window.location.search);
+
 SentryReact.init({
   dsn:
     !isDev() &&
@@ -30,10 +38,3 @@ if (isDev()) console.log("Running development environment");
 const HotMain = hot(module)((params) => <Main {...params} />);
 ReactDOM.render(<HotMain />, document.getElementById("root"));
 module.hot?.accept();
-
-window.dataLayer = window.dataLayer || [];
-function gtag() {
-  window.dataLayer.push(arguments);
-}
-gtag("js", new Date());
-gtag("config", "UA-131034779-4");

src/main/hooks/useBuild.js

@@ -1,3 +1,5 @@
+import ReactGA from "react-ga";
+
 import BuildsContainer from "~/containers/builds";
 import NetworkContainer from "~/containers/network";
 import { buildHex } from "~/utils/code";
@@ -16,9 +18,21 @@ const useBuild = (code, config) => {
 
     setIsBuilding(code, config, true);
 
-    buildHex(code, config, simulator).then((build) =>
-      setBuild(code, config, build)
-    );
+    ReactGA.event({
+      category: "Emulator",
+      action: "Emulator build"
+    });
+
+    let t = new Date();
+    buildHex(code, config, simulator).then((build) => {
+      ReactGA.timing({
+        category: 'Emulator',
+        variable: 'build',
+        value: new Date() - t,
+        label: 'Emulator build time'
+      });
+      setBuild(code, config, build);
+    });
   }, [code, config, simulator]);
 
   return getBuild(code, config);

src/main/index.js

@@ -20,6 +20,11 @@ const Ide = React.lazy(() => import("./ide"));
 
 const SpecificRouter = isElectron() ? HashRouter : Router;
 
+history.listen((location) => {
+  window.ga('set', 'page', location.pathname + location.search);
+  window.ga('send', 'pageview');
+});
+
 const Main = () => {
   const href = document.location.href;
   const marketing = href === "https://www.soulmatelights.com/";

src/main/utils/code.js

@@ -1,4 +1,5 @@
 import { dataPin } from "@elliottkember/leduino";
+import ReactGA from 'react-ga';
 
 import renameDefines from "~/utils/replaceDefines";
 
@@ -238,11 +239,21 @@ export async function getFullBuildAsBlob(source, firmwareUrl) {
 export async function getFullBuild(source, firmwareUrl) {
   const body = JSON.stringify({ sketch: source });
   console.log("[getFullBuild]", { body });
+
+  const t = new Date();
+
   const res = await window.fetch(firmwareUrl, {
     ...options,
     body,
   });
 
+  ReactGA.timing({
+    category: 'Firmware',
+    variable: 'build',
+    value: new Date() - t,
+    label: 'Firmware build time'
+  });
+
   console.log("[getFullBuild]", { res });
 
   if (!res.ok) {

yarn.lock

@@ -11301,6 +11301,11 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-ga@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
+  integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"