chore(project): add google analytics to web and electron (#1882)

netless-io · Mar 27, 2023 · 664a419 · 664a419
1 parent 1f859b6
commit 664a419
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 7 deletions.
diff --git a/desktop/renderer-app/index.html b/desktop/renderer-app/index.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+  <head><!-- FLAG_GTAG -->
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json
@@ -4,13 +4,13 @@
   "private": true,
   "homepage": ".",
   "scripts": {
-    "start": "cross-env NODE_ENV=development vite",
+    "start": "cross-env vite",
     "start:cn": "cross-env FLAT_REGION=CN pnpm start",
     "start:us": "cross-env FLAT_REGION=US pnpm start",
-    "build": "cross-env NODE_ENV=production NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
+    "build": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192\" vite build",
     "build:cn": "cross-env FLAT_REGION=CN pnpm build",
     "build:us": "cross-env FLAT_REGION=US pnpm build",
-    "build:analyzer": "cross-env NODE_ENV=production ANALYZER=true NODE_OPTIONS=\"--max-old-space-size=6144\" vite build"
+    "build:analyzer": "cross-env ANALYZER=true NODE_OPTIONS=\"--max-old-space-size=6144\" vite build"
   },
   "dependencies": {
     "@ant-design/icons": "^4.7.0",

diff --git a/desktop/renderer-app/scripts/vite-plugin-html-gtag.ts b/desktop/renderer-app/scripts/vite-plugin-html-gtag.ts
@@ -0,0 +1,53 @@
+import type { Plugin } from "vite";
+
+export function injectGtag(): Plugin {
+    let isProduction = false;
+    return {
+        name: "flat:gtag",
+        enforce: "pre",
+        configResolved(config) {
+            isProduction = config.isProduction;
+        },
+        transformIndexHtml: {
+            enforce: "pre",
+            transform(originalHTML) {
+                const html = originalHTML.replace("<!-- FLAG_GTAG -->", gtag(isProduction));
+
+                return {
+                    html,
+                    tags: [],
+                };
+            },
+        },
+    };
+}
+
+// cspell:disable
+const FLAT_ELECTRON_DEV = `
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8G3P2T2DBF"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-8G3P2T2DBF');
+    </script>
+`;
+
+const FLAT_ELECTRON_PROD = `
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-1VSFBNGGCC"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-1VSFBNGGCC');
+    </script>
+`;
+// cspell:enable
+
+const gtag = (isProduction: boolean): string => {
+    return isProduction ? FLAT_ELECTRON_PROD : FLAT_ELECTRON_DEV;
+};
diff --git a/desktop/renderer-app/vite.config.ts b/desktop/renderer-app/vite.config.ts
@@ -7,6 +7,7 @@ import path from "path";
 import { dotenv } from "@netless/flat-vite-plugins/dotenv";
 import { reactVirtualized } from "@netless/flat-vite-plugins/react-virtualized";
 import { electron } from "./scripts/vite-plugin-electron";
+import { injectGtag } from "./scripts/vite-plugin-html-gtag";
 import { rootNodeModules, rendererPath } from "../../scripts/constants";
 import { autoChooseConfig } from "../../scripts/utils/auto-choose-config";
 
@@ -27,7 +28,7 @@ export default defineConfig((): UserConfig => {
         reactPlugin,
         dotenv(autoChooseConfig()),
         reactVirtualized(),
-        // electron(),
+        injectGtag(),
         copy({
             targets: [
                 /**

diff --git a/web/flat-web/scripts/vite-plugin-html-gtag.ts b/web/flat-web/scripts/vite-plugin-html-gtag.ts
@@ -34,6 +34,18 @@ const FLAT_WEB_DEV = `
     </script>
 `;
 
+const FLAT_WEB_PROD = `
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DJ53HC6J40"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-DJ53HC6J40');
+    </script>
+`;
+
 const gtag = (isProduction: boolean): string => {
-    return isProduction ? "" : FLAT_WEB_DEV;
+    return isProduction ? FLAT_WEB_PROD : FLAT_WEB_DEV;
 };
diff --git a/web/flat-web/vite.config.ts b/web/flat-web/vite.config.ts
@@ -5,10 +5,10 @@ import { reactVirtualized } from "@netless/flat-vite-plugins/react-virtualized";
 import { injectHtmlHash } from "./scripts/vite-plugin-html-hash";
 import { version } from "./scripts/vite-plugin-version";
 import { inlineAssets } from "./scripts/vite-plugin-inline-assets";
+import { injectGtag } from "./scripts/vite-plugin-html-gtag";
 import { mainPackageJSONPath } from "../../scripts/constants";
 import { autoChooseConfig } from "../../scripts/utils/auto-choose-config";
 import viteCompression from "vite-plugin-compression";
-import { injectGtag } from "./scripts/vite-plugin-html-gtag";
 
 // HACK: disable dedupe in the react plugin
 // We need to do this because Flat is not a typical react project,