Merge pull request #3598 from WikiWatershed/tt/3581/update-google-ana…

…lytics

Closes #3581

src/mmw/apps/core/templates/head.html

@@ -12,15 +12,13 @@
     <link rel="icon" type="image/png" href="{% static favicon2x %}" sizes="32x32">
     <link rel="stylesheet" href="{% static 'css/vendor.css' %}" />
     <link rel="stylesheet" href="{% static 'css/main.css' %}" />
-    <!-- Google Analytics -->
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ GOOGLE_ANALYTICS_ACCOUNT }}"></script>
     <script>
-        (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');
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
 
-        ga('create', '{{ GOOGLE_ANALYTICS_ACCOUNT }}', 'auto');
-        ga('set', 'anonymizeIp', true);
-        ga('send', 'pageview');
+        gtag('config', '{{ GOOGLE_ANALYTICS_ACCOUNT }}', { 'anonymize_ip': true });
     </script>
 </head>

src/mmw/js/src/analyze/models.js

@@ -98,7 +98,8 @@ var AnalyzeTaskModel = coreModels.TaskModel.extend({
             var gaEvent = self.get('name') + '-analyze',
                 gaLabel = utils.isInDrb(aoi) ? 'drb-aoi' : 'national-aoi',
                 gaAoiSize = turfArea(aoi) / 1000000;
-            window.ga('send', 'event', 'Analyze', gaEvent, gaLabel, parseInt(gaAoiSize));
+
+            utils.gtm('Analyze', gaEvent, gaLabel, parseInt(gaAoiSize));
 
             var isWkaoi = utils.isWKAoIValid(wkaoi),
                 taskHelper = {

src/mmw/js/src/core/testUtils.js

@@ -3,7 +3,7 @@
 var $ = require('jquery');
 
 // Mock the Google Analytics function for tests
-window.ga = function() {};
+window.dataLayer = { push: function() {} };
 
 // Should be called after each unit test.
 function resetApp(app) {

src/mmw/js/src/core/utils.js

@@ -800,6 +800,23 @@ var utils = {
 
         return result;
     },
+
+    // Convenience method for Google Tag Manager that mimics the
+    // old Google Analytics API
+    gtm: function(eventCategory, eventAction, eventLabel, eventValue) {
+        var event = {
+            'event': 'mmw',
+            'eventCategory': eventCategory,
+            'eventAction': eventAction,
+            'eventLabel': eventLabel,
+        };
+
+        if (eventValue) {
+            event.eventValue = eventValue;
+        }
+
+        window.dataLayer.push(event);
+    },
 };
 
 module.exports = utils;

src/mmw/js/src/draw/views.js

@@ -470,7 +470,7 @@ var AoIUploadView = Marionette.ItemView.extend({
         }
 
         this.addPolygonToMap(polygon);
-        window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'geojson');
+        coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'geojson');
     },
 
     handleShpZip: function(zipfile) {
@@ -485,7 +485,7 @@ var AoIUploadView = Marionette.ItemView.extend({
             })
             .catch(_.bind(self.handleShapefileError, self));
 
-        window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'shapefile');
+        coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'shapefile');
     },
 
     reprojectAndAddFeature: function(shp, prj) {
@@ -718,8 +718,8 @@ var SelectBoundaryView = DrawToolBaseView.extend({
             codeToLayer[layerCode] = ol;
 
             grid.on('click', function(e) {
-                window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'boundary-' + layerCode);
-                window.ga('send', 'event', GA_AOI_CATEGORY, 'boundary-aoi-create', e.data.name);
+                coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'boundary-' + layerCode);
+                coreUtils.gtm(GA_AOI_CATEGORY, 'boundary-aoi-create', e.data.name);
 
                 getShapeAndAnalyze(e, self.model, ofg, grid, layerCode, shortDisplay);
             });
@@ -831,7 +831,7 @@ var DrawAreaView = DrawToolBaseView.extend({
             .then(function(shape) {
                 addLayer(shape);
                 navigateToAnalyze();
-                window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'freedraw');
+                coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'freedraw');
             }).fail(function(message) {
                 revertLayer();
                 displayAlert(message, modalModels.AlertTypes.error);
@@ -848,7 +848,7 @@ var DrawAreaView = DrawToolBaseView.extend({
             var point = L.marker(latlng).toGeoJSON(),
                 box = utils.getSquareKmBoxForPoint(point);
 
-            window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'squarekm');
+            coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'squarekm');
             return box;
         }).then(validateShape).then(function(polygon) {
             addLayer(polygon, '1 Square Km');
@@ -937,7 +937,7 @@ var WatershedDelineationView = DrawToolBaseView.extend({
 
         utils.placeMarker(map)
             .then(function(latlng) {
-                window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'rwd-' + dataSource);
+                coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'rwd-' + dataSource);
                 return validatePointWithinDataSourceBounds(latlng, dataSource);
             })
             .then(function(latlng) {
@@ -1140,7 +1140,7 @@ var DrainageAreaView = DrawToolBaseView.extend({
             App.map.set('areaOfInterestAdditionals', additionalShapes);
             addLayer(response.area_of_interest, 'Point-based Drainage Area');
             navigateToAnalyze();
-            window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'drainage-point');
+            coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'drainage-point');
         }).fail(function(message) {
             revertLayer();
             displayAlert(message, modalModels.AlertTypes.error);
@@ -1179,7 +1179,7 @@ var DrainageAreaView = DrawToolBaseView.extend({
                 App.map.set('areaOfInterestAdditionals', additionalShapes);
                 addLayer(response.area_of_interest, 'Stream-based Drainage Area');
                 navigateToAnalyze();
-                window.ga('send', 'event', GA_AOI_CATEGORY, 'aoi-create', 'drainage-stream');
+                coreUtils.gtm(GA_AOI_CATEGORY, 'aoi-create', 'drainage-stream');
             }).fail(function(message) {
                 revertLayer();
                 displayAlert(message, modalModels.AlertTypes.error);

src/mmw/js/src/modeling/controllers.js

@@ -113,7 +113,7 @@ var ModelingController = {
     },
 
     makeNewProject: function(modelPackage) {
-        window.ga('send', 'event', constants.GA.MODEL_CATEGORY, constants.GA.MODEL_CREATE_EVENT, modelPackage);
+        utils.gtm(constants.GA.MODEL_CATEGORY, constants.GA.MODEL_CREATE_EVENT, modelPackage);
 
         var project;
         if (settings.get('itsi_embed')) {

src/mmw/js/src/modeling/models.js

@@ -1297,8 +1297,8 @@ var ScenarioModel = Backbone.Model.extend({
             modelPackage = App.currentProject.get('model_package'),
             modKeyName = modelPackage === utils.GWLFE ? 'modKey' : 'value';
 
-        window.ga('send', 'event', constants.GA.MODEL_CATEGORY,
-           modelPackage + constants.GA.MODEL_MOD_EVENT, modification.get(modKeyName));
+        utils.gtm(constants.GA.MODEL_CATEGORY,
+            modelPackage + constants.GA.MODEL_MOD_EVENT, modification.get(modKeyName));
 
         // For GWLFE, first remove existing mod with the same key since it
         // doesn't make sense to have multiples of the same type of BMP.
@@ -1750,7 +1750,7 @@ var ScenariosCollection = Backbone.Collection.extend({
                 inputs: currentConditions.get('inputs').toJSON(),
             });
 
-        window.ga('send', 'event', constants.GA.MODEL_CATEGORY, constants.GA.MODEL_SCENARIO_EVENT, modelPackage);
+        utils.gtm(constants.GA.MODEL_CATEGORY, constants.GA.MODEL_SCENARIO_EVENT, modelPackage);
 
         this.add(scenario);
         this.setActiveScenarioByCid(scenario.cid);

src/mmw/js/src/routes.js

@@ -21,11 +21,3 @@ router.addRoute('projects(/)', ProjectsController, 'projects');
 router.addRoute('error(/:type)(/)', ErrorController, 'error');
 router.addRoute('sign-up(/)', SignUpController, 'signUp');
 router.addRoute('sign-up/sso(/:provider)(/:username)(/:first_name)(/:last_name)(/)', SignUpController, 'ssoSignUp');
-
-router.on('route', function() {
-    // Allow Google Analytics to track virtual pageloads following approach in
-    // https://developers.google.com/analytics/devguides/collection/
-    // analyticsjs/single-page-applications
-    window.ga('set', 'page', window.location.pathname);
-    window.ga('send', 'pageview');
-});

src/mmw/mmw/settings/production.py

@@ -98,7 +98,7 @@
 GOOGLE_MAPS_API_KEY = 'AIzaSyCXdkywU7rps_i1CeKqWxlBi97vyGeXsqk'
 
 # Stroud account
-GOOGLE_ANALYTICS_ACCOUNT = 'UA-47047573-15'
+GOOGLE_ANALYTICS_ACCOUNT = 'G-R98FWXKCFY'
 
 # django-cookies-samesite
 SESSION_COOKIE_SAMESITE = 'None'  # Allows for cross site embedding into LARA