fix set-up and loading of GA gtag function (#5624)

escattone · web-flow · commit 8284ab1431af · 2023-08-31T14:17:47.000-07:00
diff --git a/kitsune/sumo/jinja2/base.html b/kitsune/sumo/jinja2/base.html
@@ -6,6 +6,8 @@
 <!DOCTYPE html>
 <html class="no-js" lang="{{ request.LANGUAGE_CODE }}"{% if DIR %} dir="{{ DIR }}"{% endif %}{% if settings.GTM_CONTAINER_ID %} data-gtm-container-id="{{ settings.GTM_CONTAINER_ID }}"{% endif %}>
 <head>
+  {% include "includes/google-analytics.html" %}
+
   {% block head_top %}{% endblock %}
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
@@ -56,8 +58,6 @@
   {% if canonical_url %}
     <link rel="canonical" href="{{ canonical_url|safe }}" />
   {% endif %}
-
-  {% include "includes/google-analytics.html" %}
 </head>
 
 <body class="html-{{ DIR }} logged-{% if user.is_authenticated %}in{% else %}out{% endif %} responsive {{ classes }} {{ request.LANGUAGE_CODE }}"
diff --git a/kitsune/sumo/static/sumo/js/gtm-snippet.js b/kitsune/sumo/static/sumo/js/gtm-snippet.js
@@ -34,7 +34,6 @@ import dntEnabled from "./libs/dnt-helper";
     // product should be first match or null
     product = (matches && matches.length > 0) ? matches[1] : null;
 
-
     w.gtag('config', GTM_CONTAINER_ID, {
       'dimension1': product
     });
diff --git a/webpack/entrypoints-html.js b/webpack/entrypoints-html.js
@@ -18,6 +18,16 @@ module.exports = Object.keys(entrypoints).map(entry =>
       htmlWebpackPlugin.tags.headTags.forEach(element => {
         element.attributes.nonce = "{{ request.csp_nonce }}";
       });
+      if (entry == "gtm-snippet") {
+        // Using "blocking" for the "scriptLoading" option doesn't work, so
+        // for now, let's delete the "defer" attribute for the "gtm-snippet"
+        // case, because it must block until loaded in order to ensure that
+        // the "gtag" function is defined before any other JavaScript files
+        // are executed.
+        htmlWebpackPlugin.tags.headTags.forEach(element => {
+          delete element.attributes.defer;
+        });
+      }
       return htmlWebpackPlugin.tags.headTags.join("");
     }
   }),
