Google Tag Manager (GTM) is a container which can be included as a script on your website. Usually a GTM script is something that gets delivered by a client.
As high as possible in the <head> tag:
<!-- 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-T8LFZTD');</script>
<!-- End Google Tag Manager -->
As high as possible in the <body> tag:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T8LFZTD" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
After having done this part, it ends, and we never look back at GTM again.
Start by opening https://tagmanager.google.com to create your new instance. This is done pretty fast and as a result of creating your tag you can immediately add the above scripts to your page.
Please be aware that this doesn't do anything as the container is still empty, and you are in charge to fill your container with relevant scripts which will help you in enhancing your website.
Also understand that this usually is the moment where there is (most of the time) no need for any developer assistance anymore as everything added will be managed in the Tag Manager interface.
This brings us to the fact that we actually have to embed something in the container.
We are always implementing GA. We are used to embedding the code, configuring the UA code in the config files per environment, and we perfectly know how to trigger custom events or page views in our own code. The fun thing is that all of this isn't relevant any more (or at least not in a basic implementation) when using GA within your GTM container.
Without writing out every detail a basic implementation is written in the following article: https://www.analyticsmania.com/post/single-page-web-app-with-google-tag-manager/
To wrap up the most important things todo:
The fun part is that without any code change on your application you have integrated a dynamic GA implementation which triggers page views and loads the right property per environment.
While there is always a way to embed custom code, GTM offers a lot of predefined tags and variables you can use. For variables this covers history, paths, clicks, forms, etc. For tags, you can embed: Hotjar, Google Surveys, Cookiebot, Bizrat, Hubspot, Foxmetrics, LinkedIn insights and many more.
Overall you can say that when you embed a GTM container it doesn't make any sense to add separate scripts as a developer as it's way more helpful to have them included in one central place.
Within GTM you have a very nice preview mode. With the preview mode enabled a temporary browser based cookie will be set so only you can review the current changes. You can also share this preview link with others, so they can review as well, but as manager you can also quit the preview for everyone.
Only after the changes are approved you can publish a new version, so the changes will be live. Every new version will have a version number and description so you always have insights in your revisions or you can rollback to an older version.
If we need to implement codes for a GTM we didn't create (for example a code from a client), we need to either ask them to add tags or get access. In this case we need access to GTM with publishing rights, so we can add new tags and deploy them ourselves as well.
Within the process you sometimes might need some extra debug information besides the preview from GTM. Tools below are advised to install in your Chrome web browser:
| Last modified | Thursday, January 28, 2021, 11:40:41 AM UTC |
| Last author | Glenn de Haan |
| Commit ID | 4c43408 |