add analytics

babel.config.js

@@ -1,21 +1,57 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      { targets: { firefox: "70", chrome: "78", electron: "8" } },
+module.exports = (api) => {
+  const target = api.env();
+
+  // Browser extension (full)
+  if (target === "extension") {
+    return {
+      presets: [
+        ["@babel/preset-env", { targets: { firefox: "70", chrome: "78" } }],
+        ...guiPresets,
+      ],
+      plugins: [
+        ...guiPlugins,
+        [
+          "babel-plugin-transform-remove-imports",
+          { test: /^(electron|fs|path)\/?/ },
+        ],
+      ],
+    };
+  }
+
+  // Electron (panel)
+  if (target === "electron") {
+    return {
+      presets: [
+        ["@babel/preset-env", { targets: { electron: "9" } }],
+        ...guiPresets,
+      ],
+      plugins: [...guiPlugins],
+    };
+  }
+
+  // Electron (main.js)
+  return {
+    presets: [
+      ["@babel/preset-env", { targets: { node: "10" } }],
+      "@babel/preset-typescript",
     ],
-    "@babel/preset-react",
-    "@babel/preset-typescript",
-  ],
-  plugins: [
-    "inline-react-svg",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-optional-chaining",
-    [
-      "babel-plugin-styled-components",
-      {
-        fileName: false,
-      },
+    plugins: [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-proposal-optional-chaining",
     ],
-  ],
+  };
 };
+
+const guiPresets = ["@babel/preset-react", "@babel/preset-typescript"];
+
+const guiPlugins = [
+  "inline-react-svg",
+  "@babel/plugin-proposal-class-properties",
+  "@babel/plugin-proposal-optional-chaining",
+  [
+    "babel-plugin-styled-components",
+    {
+      fileName: false,
+    },
+  ],
+];

package.json

@@ -75,6 +75,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/fast-json-stable-stringify": "^2.0.0",
+    "@types/google.analytics": "^0.0.40",
     "@types/graphql": "^14.5.0",
     "@types/jest": "^25.2.2",
     "@types/jest-environment-puppeteer": "^4.3.1",
@@ -98,6 +99,7 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-inline-react-svg": "andyrichardson/babel-plugin-inline-react-svg#refs",
     "babel-plugin-styled-components": "^1.10.7",
+    "babel-plugin-transform-remove-imports": "^1.3.2",
     "bestzip": "^2.1.5",
     "clean-webpack-plugin": "^3.0.0",
     "codemirror": "^5.53.2",

src/extension/content_script.ts

