Tag Management Systems: Behind the Scenes
Going a level deeper with the TMS architecture (tags and triggers), will help in real life to perform easy debugging of your setups and to understand what exactly goes in the backend when a TMS is in action.
For onboarding any website or app to the analytics system, tag management systems (TMS) have become the de facto way to add any tags to the website. Apart from reducing dependency on IT teams it provides marketers with a lot of benefits around: Performance, Marketing agility, Less coding work, quicker go-lives, cost reduction, site performance and easy debugging.
For this article we will be considering websites which have analytics implemented through two of the market leaders in TMS i.e. Google and Adobe.
Software requirements:
+Google chrome browser.
+Chrome extensions: WASP, GA Debugger, ObservePoint, Adobe Experience Cloud Debugger.
Google Tag Manager
For GTM we will be considering the merchandise store demo site, which many of us might have seen for the GA demo account. Here we will understand the sequence of tags from:
gtm.js to analytics.js to tracking tags.
GTM integration steps suggest adding the standard code with your GTM container ID. On this demo site we can see from source code the GTM script added to the website. And how it is triggered in the backend can be seen with WASP extension.
gtm.js then triggers a call to analytics.js where all the logic for Google Analytics resides.
The analytics.js script loads various other scripts(if configured) required for enhanced ecommerce, enhanced link attribution, etc.
Post analytics.js triggers, multiple GA pageview and event tags are configured through GTM to send the data to the analytics servers.
Merchandise store data is being sent to multiple properties in GA:
A sample pageview tag: sending data to GA property UA-54516992–1, which can be accessed from the GA demo account:
A sample event tag: for scroll tracking:
More GTM details and features can be found here.
Adobe Launch
The latest TMS product from Adobe is the Adobe Launch. There is no additional charge for Platform Launch. It is available for any Adobe Experience Cloud customer.
The older TMS product from Adobe is Dynamic Tag Manager DTM, its sunset update.
The demo site provided from Adobe can be found here. Multiple tags are deployed on this site:
The TMS gets added to the website through the sample code as shown below:
<script src=”//assets.adobedtm.com/launch-EN8689d0d2e7d84048be077a460fec531e.min.js” async></script>
The un-minified version can be seen by removing “.min” from the file path.
Adobe debugger chrome extension can also be used for further exploration:
Next we will understand the sequence of tags from launch-%environment_id%.min.js to AppMeasurement.min.js to the tracking tags.
A sample pageview tag: sending data to Report Suite: tmd-web-retail-prod1
A sample event tag:
More Adobe Launch details and features can be found here.
To get started with Adobe Analytics through Adobe Launch.
Quick activities:
Two other popular TMS products can be explored by the steps below.
- Tealium
Explore on https://www.munchkin.com/ by looking for the tag
https://tags.tiqcdn.com/utag/munchkin/munchkinus/prod/utag.js
- Ensighten
Explore on https://www.benenden.co.uk/ by looking for the tag
https://nexus.ensighten.com/benenden/prod/Bootstrap.js
Key Takeaways
- If any tag has stopped working, start from the source code of the web page to see if the TMS code is missing.
- Look for any JS errors in the browser console, to see for any blockers of our code.
- All TMS products provide a debug mode or option, utilize it to the fullest.
- Network panel in the browser will give you a good idea of the sequence in which JS files and tags are getting loaded on the site.
Closing Thoughts
Starting to understand the JavaScript calls happening in the backend of TMS will help in identifying the issues quicker and resolving them with the IT teams with effective communication of root causes.
Happy Exploring !!!
Thank you for taking the time to go through my article.
