An introduction to the magic of Google Tag Manager
3 minutes read | 449 words by Ruben BerenguelIf you want to read a quick overview of this in Spanish, check my post about GTM at DoctorMetrics.
Google has just unveiled a new tool: Google Tag Manager. I have spent a few hours playing with it (both before and after official release.) And it’s awesome! Or at least, it has quite a lot of awesomeness, hidden behind a seemingly simple interface.
Its main feature is the fact that you can get away with just a piece of included code. You don’t need to include your Analytics code on top and your DoubleClick counters in all the pages you need. There’s just one thing you can’t do: change the content of your page (via document.write)
So, what’s Google Tag Manager good for (exactly)?
It centralizes the management of page tagging and tag execution based on rules. A simple example: you want to track how many people click on the Atom subscribe link in your Subscribe page with event tracking via Google Analytics. This is straightforward with Google Analytics, in fact: you only need to set the correct event for onclick in the page source like this:
_gaq.push(["_trackEvent", "SubscribeRSS", "Sidebar"]);
But what happens when you want to change this tracking category, or add a new tracking to another link? You have to edit all required pages in your site. If the site is well structured, this will be easy, but not all websites are well-structured. Or you are not the webmaster. This is the main point: what if you are just an external consultor? Exchanging 15 emails to get the IT staff to add this onclick can easily drive you nuts (and cost you and your employer many hours) You don’t have to get nuts any more.
After creating a container and adding the GTM code to your site, you just need to add the required page selector in Google Tag Manager’s rules:
url> contains> "subscribe"
As easy as that… But you also need to add the event tracker to that link. How? The simplest way I’ve come up is with some basic jQuery magic. Include jQuery (which you can do for all pages, not just subscribe!) and then set the gaq push event, by selecting the correct link via the href attribute of the link. You can select based on text, or anything you fancy, of course.
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$('a[href$="http://www.mostlymaths.net/feeds/posts/default"]').click(
function(event){ _gaq.push(["_trackEvent", "SubscribeRSS", "Atom"]); });
</script>
With jQuery you can go as far as to dynamically change the link to add campaign tracking, to any link in the page:
$('a[href$="http://www.mostlymaths.net/feeds/posts/default"]').attr("href",
"http://www.mostlymaths.net/p/subscribe.html?utm_source=GTM&utm_medium=Redirect&utm_campaign=Testing")
The options available are almost limitless: enjoy your new GTM goodness! And feel free to contact me for more implementation details or ideas.