Implementing GTM has been a huge time saver in terms of getting new tags live, making sure you are sending all the useful events to tag manager is crucial to making it work otherwise you’ll be going back to the old cycle of asking for code changes every time you want to measure something new. To avoid this gtm recommends building comprehensive dataLayer by setting up js objects on each page you want to send data from.
dataLayer = [{'key':'value', 'company':'marketlytics'}];
And triggering dataLayer events on important actions:
dataLayer.push({ 'scroll':'25% done', 'event':'reading blog' });
But this is still a bit tedious and it happens every so often that you forget to track an action, this got me thinking since each gtm tag is conceptually similar to a script tag why cant we add js/jquery listeners for different actions within the tag manager web interface especially since most of what we need to measure is already present on the page in one form or another.
Well you can all you need to do is create a custom html tag and add your js script to it.
this post assumes knowledge of tag manager and mixes terms fairly frequently, checkout the intro to gtm first…
The first issue that crops up is gtm is async so it doesn’t wait for the page to load before triggering tags. If we are using jquery to add triggers to page elements its important that 1) jquery library has loaded 2) the element we want has already been rendered
hello gtm.dom
The documentation mentions a default gtm event gtm.dom which is fired when dom is ready. So all we need is a rule to trigger our custom html tag with jquery code based on this rule.
rule: event equals gtm.dom
Now our tag will be loaded once the dom is ready. The jquery listener will be set on the action we define. And it will be triggered when the action takes place.
ps. you can just fire the actual script you want at gtm.dom and send data(dont forget to make the rule a bit more specific and define additional conditions, universal rules get messy). For example send data to GA:
jQuery('#button').click(function(){ '_gaq.push(['_trackEvent', 'homepage', 'click', 'button']); });
but that doesn’t actually build a dataLayer and means our actions aren’t reusable else where. So that’s no fun we want to benefit from the abstraction dataLayer offers.
building event chains
Instead what we want to do is build a chain where the first level tag (let’s call it data tag) pushes key values to dataLayer and the next level of tags (send tag) are triggered based on this push and deliver data to platform of choice..
To do this let’s change up our tag to
jQuery('#button').click(function(){ 'dataLayer.push({ 'category':'homepage', // or use a macro to get url 'action':'click', 'label':'button', 'event':'click-event'}); });
Next we would build a tag that is fired on the rule event equals click-event
For example based on this rule we can trigger a Google Analytics Event tag. Or a new universal analytics event hit or both 🙂
ps. at the same time we can also use macros within the data level tags or send level tags, thus making the code even more reusable.
So let’s review what we did, we created a data tag that is fired when dom is ready. This could be a jquery or js script which would listen for an action on the page and once the action happens this pushes information. Then based on the specified event a send tag / set of send tags are triggered sending info to multiple platforms.
ps. the chains are also very helpful if you just want to move your existing ga scripts to gtm. For example I am a big fan of scroll tracking on long pages and was using this script by Rob
When I got around to moving marketlytics.com GA tags to gtm I thought transferring this would be good to have all my tags in one place not mention have benefits of async loading. To do it I just created a custom html tag for the script and loaded it on gtm.dom then added a dataLayer event at the end of script to inform when the was finished loading. And finally setup a second gtm tag to initiate scroll tracking.
Thank you for joining our monthly newsletter
Follow us on Twitter
