* Refactored analytics

* Added tracking disclaimer
* Usage events are now tracked to improve usage

package-lock.json

@@ -34,6 +34,7 @@
         "eslint-config-google": "^0.14.0",
         "eslint-plugin-simple-import-sort": "^8.0.0",
         "file-loader": "^6.2.0",
+        "ga-gtag": "^1.1.7",
         "hsv-rgb": "^1.0.0",
         "html-webpack-plugin": "^5.5.0",
         "i18next": "^22.4.14",
@@ -4925,6 +4926,12 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/ga-gtag": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/ga-gtag/-/ga-gtag-1.1.7.tgz",
+      "integrity": "sha512-fT/D87hhuNIAmEB2z9mxz88gMFYc1olpX/fETHidZ51sYJ4y6OFch8HZ0DoNWPGFw1BCHB0fqt68dUWvd8kM1Q==",
+      "dev": true
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -14573,6 +14580,12 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "ga-gtag": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/ga-gtag/-/ga-gtag-1.1.7.tgz",
+      "integrity": "sha512-fT/D87hhuNIAmEB2z9mxz88gMFYc1olpX/fETHidZ51sYJ4y6OFch8HZ0DoNWPGFw1BCHB0fqt68dUWvd8kM1Q==",
+      "dev": true
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -49,6 +49,7 @@
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "file-loader": "^6.2.0",
+    "ga-gtag": "^1.1.7",
     "hsv-rgb": "^1.0.0",
     "html-webpack-plugin": "^5.5.0",
     "i18next": "^22.4.14",

src/analytics.ts

@@ -0,0 +1,28 @@
+import { AppConsole } from './ui/console';
+const gtag = require('ga-gtag');
+
+export class AppAnalytics {
+    private _ready: boolean;
+
+    private static _instance: AppAnalytics;
+    public static get Get() {
+        return this._instance || (this._instance = new this());
+    }
+
+    private constructor() {
+        this._ready = false;
+    }
+
+    public static Init() {
+        gtag.install('G-W0SCWQ7HGJ', { 'send_page_view': true });
+        gtag.gtag('config', 'G-W0SCWQ7HGJ', { 'debug_mode': true });
+        this.Get._ready = true;
+    }
+
+    public static Event(id: string, attributes?: any) {
+        if (this.Get._ready) {
+            console.log('[Analytics]: Tracked event', id, attributes);
+            gtag.gtag('event', id, Object.assign(attributes ?? {}, { 'debug_mode': true }));
+        }
+    }
+}

src/app_context.ts

@@ -1,4 +1,5 @@
 import '../styles.css';
+import { AppAnalytics } from './analytics';
 
 import { FallableBehaviour } from './block_mesh';
 import { ArcballCamera } from './camera';
@@ -38,6 +39,8 @@ export class AppContext {
     }
 
     public static async init() {
+        AppAnalytics.Init();
+
         await Localiser.Get.init();
         AppConsole.info(LOC('init.initialising'));
 
@@ -81,11 +84,13 @@ export class AppContext {
     private async _import(): Promise<boolean> {
         // Gather data from the UI to send to the worker
         const components = UI.Get.layout.import.components;
+        let filetype: string;
 
         AppConsole.info(LOC('import.importing_mesh'));
         {
             // Instruct the worker to perform the job and await the result
             const file = components.input.getValue();
+            filetype = file.type;
 
             const resultImport = await this._workerController.execute({
                 action: 'Import',
@@ -131,6 +136,9 @@ export class AppContext {
         }
         AppConsole.success(LOC('import.rendered_mesh'));
 
+        AppAnalytics.Event('import', {
+            'filetype': filetype,
+        });
         return true;
     }
 
@@ -163,6 +171,7 @@ export class AppContext {
         }
         AppConsole.success(LOC('materials.updated_materials'));
 
+        AppAnalytics.Event('materials')
         return true;
     }
 
@@ -222,6 +231,14 @@ export class AppContext {
         }
         AppConsole.success(LOC('voxelise.rendered_voxel_mesh'));
 
+        AppAnalytics.Event('voxelise', {
+            constraintAxis: components.constraintAxis.getValue(),
+            voxeliser: components.voxeliser.getValue(),
+            size: components.size.getValue(),
+            useMultisampleColouring: components.multisampleColouring.getValue(),
+            enableAmbientOcclusion: components.ambientOcclusion.getValue(),
+            voxelOverlapRule: components.voxelOverlapRule.getValue(),
+        });
         return true;
     }
 
@@ -287,6 +304,16 @@ export class AppContext {
         }
         AppConsole.success(LOC('assign.rendered_block_mesh'));
 
+        AppAnalytics.Event('assign', {
+            dithering: components.dithering.getValue(),
+            ditheringMagnitude: components.ditheringMagnitude.getValue(),
+            fallable: components.fallable.getValue() as FallableBehaviour,
+            resolution: Math.pow(2, components.colourAccuracy.getValue()),
+            calculateLighting: components.calculateLighting.getValue(),
+            lightThreshold: components.lightThreshold.getValue(),
+            contextualAveraging: components.contextualAveraging.getValue(),
+            errorWeight: components.errorWeight.getValue() / 10,
+        });
         return true;
     }
 
@@ -327,6 +354,9 @@ export class AppContext {
         }
         AppConsole.success(LOC('export.exported_structure'));
 
+        AppAnalytics.Event('export', {
+            exporter: components.export.getValue(),
+        });
         return true;
     }
 

src/ui/components/header.ts

@@ -67,10 +67,13 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
                     ${this._discordButton.generateHTML()}
                 </div>
             </div>
-            <div class="col-container header-cols">
+            <div class="row-container header-cols">
-                <div class="col-container" style="padding-top: 5px;" id="header-desc">
+                <div class="row-container" style="padding-top: 5px;" id="header-desc">
                     ${LOC('description')}
                 </div>
+                <div class="row-container privacy-disclaimer" style="padding-top: 5px;">
+                    This site may use cookies and similar tracking technologies (like web beacons) to access and store information about usage.
+                </div>
             </div>
         `;
     }

styles.css

@@ -734,4 +734,9 @@ a {
 
 .hover-text {
   position: relative;
+}
+
+.privacy-disclaimer {
+  font-size: var(--font-size-small);
+  color: var(--text-dim);
 }

template.html

@@ -1,20 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <!-- Google tag (gtag.js) -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-W0SCWQ7HGJ"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-W0SCWQ7HGJ");
-    </script>
     <meta charset="utf8" />
     <title>ObjToSchematic Web</title>
     <meta