From ffca9e52ff06992d922951955a2110532c9239d3 Mon Sep 17 00:00:00 2001
From: Jaimyn Mayer <hello@jaimyn.com.au>
Date: Fri, 6 Oct 2023 01:17:12 +1000
Subject: [PATCH] Updated Google Analytics to support GA4 / google tag manager

---
 docs/POST_INSTALL_STEPS.md                     |  2 +-
 memberportal/api_general/views.py              |  2 +-
 memberportal/membermatters/constance_config.py |  6 +++---
 src-frontend/index.html                        |  9 ---------
 src-frontend/src/store/modules/config.js       | 18 ++++++++++++++++--
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/docs/POST_INSTALL_STEPS.md b/docs/POST_INSTALL_STEPS.md
index 8fba8185..6f9fe61e 100644
--- a/docs/POST_INSTALL_STEPS.md
+++ b/docs/POST_INSTALL_STEPS.md
@@ -69,7 +69,7 @@ However, as noted below, currencies will use a hardcoded value set by a configur
 ### General
   * "SITE_NAME" - Name of the website.
   * "SITE_OWNER" - Name of the organisation running this website.
-  * "GOOGLE_ANALYTICS_PROPERTY_ID" - Enter your Google Analytics Tracking ID to enable Google Analytics Tracking.
+  * "GOOGLE_ANALYTICS_MEASUREMENT_ID" - Enter your measurement ID to enable Google analytics. Only the new GA4 measurement IDs are supported. It should look something like G-XXXXXXXXXX.
   * "API_SECRET_KEY" - Secret key used to authenticate some requests from access control devices.
 
 ### Signup
diff --git a/memberportal/api_general/views.py b/memberportal/api_general/views.py
index 165d34ab..e42c1eec 100644
--- a/memberportal/api_general/views.py
+++ b/memberportal/api_general/views.py
@@ -111,7 +111,7 @@ def get(self, request):
             "webcamLinks": webcam_links,
             "keys": keys,
             "features": features,
-            "analyticsId": config.GOOGLE_ANALYTICS_PROPERTY_ID,
+            "analyticsId": config.GOOGLE_ANALYTICS_MEASUREMENT_ID,
             "sentryDSN": config.SENTRY_DSN_FRONTEND,
         }
 
diff --git a/memberportal/membermatters/constance_config.py b/memberportal/membermatters/constance_config.py
index 36135193..7d60ff6a 100644
--- a/memberportal/membermatters/constance_config.py
+++ b/memberportal/membermatters/constance_config.py
@@ -219,9 +219,9 @@
         "",
         "Secret key for the discourse SSO protocol (if enabled).",
     ),
-    "GOOGLE_ANALYTICS_PROPERTY_ID": (
+    "GOOGLE_ANALYTICS_MEASUREMENT_ID": (
         "",
-        "Place you google analytics property ID here to enable Google analytics integration.",
+        "Enter your measurement ID to enable Google analytics. Only the new GA4 measurement IDs are supported. It should look something like G-XXXXXXXXXX.",
     ),
     "API_SECRET_KEY": (
         "PLEASE_CHANGE_ME",
@@ -343,7 +343,7 @@
                 "SITE_NAME",
                 "SITE_OWNER",
                 "SITE_LOCALE_CURRENCY",
-                "GOOGLE_ANALYTICS_PROPERTY_ID",
+                "GOOGLE_ANALYTICS_MEASUREMENT_ID",
                 "API_SECRET_KEY",
                 "SITE_BANNER",
             ),
diff --git a/src-frontend/index.html b/src-frontend/index.html
index 9472f208..1ad5e116 100644
--- a/src-frontend/index.html
+++ b/src-frontend/index.html
@@ -13,15 +13,6 @@
     />
 
     <script src="https://js.stripe.com/v3/"></script>
-    <script async src="https://www.google-analytics.com/analytics.js"></script>
-    <script>
-      window.ga =
-        window.ga ||
-        function () {
-          (ga.q = ga.q || []).push(arguments);
-        };
-      ga.l = +new Date();
-    </script>
 
     <link
       rel="icon"
diff --git a/src-frontend/src/store/modules/config.js b/src-frontend/src/store/modules/config.js
index 8d8defdd..1aee9319 100644
--- a/src-frontend/src/store/modules/config.js
+++ b/src-frontend/src/store/modules/config.js
@@ -127,8 +127,22 @@ export default {
             const { analyticsId } = result.data;
 
             if (analyticsId) {
-              ga('create', analyticsId, 'auto');
-              ga('send', 'pageview');
+              const scriptId = 'gtag-script';
+              if (!document.getElementById(scriptId)) {
+                const script = document.createElement('script');
+                script.id = scriptId;
+                script.async = true;
+                script.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsId}`;
+                document.head.insertBefore(script, document.head.firstChild);
+
+                window.dataLayer = window.dataLayer || [];
+                window.gtag = function () {
+                  dataLayer.push(arguments);
+                };
+
+                gtag('js', new Date());
+                gtag('config', analyticsId);
+              }
             }
 
             resolve();