Merge branch 'ay/google-tag-manager' into autostaging

corehq/apps/analytics/README.md

@@ -103,3 +103,8 @@ Generally available in areas of interest to the product and growth teams: signup
 ### Facebook Pixel
 
 Their script is included in [signup](https://github.com/dimagi/commcare-hq/blob/master/corehq/apps/registration/templates/registration/register_new_user.html), but we don't do any event tracking or other interaction with it. Very little related code, just the script inclusion.
+
+### Google Tag Manager (GTM)
+
+This script is available in the [gtm.js](https://github.com/dimagi/commcare-hq/blob/master/corehq/apps/analytics/static/analytix/js/gtm.js).Related code is just for sending the user properties to GTM.
+Any tracking of events should be configured at the GTM console end in tandem with the desired analytics tooling. The purpose is to track specific features in HQ and also disable them when there is no need via the GTM console itself.

corehq/apps/analytics/static/analytix/js/gtm.js

@@ -0,0 +1,68 @@
+"use strict";
+/**
+ *  Handles communication with the google tag manager API. 
+ */
+hqDefine('analytix/js/gtm', [
+    'jquery',
+    'underscore',
+    'analytix/js/initial',
+    'analytix/js/logging',
+    'analytix/js/utils',
+], function (
+    $,
+    _,
+    initialAnalytics,
+    logging,
+    utils
+) {
+    var _get = initialAnalytics.getFn('gtm'),
+        _logger = logging.getLoggerForApi('Google Tag Manager'),
+        _ready = $.Deferred();
+
+    window.dataLayer = window.dataLayer || [];
+
+    /**
+     * Helper function to send event to Google Tag Manager.
+     * @param {string} eventName
+     * @param {object} eventData
+     * @param {function|undefined} callbackFn - optional
+     */
+    var gtmSendEvent = function (eventName, eventData, callbackFn) {
+        _ready.done(function () {
+            var data = {
+                event: eventName,
+            };
+            if (eventData) {
+                _.extend(data, eventData);
+            }
+            window.dataLayer.push(data);
+            _logger.verbose.log(eventName, 'window.dataLayer.push');
+        }).fail(function () {
+            if (_.isFunction(callbackFn)) {
+                callbackFn();
+            }
+        });
+    };
+
+    $(function () {
+        var apiId = _get('apiId'),
+            scriptUrl = '//www.googletagmanager.com/gtm.js?id=' + apiId;
+
+        _ready = utils.initApi(_ready, apiId, scriptUrl, _logger, function () {
+            var userProperties = {
+                userId: _get('userId', 'none'),
+                isDimagi: _get('userIsDimagi', 'no', 'yes'),
+                isCommCare: _get('userIsCommCareUser', 'no', 'yes'),
+                domain: _get('domain', 'none'),
+                hqEnvironment: _get('hqInstance', 'none'),
+            };
+            // userProperties are sent first to be available for use as early as possible
+            gtmSendEvent('userProperties', userProperties);
+            gtmSendEvent('gtm.js', {'gtm.start': new Date().getTime()});
+        });
+    });
+
+    return {
+        sendEvent: gtmSendEvent,
+    };
+});

corehq/apps/analytics/templates/analytics/analytics_js.html

@@ -12,4 +12,5 @@
   <script src="{% static 'analytix/js/hubspot.js' %}"></script>
   <script src="{% static 'analytix/js/drift.js' %}"></script>
   <script src="{% static 'analytix/js/appcues.js' %}"></script>
+  <script src="{% static 'analytix/js/gtm.js' %}"></script>
 {% endcompress %}

corehq/apps/analytics/templates/analytics/initial/all.html

@@ -3,3 +3,4 @@
 {% include 'analytics/initial/kissmetrics.html' %}
 {% include 'analytics/initial/hubspot.html' %}
 {% include 'analytics/initial/appcues.html' %}
+{% include 'analytics/initial/gtm.html' %}

corehq/apps/analytics/templates/analytics/initial/gtm.html

@@ -0,0 +1,13 @@
+{% load hq_shared_tags %}
+{% initial_analytics_data 'gtm.apiId' ANALYTICS_IDS.GTM_ID %}
+{% if request.couch_user %}
+  {% initial_analytics_data 'gtm.userId' request.couch_user.userID %}
+  {% initial_analytics_data 'gtm.userIsDimagi' request.couch_user.is_dimagi %}
+  {% initial_analytics_data 'gtm.userIsCommCareUser' request.couch_user.is_commcare_user %}
+{% endif %}
+{% if domain %}
+  {% initial_analytics_data 'gtm.domain' domain %}
+{% endif %}
+{% if ANALYTICS_CONFIG.HQ_INSTANCE %}
+  {% initial_analytics_data 'gtm.hqInstance' ANALYTICS_CONFIG.HQ_INSTANCE %}
+{% endif %}

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/base_main.js

@@ -13,6 +13,7 @@ hqDefine("hqwebapp/js/bootstrap3/base_main", [
     'analytix/js/google',
     'analytix/js/hubspot',
     'analytix/js/kissmetrix',
+    'analytix/js/gtm',
     'hqwebapp/js/bootstrap3/mobile_experience_warning',
 ], function () {
     // nothing to do, this is just to define the dependencies for hqwebapp/base.html

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/base_main.js

@@ -13,6 +13,7 @@ hqDefine("hqwebapp/js/bootstrap5/base_main", [
     'analytix/js/google',
     'analytix/js/hubspot',
     'analytix/js/kissmetrix',
+    'analytix/js/gtm',
     'hqwebapp/js/bootstrap5/mobile_experience_warning',
 ], function () {
     // nothing to do, this is just to define the dependencies for hqwebapp/base.html

corehq/apps/hqwebapp/templates/hqwebapp/base.html

@@ -6,19 +6,6 @@
 <!--[if IE 8]><html lang="{{ LANGUAGE_CODE }}" class="lt-ie9"><![endif]-->
 <!--[if gt IE 8]><!--><html lang="{{ LANGUAGE_CODE }}"><!--<![endif]-->
   <head>
-    {% if ANALYTICS_IDS.GTM_ID %}
-      {# This is fine as an inline script; it's independent of all HQ code and all third-party libraries #}
-      <!-- Google Tag Manager -->
-      <script>
-        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-          new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-          j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-          'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','{{ ANALYTICS_IDS.GTM_ID }}');
-      </script>
-      <!-- End Google Tag Manager -->
-    {% endif %}
-
     {% captureas title_block %}{% block title %}{% endblock title %}{% endcaptureas %}
     {% captureas title_context_block %}{% block title_context %}{% endblock title_context %}{% endcaptureas %}
     <title>
@@ -187,13 +174,6 @@
     {% endblock %}
   </head>
   <body>
-    {% if ANALYTICS_IDS.GTM_ID %}
-      <!-- Google Tag Manager (noscript) -->
-      <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ ANALYTICS_IDS.GTM_ID }}"
-                        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-      <!-- End Google Tag Manager (noscript) -->
-    {% endif %}
-
     {# for setting up page-wide backgrounds #}
     {% block background_content %}{% endblock %}
 

corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html

@@ -24,6 +24,7 @@
 <script src="{% static 'analytix/js/hubspot.js' %}"></script>
 <script src="{% static 'analytix/js/drift.js' %}"></script>
 <script src="{% static 'analytix/js/appcues.js' %}"></script>
+<script src="{% static 'analytix/js/gtm.js' %}"></script>
 
 <script src="{% static 'knockout/build/output/knockout-latest.js' %}"></script>
 <script src="{% static 'hqwebapp/js/lib/knockout_plugins/knockout_mapping.ko.min.js' %}"></script>

corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html

@@ -24,6 +24,7 @@
 <script src="{% static 'analytix/js/hubspot.js' %}"></script>
 <script src="{% static 'analytix/js/drift.js' %}"></script>
 <script src="{% static 'analytix/js/appcues.js' %}"></script>
+<script src="{% static 'analytix/js/gtm.js' %}"></script>
 
 <script src="{% static 'knockout/build/output/knockout-latest.js' %}"></script>
 <script src="{% static 'hqwebapp/js/lib/knockout_plugins/knockout_mapping.ko.min.js' %}"></script>

corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/base_main.js.diff.txt

@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,19 +1,19 @@
+@@ -1,20 +1,20 @@
 -hqDefine("hqwebapp/js/bootstrap3/base_main", [
 -    'hqwebapp/js/bootstrap3/downgrade_modal',
 -    'hqwebapp/js/bootstrap3/prepaid_modal',
@@ -25,6 +25,7 @@
      'analytix/js/google',
      'analytix/js/hubspot',
      'analytix/js/kissmetrix',
+     'analytix/js/gtm',
 -    'hqwebapp/js/bootstrap3/mobile_experience_warning',
 +    'hqwebapp/js/bootstrap5/mobile_experience_warning',
  ], function () {