@@ -42,3 +42,5 @@ const handleMessage = (message: ExchangeMessage) => {
 const handleDisconnect = () => {
   connection = undefined;
 };
+
+window.addEventListener("keypress", console.log);

src/extension/manifest.json

@@ -31,8 +31,8 @@
     }
   },
   "devtools_page": "devtools.html",
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
-  "content_security_policy": "script-src 'self'; object-src 'self'",
+  "permissions": ["file:///*", "http://*/*", "https://*/*", "storage"],
+  "content_security_policy": "script-src 'self' https://www.google-analytics.com/analytics.js; object-src 'self'",
   "application": {
     "gecko": {
       "id": "{c11f3a69-f159-4708-b044-853066c2d2fe}",

src/panel/App.tsx

@@ -18,16 +18,19 @@ import {
   ExplorerProvider,
   useDevtoolsContext,
   TimelineProvider,
+  TelemetryProvider,
 } from "./context";
 
 export const App = () => {
   return (
     <ThemeProvider theme={theme}>
-      <ErrorBoundary>
-        <DevtoolsProvider>
-          <AppRoutes />
-        </DevtoolsProvider>
-      </ErrorBoundary>
+      <TelemetryProvider>
+        <ErrorBoundary>
+          <DevtoolsProvider>
+            <AppRoutes />
+          </DevtoolsProvider>
+        </ErrorBoundary>
+      </TelemetryProvider>
       <GlobalStyle />
     </ThemeProvider>
   );

src/panel/context/Telemetry.tsx

@@ -0,0 +1,138 @@
+import React, {
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useState,
+  useCallback,
+  useMemo,
+  FC,
+  useEffect,
+  useRef,
+} from "react";
+import { nanoid } from "nanoid";
+import * as storage from "../util/storage";
+
+type Page =
+  | "explorer"
+  | "events"
+  | "request"
+  | "disconnected"
+  | "error"
+  | "mismatch";
+interface TelemetryContextValue {
+  state: "enabled" | "disabled" | "pending";
+  disableTelemetry: () => void;
+  enableTelemetry: () => void;
+  setPage: (page: Page) => void;
+}
+
+const TelemetryContext = createContext<TelemetryContextValue>(null as any);
+
+export const useTelemetry = () => useContext(TelemetryContext);
+
+export const usePageTelemetry = (page: Page) => {
+  const { setPage } = useTelemetry();
+
+  useEffect(() => {
+    setPage(page);
+  }, []);
+};
+
+export const TelemetryProvider: FC = ({ children }) => {
+  const active = useRef(false);
+  const [state, setState] = useState<TelemetryContextValue["state"]>();
+
+  useLayoutEffect(() => {
+    storage.get("allowTelemetry").then((telemetryEnabled) =>
+      setState(() => {
+        if (telemetryEnabled === undefined) {
+          return "pending";
+        }
+
+        if (telemetryEnabled === false) {
+          return "disabled";
+        }
+
+        return "enabled";
+      })
+    );
+  }, []);
+
+  useEffect(() => {
+    if (state !== "enabled") {
+      return;
+    }
+
+    (async () => {
+      startAnalytics({ clientId: await storage.get("userId") });
+      active.current = true;
+    })();
+  }, [state]);
+
+  const ga = useCallback((...args: Parameters<typeof window.ga>) => {
+    if (!active.current) {
+      return;
+    }
+
+    window.ga(...args);
+  }, []);
+
+  const enableTelemetry = useCallback(async () => {
+    await storage.set("allowTelemetry", true);
+    await storage.set("userId", nanoid());
+    setState("enabled");
+  }, []);
+
+  const disableTelemetry = useCallback(async () => {
+    await storage.set("allowTelemetry", false);
+    setState("disabled");
+  }, []);
+
+  const setPage = useCallback<TelemetryContextValue["setPage"]>(
+    (page) => {
+      console.log(active.current);
+      ga("set", "page", page);
+      ga("send", { hitType: "pageview" });
+    },
+    [ga]
+  );
+
+  const value = useMemo(
+    () => ({
+      state: state as TelemetryContextValue["state"],
+      enableTelemetry,
+      disableTelemetry,
+      setPage,
+    }),
+    [state, enableTelemetry, disableTelemetry, setPage]
+  );
+
+  if (state === undefined) {
+    return null;
+  }
+
+  return (
+    <TelemetryContext.Provider value={value}>
+      {children}
+    </TelemetryContext.Provider>
+  );
+};
+
+/** Global script to enable google analytics. */
+const startAnalytics = ({ clientId }: { clientId: string }) => {
+  window.ga =
+    window.ga || ((...args) => (window.ga.q = window.ga.q || []).push(args));
+  window.ga.l = +new Date();
+
+  ga("create", "UA-98443810-2", {
+    storage: "none",
+    clientId,
+  });
+  /*
+   * See here for explanation - https://stackoverflow.com/questions/3591847/google-analytics-from-a-file-url
+   */
+  ga("set", "checkProtocolTask", null);
+  ga("set", "checkStorageTask", null);
+  ga("set", "historyImportTask", null);
+  ga("set", "dataSource", "devtools");
+};

src/panel/context/index.ts

@@ -2,3 +2,4 @@ export * from "./Devtools";
 export * from "./Request";
 export * from "./Explorer";
 export * from "./Timeline";
+export * from "./Telemetry";

src/panel/pages/disconnected/Disconnected.tsx

@@ -1,17 +1,22 @@
 import React, { FC, ComponentProps } from "react";
 import styled, { createGlobalStyle } from "styled-components";
+import { usePageTelemetry } from "../../context";
 import Icon from "../../../assets/icon.svg";
 
-export const Disconnected: FC<ComponentProps<typeof Container>> = (props) => (
-  <>
-    <GlobalStyle />
-    <Container {...props}>
-      <Logo />
-      <Header>Waiting for exchange</Header>
-      <Hint>Make sure {"you're"} using the Urql Devtools exchange!</Hint>
-    </Container>
-  </>
-);
+export const Disconnected: FC<ComponentProps<typeof Container>> = (props) => {
+  usePageTelemetry("disconnected");
+
+  return (
+    <>
+      <GlobalStyle />
+      <Container {...props}>
+        <Logo />
+        <Header>Waiting for exchange</Header>
+        <Hint>Make sure {"you're"} using the Urql Devtools exchange!</Hint>
+      </Container>
+    </>
+  );
+};
 
 const GlobalStyle = createGlobalStyle`
   body {