From ac89b8aba537dd094044eaf1b2880d2c9b7318f2 Mon Sep 17 00:00:00 2001 From: Ajeet Date: Fri, 3 May 2024 17:25:14 +0530 Subject: [PATCH 1/9] removes gtm setup code from html --- .../hqwebapp/templates/hqwebapp/base.html | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/corehq/apps/hqwebapp/templates/hqwebapp/base.html b/corehq/apps/hqwebapp/templates/hqwebapp/base.html index 558dc21d5122..de03b2f6c05a 100644 --- a/corehq/apps/hqwebapp/templates/hqwebapp/base.html +++ b/corehq/apps/hqwebapp/templates/hqwebapp/base.html @@ -6,19 +6,6 @@ - {% if ANALYTICS_IDS.GTM_ID %} - {# This is fine as an inline script; it's independent of all HQ code and all third-party libraries #} - - - - {% endif %} - {% captureas title_block %}{% block title %}{% endblock title %}{% endcaptureas %} {% captureas title_context_block %}{% block title_context %}{% endblock title_context %}{% endcaptureas %} @@ -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 %} From 404b9a03806141e3e15ae577aed8272b7ff1884f Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Fri, 3 May 2024 17:27:15 +0530 Subject: [PATCH 2/9] initial data for gtm --- .../analytics/templates/analytics/initial/all.html | 1 + .../analytics/templates/analytics/initial/gtm.html | 13 +++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 corehq/apps/analytics/templates/analytics/initial/gtm.html diff --git a/corehq/apps/analytics/templates/analytics/initial/all.html b/corehq/apps/analytics/templates/analytics/initial/all.html index 72fa7ebce0fe..5836d68cbb2b 100644 --- a/corehq/apps/analytics/templates/analytics/initial/all.html +++ b/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' %} diff --git a/corehq/apps/analytics/templates/analytics/initial/gtm.html b/corehq/apps/analytics/templates/analytics/initial/gtm.html new file mode 100644 index 000000000000..3aeeb2de3267 --- /dev/null +++ b/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.userIsCommCare' request.couch_user.is_commcare_user %} +{% endif %} +{% if domain %} + {% initial_analytics_data 'gtm.domain' domain|escapejs %} +{% endif %} +{% if ANALYTICS_CONFIG.HQ_INSTANCE %} + {% initial_analytics_data 'gtm.hqInstance' ANALYTICS_CONFIG.HQ_INSTANCE %} +{% endif %} From d1c138f0dd1b984145dda5944adb1cbb65a4a88e Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Fri, 3 May 2024 17:30:38 +0530 Subject: [PATCH 3/9] load gtm setup script and send user properties --- .../apps/analytics/static/analytix/js/gtm.js | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 corehq/apps/analytics/static/analytix/js/gtm.js diff --git a/corehq/apps/analytics/static/analytix/js/gtm.js b/corehq/apps/analytics/static/analytix/js/gtm.js new file mode 100644 index 000000000000..720c502785c3 --- /dev/null +++ b/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('userIsCommCare', '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, + }; +}); From c18f556291d4e206ea3854d80e9e814ff5eb8eca Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Fri, 3 May 2024 17:31:22 +0530 Subject: [PATCH 4/9] include gtm.js at relevant places --- corehq/apps/analytics/templates/analytics/analytics_js.html | 1 + corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/base_main.js | 1 + corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/base_main.js | 1 + .../templatetags/tests/rendered/javascript_libraries_hq.html | 1 + .../tests/rendered/javascript_libraries_hq_bootstrap5.html | 1 + 5 files changed, 5 insertions(+) diff --git a/corehq/apps/analytics/templates/analytics/analytics_js.html b/corehq/apps/analytics/templates/analytics/analytics_js.html index 2e04b46f5fb2..d1112245b847 100644 --- a/corehq/apps/analytics/templates/analytics/analytics_js.html +++ b/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 %} diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/base_main.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/base_main.js index 6d9808c5eba1..a20215632e89 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/base_main.js +++ b/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/mobile_experience_warning', ], function () { // nothing to do, this is just to define the dependencies for hqwebapp/base.html diff --git a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/base_main.js b/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/base_main.js index 826d5e384e62..36f61f561749 100644 --- a/corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/base_main.js +++ b/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/mobile_experience_warning', ], function () { // nothing to do, this is just to define the dependencies for hqwebapp/base.html diff --git a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html b/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html index a2fcf0508cd9..8eb7d399842d 100644 --- a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq.html +++ b/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> diff --git a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html b/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html index af54c8c15cee..6b4fe829b357 100644 --- a/corehq/apps/hqwebapp/templatetags/tests/rendered/javascript_libraries_hq_bootstrap5.html +++ b/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> From ee0283cc88e13bdb5ed2704de4802d561c71d5c1 Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Mon, 6 May 2024 13:27:47 +0530 Subject: [PATCH 5/9] updates Readme for gtm --- corehq/apps/analytics/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/corehq/apps/analytics/README.md b/corehq/apps/analytics/README.md index 1ceb08878b35..5bb74de90aab 100644 --- a/corehq/apps/analytics/README.md +++ b/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. From b4e058d421db0615e8a4e7b671c0bb314b20c83e Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Mon, 6 May 2024 07:58:21 +0000 Subject: [PATCH 6/9] "Bootstrap 5 Migration - Rebuilt diffs" --- .../javascript/hqwebapp/js/base_main.js.diff.txt | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/base_main.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/base_main.js.diff.txt index 77eec31de935..1439686fa252 100644 --- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/hqwebapp/js/base_main.js.diff.txt +++ b/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 () { From 5152a8644a10c56a6074721f1e47a0f1c924ecfc Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Tue, 7 May 2024 18:02:23 +0530 Subject: [PATCH 7/9] nit: variable naming and removed escape js --- corehq/apps/analytics/static/analytix/js/gtm.js | 2 +- corehq/apps/analytics/templates/analytics/initial/gtm.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/corehq/apps/analytics/static/analytix/js/gtm.js b/corehq/apps/analytics/static/analytix/js/gtm.js index 720c502785c3..bd5bd3c48a5e 100644 --- a/corehq/apps/analytics/static/analytix/js/gtm.js +++ b/corehq/apps/analytics/static/analytix/js/gtm.js @@ -52,7 +52,7 @@ hqDefine('analytix/js/gtm', [ var userProperties = { userId: _get('userId', 'none'), isDimagi: _get('userIsDimagi', 'no', 'yes'), - isCommCare: _get('userIsCommCare', 'no', 'yes'), + isCommCare: _get('userIsCommCareUser', 'no', 'yes'), domain: _get('domain', 'none'), hqEnvironment: _get('hqInstance', 'none'), }; diff --git a/corehq/apps/analytics/templates/analytics/initial/gtm.html b/corehq/apps/analytics/templates/analytics/initial/gtm.html index 3aeeb2de3267..cd8396344714 100644 --- a/corehq/apps/analytics/templates/analytics/initial/gtm.html +++ b/corehq/apps/analytics/templates/analytics/initial/gtm.html @@ -3,10 +3,10 @@ {% 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.userIsCommCare' request.couch_user.is_commcare_user %} + {% initial_analytics_data 'gtm.userIsCommCareUser' request.couch_user.is_commcare_user %} {% endif %} {% if domain %} - {% initial_analytics_data 'gtm.domain' domain|escapejs %} + {% initial_analytics_data 'gtm.domain' domain %} {% endif %} {% if ANALYTICS_CONFIG.HQ_INSTANCE %} {% initial_analytics_data 'gtm.hqInstance' ANALYTICS_CONFIG.HQ_INSTANCE %} From 6cf6903589b9c436d2f14547c4276f0493d0956b Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Mon, 20 May 2024 13:05:58 +0530 Subject: [PATCH 8/9] analytics: readme update --- corehq/apps/analytics/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/corehq/apps/analytics/README.md b/corehq/apps/analytics/README.md index 5bb74de90aab..c26f7fb21200 100644 --- a/corehq/apps/analytics/README.md +++ b/corehq/apps/analytics/README.md @@ -108,3 +108,5 @@ Their script is included in [signup](https://github.com/dimagi/commcare-hq/blob/ 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. +Any `id` attribute added to html element for tracking through console should be prefixed with `gtm-` to indicate that this element is likely being tracked in GTM. +This should potentially avoid accidental removal of id attribute from these elements. (Similar approach may be followed for any tooling in case of tracking of elements through console.) From a15d0df1e5a5dafe0abac2fbbc058b9ed80559f2 Mon Sep 17 00:00:00 2001 From: Ajeet <ayadav@dimagi.com> Date: Mon, 1 Jul 2024 20:34:34 +0530 Subject: [PATCH 9/9] nit: readme updates --- corehq/apps/analytics/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/corehq/apps/analytics/README.md b/corehq/apps/analytics/README.md index c26f7fb21200..6ad6ded4b6f7 100644 --- a/corehq/apps/analytics/README.md +++ b/corehq/apps/analytics/README.md @@ -106,7 +106,7 @@ Their script is included in [signup](https://github.com/dimagi/commcare-hq/blob/ ### 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. +Its script is available in the [gtm.js](https://github.com/dimagi/commcare-hq/blob/master/corehq/apps/analytics/static/analytix/js/gtm.js) which loads the GTM tracking script and sends the desired user properties to GTM. +Any tracking of events should be configured at the GTM console end in tandem with the desired analytics tooling. The goal is to track specific features in HQ and also disable them when there is no need via the GTM console itself. Any `id` attribute added to html element for tracking through console should be prefixed with `gtm-` to indicate that this element is likely being tracked in GTM. This should potentially avoid accidental removal of id attribute from these elements. (Similar approach may be followed for any tooling in case of tracking of elements through console.)