chore: google analytics for desktop builds

phcode-dev · Feb 3, 2024 · e3f1eec · e3f1eec
1 parent 1174c1c
commit e3f1eec
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 7 deletions.
diff --git a/src/desktop-metrics.html b/src/desktop-metrics.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Desktop Metrics logger with Google Analytics</title>
+    <script>
+        let gaReady = false;
+        function installGoogleAnalytics(analyticsID, customUserID) {
+            if(!analyticsID || !customUserID || gaReady){
+                return ;
+            }
+            // ga primer scripts
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function() {
+                window.dataLayer.push(arguments);
+                if(window.dataLayer.length > 500){
+                    window.dataLayer.splice(0, 250); // remove half the elements offline queue guard
+                }
+            }
+
+            const gaScript = document.createElement('script');
+            gaScript.async = true;
+            gaScript.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsID}`;
+            document.head.appendChild(gaScript);
+
+            gtag('js', new Date());
+            gtag('config', analyticsID, { 'user_id': customUserID });
+            gaReady = true;
+        }
+
+        async function processRequest(event) {
+            const payload = event.payload;
+            if(!gaReady) {
+                installGoogleAnalytics(payload.analyticsID, payload.customUserID);
+            }
+
+            for(let eventPayload of payload.events) {
+                gtag('event', eventPayload.eventAct, {
+                    'event_category': eventPayload.category,
+                    'event_label': eventPayload.label,
+                    'value': eventPayload.count
+                });
+            }
+        }
+        window.__TAURI__.event.listen("health", processRequest);
+        setInterval(async ()=>{
+            // close window if the metrics hidden window is the only one around.
+            const allTauriWindowsLabels  = await window.__TAURI__.invoke('_get_window_labels');
+            if(allTauriWindowsLabels.length === 1){
+                window.__TAURI__.window.getCurrent().close();
+            }
+        }, 1000);
+    </script>
+</head>
+<body>
+Phoenix Desktop Metrics emitter to GA.
+</body>
+</html>
diff --git a/src/utils/Metrics.js b/src/utils/Metrics.js
@@ -46,6 +46,18 @@ define(function (require, exports, module) {
         loggedDataForAudit = new Map();
 
     let isFirstUseDay;
+    let userID;
+
+    function _setUserID() {
+        const userIDKey = "phoenixUserPseudoID";
+        userID = window.PhStore.getItem(userIDKey);
+        if(!userID){
+            userID = crypto.randomUUID();
+            window.PhStore.setItem(userIDKey, userID);
+        }
+    }
+    _setUserID();
+
     function _setFirstDayFlag() {
         const firstUseDayKey = "healthData.firstUseDay";
         let firstBootTime = window.PhStore.getItem(firstUseDayKey);
@@ -116,14 +128,65 @@ define(function (require, exports, module) {
             event: function (){window.analytics._initData.push(arguments);}
         };}
         // for google analytics
-        window.dataLayer = window.dataLayer || [];
-        window.gtag = function(){window.dataLayer.push(arguments);};
+        if(!Phoenix.browser.isTauri) {
+            // ga is not inpage in tauri builds. see below explanation in _initGoogleAnalytics
+            window.dataLayer = window.dataLayer || [];
+            window.gtag = function(){
+                window.dataLayer.push(arguments);
+                if(window.dataLayer.length > 500){
+                    window.dataLayer.splice(0, 250); // remove half the elements(offline queue guard)
+                }
+            };
+        }
     }
 
     _createAnalyticsShims();
 
+    function _sendTauriGAEvent(analyticsID, customUserID, events=[]) {
+        window.__TAURI__.event.emit("health", {
+            analyticsID: analyticsID,
+            customUserID: customUserID,
+            events
+        });
+    }
+
+    let tauriGAEvents = new Map();
+
+    function _sendGaEvent(eventAct, category, label, count) {
+        if(Phoenix.browser.isTauri) {
+            const key = `${eventAct}:${category}:${label}}`;
+            const existingEvent = tauriGAEvents.get(key);
+            if(existingEvent) {
+                existingEvent.count = (existingEvent.count||0) + count;
+                return;
+            }
+            tauriGAEvents.set(key, {eventAct, category, label, count});
+            return;
+        }
+        gtag('event', eventAct, {
+            'event_category': category,
+            'event_label': label,
+            'value': count
+        });
+    }
+
+    const TAURI_GA_EVENT_QUEUE_INTERVAL = 3000;
+    function _sendQueuedTauriGAEvents() {
+        _sendTauriGAEvent(brackets.config.googleAnalyticsIDDesktop, userID, Array.from(tauriGAEvents.values()));
+        tauriGAEvents.clear();
+    }
+
     function _initGoogleAnalytics() {
         // Load google analytics scripts
+        if(Phoenix.browser.isTauri) {
+            // in tauri google analytics is in a hidden window instead of current page as ga only supports http and
+            // https urls and not the tauri custom protocol urls. So we have a hidden window that loads ga from a
+            // http(s) page which is usually `https://phcode.dev/desktop-metrics.html` or
+            // "http://localhost:8000/src/metrics.html" for live dev builds in tauri.
+            _sendTauriGAEvent(brackets.config.googleAnalyticsIDDesktop, userID);
+            setInterval(_sendQueuedTauriGAEvents, TAURI_GA_EVENT_QUEUE_INTERVAL);
+            return;
+        }
         let script = document.createElement('script');
         script.type = 'text/javascript';
         script.async = true;
@@ -193,11 +256,7 @@ define(function (require, exports, module) {
         if(ignoredGAEvents.includes(action)){
             return;
         }
-        gtag('event', eventAct, {
-            'event_category': category,
-            'event_label': label,
-            'value': count
-        });
+        _sendGaEvent(eventAct, category, label, count);
     }
 
     function _sendToCoreAnalytics(category, action, label, count, value) {