move to Google Analytics 4 (#6031)

* move to Google Analytics 4 * use session cookies for GA4 * fix gtagGuard * changelog + migration Co-authored-by: Michael Büßemeyer <[email protected]> Co-authored-by: MichaelBuessemeyer <[email protected]>
scalableminds · Feb 11, 2022 · 5a2779d · 5a2779d
1 parent 5ad4d8d
commit 5a2779d
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 29 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -25,6 +25,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Downloaded volume annotation layers no longer produce zero-byte zipfiles but rather a valid header-only zip file with no contents. [#6022](https://github.com/scalableminds/webknossos/pull/6022)
 - Changed a number of API routes from GET to POST to avoid unwanted side effects. [#6023](https://github.com/scalableminds/webknossos/pull/6023)
 - Removed unused datastore route `checkInbox` (use `checkInboxBlocking` instead). [#6023](https://github.com/scalableminds/webknossos/pull/6023)
+- Migrated to Google Analytics 4. [#6031](https://github.com/scalableminds/webknossos/pull/6031)
 
 ### Fixed
 - Fixed volume-related bugs which could corrupt the volume data in certain scenarios. [#5955](https://github.com/scalableminds/webknossos/pull/5955)

diff --git a/MIGRATIONS.unreleased.md b/MIGRATIONS.unreleased.md
@@ -7,6 +7,7 @@ User-facing changes are documented in the [changelog](CHANGELOG.released.md).
 
 ## Unreleased
 [Commits](https://github.com/scalableminds/webknossos/compare/22.02.0...HEAD)
+- The config field `googleAnalytics.trackingId` needs to be changed to [GA4 measurement id](https://support.google.com/analytics/answer/10089681), if used.
 
 ### Postgres Evolutions:
 - [081-annotation-viewconfiguration.sql](conf/evolutions/081-annotation-viewconfiguration.sql)
diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -73,24 +73,12 @@
     <main id="main-container"></main>
 
     @if(conf.GoogleAnalytics.trackingId.nonEmpty) {
+    <script async src="https://www.googletagmanager.com/gtag/js?id=@(conf.GoogleAnalytics.trackingId)"></script>
     <script>
-      (function(i, s, o, g, r, a, m) {
-        i["GoogleAnalyticsObject"] = r;
-        (i[r] =
-          i[r] ||
-          function() {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga");
-
-      ga("create", "@(conf.GoogleAnalytics.trackingId)", "auto");
-      ga("set", "anonymizeIp", true);
-      ga("send", "pageview");
+      window.dataLayer = window.dataLayer || [];
+      function gtag() { dataLayer.push(arguments); }
+      gtag('js', new Date());
+      gtag('config', '@(conf.GoogleAnalytics.trackingId)', { 'anonymize_ip': true, 'cookie_expires': 0 });
     </script>
     }
   </body>

diff --git a/frontend/javascripts/oxalis/model/helpers/analytics.js b/frontend/javascripts/oxalis/model/helpers/analytics.js
@@ -8,23 +8,21 @@ function getOrganization() {
   return activeUser != null ? activeUser.organization : null;
 }
 
-function gaGuard(...params) {
-  if (typeof window.ga !== "undefined" && window.ga !== null) {
-    window.ga(...params);
+function gtagGuard(...params) {
+  if (typeof window.gtag !== "undefined" && window.gtag !== null) {
+    window.gtag(...params);
   }
 }
 
 // The void return type is needed for flow to check successfully
 export function trackAction(action: string): void {
-  gaGuard("send", "event", "Action", action, getOrganization());
+  gtagGuard("event", "action", action, getOrganization());
 }
 
 export function trackVersion(version: string): void {
-  gaGuard("send", {
-    hitType: "event",
-    eventCategory: "pageLoad",
-    eventAction: "version",
-    eventLabel: version,
+  gtagGuard("event", "version", {
+    event_category: "page_load",
+    event_label: version,
   });
 }
 
@@ -37,7 +35,10 @@ export function googleAnalyticsLogClicks(evt: MouseEvent) {
     // Restrict the textContent to a maximum length
     const textContent = target.textContent.trim().slice(0, 50);
     if (textContent.length > 0) {
-      gaGuard("send", "event", "Click", textContent, getOrganization());
+      gtagGuard("event", "click", {
+        event_category: textContent,
+        event_label: getOrganization(),
+      });
     }
   }
 }

diff --git a/frontend/javascripts/router.js b/frontend/javascripts/router.js
@@ -76,8 +76,8 @@ browserHistory.listen(location => {
     // The listener is called repeatedly for a single page change, don't send repeated pageviews
     if (lastPage !== newPage) {
       // Update the tracker state first, so that subsequent pageviews AND events use the correct page
-      window.ga("set", "page", newPage);
-      window.ga("send", "pageview");
+      window.gtag("set", "page_path", newPage);
+      window.gtag("event", "page_view");
     }
   }
 });