Posts

Google Tag Manager

Event Tracking Automation for Google Tag Manager: downloads, outbound links, email, podcasts

Update: with GTM v2 many things changed. You can have a look at a comprehensive article by Simo Ahava on how to setup event tracking on Google Tag Manager.


Google Tag Manager

Are you using Google Tag Manager? Great. There’s a way to automate the process of attributing GA Events to ALL your outbound links, downloads, email addresses, even podcasts and phone numbers with no effort, no further scripting needed on your code.

Here I will explain how to do it. A huge credit goes to Ryan @ Blastam that not long ago has written this interesting article with guidelines to automate the process on Google Analytics.

Step 0: GTM IN PLACE + JQUERY!

Open a GTM account and install the code immediately after the opening <body> tag of your website (just in case…)

Be sure to have jQuery JavaScript library working on your site (most CMS already have it, check HTML if you are not sure, it does not have to be the last version).

If jQuery is not installed… don’t worry, we can still do it (see Step 3).

 

Step 1: RULES

Create the general All Pages rule if not already present

url matches RegEx .*

Create another rule that I call Activate Outbound

event equals outbound

Add a rule to tell when GTM has to flash a Tag

Add a rule to tell when GTM has to flash a Tag

Step 2: MACROS

Create the following three  JavaScript Variable:

Name: CategoryGlobal Variable Name: cat
Name: Action; Global Variable Name: act
Name: Label; Global Variable Name: lab

Step 3: TAGS

Create two tags, one for the event tracking and another one for the magic script

Event tracking will be as follow:

GA Event Tracking on Google Tag Manager

GA Event Tracking on Google Tag Manager

(remember to add your GA account code)

The Firing Rule will be Activate Outbound (the one set in Step 1)

Now let’s add the following Script on a new Custom HTML Tag

ONLY if the jQuery library is not on loaded on your site add the following line BEFORE the main code:

<script src=”//code.jquery.com/jquery-1.7.2.js”></script>

If jQuery was already present on your pages then ignore the above code and proceed just adding what follows:

<script type="text/javascript">
if (typeof jQuery != 'undefined') {
 jQuery(document).ready(function($) {
 var filetypes = /.(zip|exe|dmg|pdf|doc.*|xls.*|ppt.*|mp3|txt|rar|wma|mov|avi|wmv|flv|wav)$/i;
 var baseHref = '';
 if (jQuery('base').attr('href') != undefined) baseHref = jQuery('base').attr('href');

 jQuery('a').on('click', function(event) {
 var el = jQuery(this);
 var track = true;
 var href = (typeof(el.attr('href')) != 'undefined' ) ? el.attr('href') :"";
 var isThisDomain = href.match(document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]);
 if (!href.match(/^javascript:/i)) {
 var elEv = []; elEv.value=0, elEv.non_i=false;
 if (href.match(/^mailto:/i)) {
 cat = "email";
 act = "click";
 lab = href.replace(/^mailto:/i, '');
 elEv.loc = href;
 }
 else if (href.match(filetypes)) {
 var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
 cat = "download";
 act = "click-" + extension[0];
 lab = href.replace(/ /g,"-");
 elEv.loc = baseHref + href;
 }
 else if (href.match(/^https?:/i) && !isThisDomain) {
 cat = "outbound";
 act = "click";
 lab = href.replace(/^https?:///i, '');
 elEv.non_i = true;
 elEv.loc = href;
 }
 else if (href.match(/^tel:/i)) {
 cat = "telephone";
 act = "click";
 lab = href.replace(/^tel:/i, '');
 elEv.loc = href;
 }
 else track = false;

 if (track) {
 dataLayer.push({'event':'trackoutbound'});

 if ( el.attr('target') == undefined || el.attr('target').toLowerCase() != '_blank') {
 setTimeout(function() { location.href = elEv.loc; }, 400);
 return false;
 }
 }
 }
 });
 });
}
</script>
 

Step 4: SAVE AND PUBLISH!

Always save after each step taken and at the end Save a new container version and Publish – you can even preview and debug it to check if all tags are firing on the right place (or after the right event).

Is it working?

To check the implementation just go on your website, click on an external link or email or pdf download and at the same time on another browser window check your Google Analytics Real-Time reports on the Events section. You should see, after a few seconds, your event correctly appearing. Later, Events will be properly recorded also under GA Content section and you can create any kind of report/advanced segment/goal with them.

 

Monitor real-time events on GA

Monitor real-time events on GA

Important: to make it work you need jQuery library to be loaded before the above mentioned scripts. So if you don’t have it, download, load on your server and call in the header section. Or you can still avoid this implementation and manually tag each single link/download the old way.

A note: you can change name of variables, rules, tags and macro, but consider to adapt the whole implementation accordingly.

Why it is useful

For example you can measure how many downloads of a pdf enrolment form or clicks to an external website that does not have multi-domain tracking.

The good point of such implementation is that you don’t need to hardcode anything on your pages/posts: it magically does the job for you. It’s been tested on WordPress but it should work on all CMS.

Find out more about GTM…

Update: October 2013

New system to automate tracking all links and form buttons through GTM has been launched. In my view it’s a bit more complex than the above solution, and it needs more work to distinguish between different elements (e.g. a pdf from an outbound link), but it’s the new standard. Detailed post by Lunametrics here or by Justin Cutroni here.