colonyDapp
colonyDapp copied to clipboard
JoinColony
Add 3rd party scripts using Google Tag Manager
Specification
Story
Adding 3rd party scripts to the Colony App will provide some much needed insights into how the app is used as well as add additional user friendly functionality that would be difficult to build and maintain internally, such as an in app product announcement and feedback feature. The goal of any included scripts should be to either help improve the product, measure feature usage and improve the user experience.
Description
The easiest way to be able to add 3rd party scripts to the app will likely be by using Google Tag Manager. This will allow the adding and removal of 3rd party scripts without requiring a new app deployment, we will still need to utilise the QA process.
- The Google Tag Manager ID for xdai.colony.io is:
GTM-MDKNCMH - The Google Tag Manager ID for migrations.colony.io is:
GTM-PTNPGHX
(Note: this id will be need to be different in future for when we switch to app.colony.io)
So, we will want to include the GTM ID as an .env variable.
There are two main ways we can add GTM, either by adding the GTM code snippets to index.html, or by using a package
The most popular package (while poorly maintained) seems to be: https://www.npmjs.com/package/react-gtm-module
The GTM code snippet is:
Code to be placed as high in the <head> of the page as possible:
<!-- 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','{{GTM_ID}}');</script>
<!-- End Google Tag Manager -->
Code to be placed immediately after the opening <body> tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{GTM_ID}}"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
The {{GTM_ID}} needs to be replaced with the .env variable in both scripts.
NOTE: We will also need to add in GDPR before releasing this feature.
