Merge branch 'develop' into fix/use-map-clustering

app/config.js.j2

@@ -8,6 +8,9 @@ window.ushahidi = {
   gaKey: '{{ GA_KEY }}',
 {% else %}
   gaEnabled: false,
+{% endif %}
+{% if GTM_CONTAINER_ID %}
+  googleTagManager: '{{ GTM_CONTAINER_ID }}',
 {% endif %}
   intercomAppId: '{{ INTERCOM_APPID }}',
   appStoreId: '{{ APP_STORE_ID }}',

legacy/app/app.js

@@ -253,4 +253,5 @@ angular
             event.title = title;
             window.dispatchEvent(event);
         });
-    }]);
+    }])
+    .run(require('./gtm-userprops.js'));

legacy/app/auth/authentication.service.js

@@ -51,6 +51,16 @@ function (
             language: userData.language
         });
         loginStatus = true;
+
+        // Refresh the user properties due to the change
+        window.dispatchEvent(new CustomEvent('ush:analytics:refreshUserProperties'));
+        window.dispatchEvent(new CustomEvent('datalayer:custom-event', {
+            detail: {
+                event: 'user logged in',
+                event_type: 'user_interaction',
+                user_role: userData.role === 'admin' ? 'admin' : 'member'
+            }
+        }));
     }
 
     function continueLogout(silent) {

legacy/app/gtm-userprops.js

@@ -0,0 +1,74 @@
+module.exports = [
+    '$q',
+    'ConfigEndpoint',
+    'UserEndpoint',
+function ($q, ConfigEndpoint, UserEndpoint) {
+    // Utility for collecting user properties from application state and pushing
+    // them to the datalayer
+    function getUserPropertiesPromise() {
+        var userProps = $q.defer();
+
+        var site = $q.defer();
+        var multisite = $q.defer();
+        var user = $q.defer();
+
+        ConfigEndpoint.get({id: 'site'}).$promise.then(function (x) {
+            site.resolve(x);
+        });
+        ConfigEndpoint.get({id: 'multisite'}).$promise.then(function (x) {
+            multisite.resolve(x);
+        });
+        UserEndpoint.get({id: 'me'}).$promise.then(function (x) {
+            if (x.id && x.role) {
+                // According to data dictionary:
+                //   https://docs.google.com/document/d/1ulZerckIGun-mv4ASu2nEFGFTpqcYwBXd3HR95eKj68
+                x.role_level = x.role === 'admin' ? 'admin' : 'member';
+            }
+            user.resolve(x);
+        }).catch(function () {
+            user.resolve(null);
+        })
+
+        $q.all([site.promise, multisite.promise, user.promise]).then(function (results) {
+            var site = results[0] || {};
+            var multisite = results[1] || {};
+            var user = results[2] || {};
+
+            // This is a composition of the user id and deployment id, because each user must be unique
+            // in the analytics data warehouse
+            var scopedUserId = undefined;
+            if (user.id) {
+                scopedUserId = String(user.id) + ',' + String(multisite.site_id || null);
+            }
+
+            userProps.resolve({
+                deployment_url: multisite.site_fqdn || window.location.host ,
+                deployment_id: multisite.site_id || null,
+                deployment_name: site.name || undefined,
+                user_id: scopedUserId,
+                user_role: user.role_level || undefined,
+                browser_language: navigator.language
+                ? navigator.languages[0]
+                : (navigator.language || navigator.userLanguage)
+            });
+        });
+
+        return userProps;
+    }
+
+    function triggerRefresh() {
+        getUserPropertiesPromise().promise.then(function (userProps) {
+            let event = new CustomEvent('datalayer:userprops', { detail: userProps });
+            window.dispatchEvent(event);
+        });
+    }
+
+    // Initialize user properties along with this module
+    triggerRefresh();
+
+    // Add event listener to refresh user properties on demand
+    window.addEventListener('ush:analytics:refreshUserProperties', function () {
+        triggerRefresh();
+    });
+
+}];

root/src/datalayer.js

@@ -0,0 +1,65 @@
+class Datalayer {
+    constructor() {
+        this.pushQ = [];
+        this.userProperties = {};
+    }
+
+    initialize() {
+        // Listen to user property change events
+        window.addEventListener("datalayer:userprops", ({detail}) => {
+           this.userProperties = detail;
+            if (this.pushQ.length > 0) {
+                for (var obj of this.pushQ) {
+                    obj.user_properties = this.userProperties;
+                    this.push(obj);
+                }
+                this.pushQ = [];
+            } else {
+                this.push({user_properties: this.userProperties});
+            }
+        });
+
+        // Listen to custom events to be pushed
+        window.addEventListener("datalayer:custom-event", ({detail}) => {
+            this.push(detail);
+        });
+
+        // Watching for routing events
+        window.addEventListener("single-spa:routing-event",
+            ({ detail: { newUrl } }) => {
+                const path = new URL(newUrl).pathname;
+                const pageType = this.pathToPageType(path);
+
+                // Corner case: routing event before user properties set
+                if (Object.keys(this.userProperties).length > 0) {
+                    this.push({'page_type': pageType, user_properties: this.userProperties});
+                } else {
+                    // If user properties have not been initialised yet, we should queue
+                    this.pushQ.push({'page_type': pageType});
+                }
+            });
+    }
+
+    push(obj) {
+        window.dataLayer = window.dataLayer || [];
+        window.dataLayer.push({ ecommerce: null });
+        window.dataLayer.push(obj);
+        console.log("pushed");
+        console.log(obj);
+    }
+
+    pathToPageType(path) {
+        // i.e. '/settings/general' -> ['settings', 'general']
+        const tokens = path.split('/').filter(Boolean);
+
+        if (tokens[0] == 'settings') {
+            return 'deployment-settings';
+        } else if (tokens[0] == 'activity') {
+            return 'deployment-activity';
+        } else {
+            return 'deployment-other';
+        }
+    }
+}
+
+export const datalayer = new Datalayer();

root/src/ushahidi-root-config.js

@@ -6,6 +6,7 @@ import {
 } from "single-spa-layout";
 import microfrontendLayout from "./microfrontend-layout.html";
 import { getPageMetadata, setBootstrapConfig } from "@ushahidi/utilities";
+import { datalayer } from "./datalayer.js";
 
 require("./loading.scss");
 
@@ -24,6 +25,7 @@ const layoutEngine = constructLayoutEngine({ routes, applications });
 
 applications.forEach(registerApplication);
 layoutEngine.activate();
+datalayer.initialize();
 
 const showError = function (show) {
     const element = document.querySelector('#bootstrap-error');