Updated Google Analytics to support GA4 / google tag manager

membermatters · Oct 5, 2023 · ffca9e5 · ffca9e5
1 parent 0a3b207
commit ffca9e5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();