[fix bug 1431412] Replace GA script with GTM.

mozilla · Mar 13, 2018 · 33be297 · 33be297
1 parent 7550ced
commit 33be297
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 12 deletions.
diff --git a/kitsune/bundles.py b/kitsune/bundles.py
@@ -293,8 +293,6 @@
             'sumo/js/geoip-locale.js',
             'mailcheck/src/mailcheck.js',
             'sumo/js/ui.js',
-            'sumo/js/dnt-helper.js',
-            'sumo/js/analytics.js',
             'sumo/js/surveygizmo.js',
             'sumo/js/instant_search.js',
         ),
@@ -351,7 +349,6 @@
     },
     'mobile-common': {
         'source_filenames': (
-            'sumo/js/dnt-helper.js',
             'sumo/js/templates/mobile-search-results.js',
             'moment/moment.js',
             'sumo/js/i18n.js',
@@ -366,7 +363,6 @@
             'sumo/js/search_utils.js',
             'sumo/js/aaq.js',
             'sumo/js/mobile/ui.js',
-            'sumo/js/analytics.js',
             'sumo/js/instant_search.js',
             'sumo/js/mobile/instant_search.js',
         ),
@@ -546,8 +542,6 @@
             'modernizr/modernizr.js',
             'sumo/js/browserdetect.js',
             'sumo/js/mobile/ui.js',
-            'sumo/js/dnt-helper.js',
-            'sumo/js/analytics.js',
             'sumo/js/libs/jquery.cookie.js',
             'sumo/js/libs/jquery.lazyload.js',
             'sumo/js/showfor.js',
@@ -647,4 +641,11 @@
         ),
         'output_filename': 'build/experiment-fxa-cta-topbar-min.js'
     },
+    'gtm-snippet': {
+        'source_filenames': (
+            'sumo/js/dnt-helper.js',
+            'sumo/js/gtm-snippet.js',
+        ),
+        'output_filename': 'build/gtm-snippet-min.js'
+    },
 }
diff --git a/kitsune/settings.py b/kitsune/settings.py
@@ -958,6 +958,7 @@ def JINJA_CONFIG():
 GA_ACCOUNT = config('GA_ACCOUNT', 'something@developer.gserviceaccount.com')  # Google API Service Account email address
 GA_PROFILE_ID = config('GA_PROFILE_ID', default='12345678')  # Google Analytics profile id for SUMO prod
 GA_START_DATE = date(2012, 11, 10)
+GTM_CONTAINER_ID = config('GTM_CONTAINER_ID', default='') # Google container ID
 
 MOBILE_COOKIE = config('MOBILE_COOKIE', default='msumo')
 

diff --git a/kitsune/sumo/jinja2/base.html b/kitsune/sumo/jinja2/base.html
@@ -4,7 +4,7 @@
   {% set meta = [('robots', 'noindex')] %}
 {% endif %}
 <!DOCTYPE html>
-<html class="no-js" lang="{{ request.LANGUAGE_CODE }}" {% if DIR %}dir="{{ DIR }}"{% endif %}>
+<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>
   {% block head_top %}{% endblock %}
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
@@ -76,9 +76,11 @@
   {% endif %}
 
   <!--[if lt IE 9]>
