Change from UA to gtag

docs/INSTALL.md

@@ -176,7 +176,7 @@ dokku config:set pombola \
     TWITTER_USERNAME=PeoplesAssem_SA \
     ELASTICSEARCH_URL=elasticsearch.example.com:9200 \
     DATABASE_URL=postgres://pombola:[email protected]/pombola \
-    GOOGLE_ANALYTICS_ACCOUNT=UA-47810266-1 \
+    GOOGLE_ANALYTICS_ACCOUNT=G-RK0Z57HMF6 \
     DISQUS_SHORTNAME=peoplesassembly \
     FACEBOOK_APP_ID=... \
     PMG_COMMITTEE_USER=... \

pombola/admin_additions/templates/admin/base_site.html

@@ -45,16 +45,6 @@
     //]]>
     </script>
 
-    <script type="text/javascript">
-      (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','//www.google-analytics.com/analytics.js','ga');
-
-      ga('create', '{{ settings.GOOGLE_ANALYTICS_ACCOUNT }}');
-      ga('send', 'pageview');
-    </script>
-
     {% include 'autocomplete_light/static.html' %}
 
 {% endblock %}

pombola/core/static/js/analytics.js

@@ -1,25 +1,21 @@
 // add in some tracking to detect when users print pages. Will be used to judge
 // how often this happens.
 
-
-(function() {
+(function () {
   // based on code from http://stackoverflow.com/a/11060206/5349
 
   // track the print request - with debounce for chrome.
   var haveTracked = false;
-  var beforePrint = function() {
-    if (haveTracked)
-      return;
+  var beforePrint = function () {
+    if (haveTracked) return;
     haveTracked = true;
-    var args = ['_trackEvent', 'Sharing', 'Print', document.location.pathname];
-    // console.log(args)
-    _gaq.push(args);
+    gtag("event", "Sharing", { print: document.location.pathname });
   };
 
   // respond to print events
   if (window.matchMedia) {
-    var mediaQueryList = window.matchMedia('print');
-    mediaQueryList.addListener(function(mql) {
+    var mediaQueryList = window.matchMedia("print");
+    mediaQueryList.addListener(function (mql) {
       if (mql.matches) {
         beforePrint();
       }
@@ -28,53 +24,55 @@
   window.onbeforeprint = beforePrint;
 
   window.analytics = {
-    trackEvents: function(listOfEvents){
+    trackEvents: function (listOfEvents) {
       // Takes a list of arguments suitable for trackEvent.
       // Returns a jQuery Deferred object.
       // The deferred object is resolved when
       // all of the trackEvent calls are resolved.
       var dfd = $.Deferred();
       var deferreds = [];
       var _this = this;
-      $.each(listOfEvents, function(i, params){
-          deferreds.push(_this.trackEvent(params));
+      $.each(listOfEvents, function (i, params) {
+        deferreds.push(_this.trackEvent(params));
       });
-      $.when.apply($, deferreds).done(function(){
-          dfd.resolve();
+      $.when.apply($, deferreds).done(function () {
+        dfd.resolve();
       });
       return dfd.promise();
     },
 
-    trackEvent: function(params){
+    trackEvent: function (params) {
       // Takes an object of event parameters, eg:
       // { eventCategory: 'foo', eventAction: 'bar' }
       // Returns a jQuery Deferred object.
       // The deferred object is resolved when the GA call
       // completes or fails to respond within 2 seconds.
       var dfd = $.Deferred();
 
-      if(typeof ga === 'undefined' || !ga.loaded){
+      if (typeof gtag === "undefined") {
         // GA has not loaded (blocked by adblock?)
         return dfd.resolve();
       }
 
       var defaults = {
-        hitType: 'event',
+        hitType: "event",
         eventLabel: document.title,
-        hitCallback: function(){
+        hitCallback: function () {
           dfd.resolve();
-        }
-      }
+        },
+      };
 
-      ga('send', $.extend(defaults, params));
+      const category = params["eventCategory"];
+      delete params["eventCategory"];
+
+      gtag("event", params["eventCa"], params);
 
       // Wait a maximum of 2 seconds for GA response.
-      setTimeout(function(){
+      setTimeout(function () {
         dfd.resolve();
       }, 2000);
 
       return dfd.promise();
-    }
+    },
   };
-
-}());
+})();

pombola/kenya/static/js/click-tracking.js

@@ -13,11 +13,7 @@
       }[cssSelector]
       e.preventDefault();
       window.open(url, label + ' window', windowFeatures);
-      ga('send', 'event', {
-        'eventCategory': cssSelector.substring(1),
-        'eventAction': 'click',
-        'eventLabel': label
-      });
+      gtag('event', cssSelector.substring(1), {'click': label})
     });
   });
 })();

pombola/kenya/templates/intro.html

@@ -12,7 +12,6 @@
 
   <script type="text/javascript" charset="utf-8">
       window.pombola_settings = {
-          google_analytics_account : '{{ settings.GOOGLE_ANALYTICS_ACCOUNT }}',
           static_url:                '{{ STATIC_URL }}',
       };
   </script>

pombola/south_africa/static/js/rep-locator.js

@@ -12,12 +12,8 @@ $(function() {
     $moreButton.on('click', function(){
       $(this).nextAll().show();
       $(this).remove();
-      if (typeof ga === 'function') {
-        ga('send', {
-          hitType: 'event',
-          eventCategory: 'rep-locator-read-more-button',
-          eventAction: 'click'
-        });
+      if (typeof gtag === 'function') {
+        gtag('event', 'rep-locator-read-more-button', {'action': 'click'})
       }
     });
     return $moreButton;

pombola/south_africa/static/js/tabs.js

@@ -1,66 +1,67 @@
-$(function() {
-  var updateRepLocatorTabZoom = function(tabID) {
+$(function () {
+  var updateRepLocatorTabZoom = function (tabID) {
     if (map) {
-        remove_kml_layers();
-        remove_markers();
-        if (tabID == 'councillors') {
-            add_kml_urls(ward_kml_urls);
-        } else if (tabID == 'mps') {
-            add_markers(constituency_offices_marker_data_mps);
-        } else if (tabID == 'mpls') {
-            add_markers(constituency_offices_marker_data_mpls);
-        }
+      remove_kml_layers();
+      remove_markers();
+      if (tabID == "councillors") {
+        add_kml_urls(ward_kml_urls);
+      } else if (tabID == "mps") {
+        add_markers(constituency_offices_marker_data_mps);
+      } else if (tabID == "mpls") {
+        add_markers(constituency_offices_marker_data_mpls);
+      }
     }
-  }
-  if ($('.rep-locator-tabs').length) {
-    map_loaded_callbacks.push(function(map) {
+  };
+  if ($(".rep-locator-tabs").length) {
+    map_loaded_callbacks.push(function (map) {
       var tabIndex, tabID;
       // Find the tab which is active, and set the zoom level for it:
-      tabIndex = $(".rep-locator-container").tabs('option', 'active');
-      tabID = $(".tabs .tab-content").eq(tabIndex).attr('id');
+      tabIndex = $(".rep-locator-container").tabs("option", "active");
+      tabID = $(".tabs .tab-content").eq(tabIndex).attr("id");
       updateRepLocatorTabZoom(tabID);
       // Now add event listeners to detect changes of tab and rezoom
       // the map:
-      $(".rep-locator-container").on("tabsactivate", function(event, ui) {
+      $(".rep-locator-container").on("tabsactivate", function (event, ui) {
         updateRepLocatorTabZoom(ui.newPanel[0].id);
       });
     });
   }
 
   // Select a tab if it has been requested via URL hash fragment,
   // otherwise, just pick a sensible default.
-  if ( $('.ui-tabs-panel' + window.location.hash).length ) {
-    var activeTabIndex = $('.ui-tabs-anchor[href="' + window.location.hash + '"]').parent().prevAll().length;
+  if ($(".ui-tabs-panel" + window.location.hash).length) {
+    var activeTabIndex = $(
+      '.ui-tabs-anchor[href="' + window.location.hash + '"]'
+    )
+      .parent()
+      .prevAll().length;
   } else {
-    var activeTabIndex = $('.ui-tabs-active').prevAll().length || 0;
+    var activeTabIndex = $(".ui-tabs-active").prevAll().length || 0;
   }
 
-  if ($(".tabs").tabs){
+  if ($(".tabs").tabs) {
     $(".tabs").tabs({
-      active: activeTabIndex
+      active: activeTabIndex,
     });
-    $(".tabs").on("tabsactivate", function(event, ui) {
-      var panelID = ui.newPanel[0].id, gaCategoryPrefix;
+    $(".tabs").on("tabsactivate", function (event, ui) {
+      var panelID = ui.newPanel[0].id,
+        gaCategoryPrefix;
       if (history.pushState) {
-        history.pushState(null, null, '#' + panelID);
+        history.pushState(null, null, "#" + panelID);
       }
       // If Google Analytics is loaded, try to track clicks on the tabs
-      if (typeof ga === 'function') {
+      if (typeof gtag === "function") {
         // We only use jQuery tabs on the rep locator page and person
         // pages for South Africa (at the moment); distinguish those
         // cases with the event category:
-        if ($('.rep-locator-tabs').length) {
-          gaCategoryPrefix = 'rep-locator-tab-';
-        } else if ($('meta[name=pombola-person-id]').length) {
-          gaCategoryPrefix = 'person-page-tab-';
+        if ($(".rep-locator-tabs").length) {
+          gaCategoryPrefix = "rep-locator-tab-";
+        } else if ($("meta[name=pombola-person-id]").length) {
+          gaCategoryPrefix = "person-page-tab-";
         } else {
-          gaCategoryPrefix = 'tab-';
+          gaCategoryPrefix = "tab-";
         }
-        ga('send', {
-          hitType: 'event',
-          eventCategory: gaCategoryPrefix + panelID,
-          eventAction: 'activate'
-        });
+        gtag("event", gaCategoryPrefix + panelID, { action: "activate" });
       }
     });
   }

pombola/templates/default_base.html

@@ -1,6 +1,15 @@
 <!DOCTYPE html>
 <html lang="{% block html_lang %}en{% endblock %}" class="no-js">
     <head>
+        <!-- Google tag (gtag.js) -->
+        <script async src="https://www.googletagmanager.com/gtag/js?id={{ settings.GOOGLE_ANALYTICS_ACCOUNT }}"></script>
+        <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', '{{ settings.GOOGLE_ANALYTICS_ACCOUNT }}');
+        </script>
 {% comment %}
 
   The Google Analytics documentation says that the experiment
@@ -52,7 +61,6 @@
         <script type="text/javascript" charset="utf-8">
 
             window.pombola_settings = {
-                google_analytics_account : '{{ settings.GOOGLE_ANALYTICS_ACCOUNT }}',
                 static_url:                '{{ STATIC_URL }}',
                 map_bounds: {
                   north: {{ settings.MAP_BOUNDING_BOX_NORTH }},
@@ -63,15 +71,8 @@
                 crosshairs_image: '{% static 'images/crosshairs.png' %}',
                 google_recaptcha_site_key: '{{ settings.GOOGLE_RECAPTCHA_SITE_KEY }}'
             };
-
-            (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','//www.google-analytics.com/analytics.js','ga');
-
-            ga('create', pombola_settings.google_analytics_account);
-            ga('send', 'pageview');
         </script>
+
         <script type="text/javascript" async
           src="//l.getsitecontrol.com/94g06o07.js">
         </script>