-{# html5-shiv.js must be inside <head/> to work. #}
-<script src="{{ STATIC_URL }}sumo/js/libs/html5-shiv.js"></script>
-<![endif]-->
+  {# html5-shiv.js must be inside <head/> to work. #}
+  <script src="{{ STATIC_URL }}sumo/js/libs/html5-shiv.js"></script>
+  <![endif]-->
+
+  {% include "includes/google-analytics.html" %}
 </head>
 <body class="html-{{ DIR }} logged-{% if user.is_authenticated() %}in{% else %}out{% endif %} {{ classes }} {{ request.LANGUAGE_CODE }}"
       data-readonly="{{ settings.READ_ONLY|json }}"

diff --git a/kitsune/sumo/jinja2/includes/google-analytics.html b/kitsune/sumo/jinja2/includes/google-analytics.html
@@ -0,0 +1,12 @@
+<!--
+Read more about our custom configuration and use of Google Analytics here:
+TODO: make sure we have a similar public comment about use on SUMO?
+https://bugzilla.mozilla.org/show_bug.cgi?id=1122305#c8
+-->
+
+<!-- Google Tag Manager -->
+{% if settings.GTM_CONTAINER_ID %}
+  {% javascript 'gtm-snippet' %}
+{% endif %}
+<!-- End Google Tag Manager -->
+
diff --git a/kitsune/sumo/jinja2/mobile/base.html b/kitsune/sumo/jinja2/mobile/base.html
@@ -3,7 +3,7 @@
 {% from "wiki/includes/document_macros.html" import show_for with context %}
 {% from "search/basic-form.html" import mobile_nav_form with context %}
 <!DOCTYPE html>
-<html lang="{{ request.LANGUAGE_CODE }}" {% if dir %}dir="{{ dir }}"{% endif %} class="no-js">
+<html lang="{{ request.LANGUAGE_CODE }}"{% if dir %} dir="{{ dir }}"{% endif %}{% if settings.GTM_CONTAINER_ID %} data-gtm-container-id="{{ settings.GTM_CONTAINER_ID }}"{% endif %} class="no-js">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
@@ -35,6 +35,8 @@
 
   {% block head %}
   {% endblock %}
+
+  {% include "includes/google-analytics.html" %}
 </head>
 <body class="{{ classes }}"
       data-readonly="{{ settings.READ_ONLY|json }}"

diff --git a/kitsune/sumo/jinja2/mobile/minimal.html b/kitsune/sumo/jinja2/mobile/minimal.html
@@ -1,6 +1,6 @@
 {% from "includes/common_macros.html" import favicon with context %}
 <!DOCTYPE html>
-<html lang="{{ request.LANGUAGE_CODE }}" {% if dir %}dir="{{ dir }}"{% endif %} class="no-js">
+<html lang="{{ request.LANGUAGE_CODE }}"{% if dir %} dir="{{ dir }}"{% endif %}{% if settings.GTM_CONTAINER_ID %} data-gtm-container-id="{{ settings.GTM_CONTAINER_ID }}"{% endif %} class="no-js">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
@@ -31,6 +31,8 @@
 
   {% block head %}
   {% endblock %}
+
+  {% include "includes/google-analytics.html" %}
 </head>
 <body class="{{ classes }} minimal"
       data-readonly="{{ settings.READ_ONLY|json }}"

diff --git a/kitsune/sumo/static/sumo/js/gtm-snippet.js b/kitsune/sumo/static/sumo/js/gtm-snippet.js
@@ -0,0 +1,42 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ (function(w) {
+  'use strict';
+
+  var GTM_CONTAINER_ID = document.getElementsByTagName('html')[0].getAttribute('data-gtm-container-id');
+
+  var matches;
+  var product;
+
+  w.dataLayer = w.dataLayer || [];
+
+  w.gtag = function() {
+    w.dataLayer.push(arguments)
+  }
+
+  // If doNotTrack is not enabled, it is ok to add GTM
+  // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1217896 for more details
+  if (typeof _dntEnabled === 'function' && !_dntEnabled() && GTM_CONTAINER_ID) {
+    (function(w,d,s,l,i,j,f,dl,k,q){
+      w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});f=d.getElementsByTagName(s)[0];
+      k=i.length;q='//www.googletagmanager.com/gtag/js?id=@&l='+(l||'dataLayer');
+      while(k--){j=d.createElement(s);j.async=!0;j.src=q.replace('@',i[k]);f.parentNode.insertBefore(j,f);}
+    }(window,document,'script','dataLayer',[GTM_CONTAINER_ID]));
+
+    w.gtag('js', new Date());
+
+    // check for first string after '/products/' and before the next '/'
+    matches = w.location.href.match(/.*?\/products\/([\w-]*)\/?/);
+
+    // product should be first match or null
+    product = (matches && matches.length > 0) ? matches[1] : null;
+
+    if (product) {
+      w.gtag('config', GTM_CONTAINER_ID, {
+        'dimension1': product
+      });
+    }
+  }
+})(window);