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

Google Tag Manager

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: Category; Global 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.

/17 Comments/by
You might also like
Subdomain Tidy up your subdomain and multidomain web metrics with Google Tag Manager
Facebook Pages, get more likes for free Facebook business pages: how to bypass paid advertising to get more likes and engagement
Google Databoard The continuing r-evolution of Google services/tools and its benefits for the marketing industry: Think Insights & Databoard
Google Analytics filter social media channels Google Analytics custom filters to tidy up your metrics: how to split up social media from referrals
Google Universal Analytics UA How to track each Google country search engine on Universal Analytics
Google Universal Analytics UA Did you know Google+ Ripples? It helps you monitor shares of a post on Google Plus
17 replies
  1. Seref CAN says:

    hi, thanks for sharing. but i have a problem.
    When i try to create version i take this error message,

    type:invalid template

    location: active outbound (this is my custom html tag name)

    description:Invalid HTML, CSS, or JavaScript found in template.

    • Paolo Margari says:

      I see.. Sorry John, for some reasons when pasting the code here in the post, some HTML tags ended up in the script so clearly it couldn’t work on GTM. Now it should be ok.

  3. Rob King Crack says:

    Same problem as John, I copied code into notepad, then into GTM but getting ‘Invalid Template’ error… any idea what’s causing this?

    • Paolo Margari says:

      Hi Rob, for some reasons when pasting the code here in the post, some HTML tags ended up in the script so clearly it couldn’t work on GTM. Sorry, now it should be ok.

  4. Fede says:

    Hi Paolo,
    thanks for the useful information!
    In the same way you track outbound links, you can track also email, download, telephone? Because in the script code we past into the Custom HTML Tag, already there are these events.

    We have only to set a new rule to fire each event?

    • Paolo Margari says:

      Hi Fede, sorry for a late reply. The custom HTML includes a large variety of events so no need to set up a rule for each event.
      This procedure needs just two rules: All pages for the Custom HTML and event=track (or whatever you call the event) for the GATC event tracking. I hope it helps.

  5. Mike Betts says:

    Paolo, great post. However I don’t see any events in my GA. I noticed that if my rule “Activate Outbound” contains “outbound” it never fired in GTA debug mode. However if I changed this rule to contain “track” it does fire, but alas still does not show up as an event in GA?

    • Paolo Margari says:

      Hi Mike, sorry for a late reply and thanks for your comments. I reckon that there was a mistake in my code.
      To make it work the Rule “Activate Outbound” has be “event = track”, not “event = outbound” as shown in the image. I’ll amend the post asap.
      Thanks again.

  7. Ben McCarty says:

    Hi Paolo, your post is invaluable. It’s the only one I could find with a walk-through on Event tracking via Google Tag Manager, but it’s very well done too.

    I ran into one issue and I can’t figure out what’s causing it. When I use GA Debug for Chrome to view the Events, they are being passed with an account ID of UA-XXXXX-X (see attached screenshot). I’ve quadruple checked each setting in GTM but can’t spot the problem and the Events are not registering in GA.

    I’d appreciate any help!

  9. David says:

    Paolo, what’s in your opinion the most effective way to track outlinks these days? I’m running a site with plain GA, but thinking of adding GTM to do that in a more painless way. I remember you saying, probably 3 years ago, that the click listener attribute had been surperceded with the last more robust GTM versions.. is that still the case or is there any other more efficient method to do that? the goal is to track outbound affiliate links effectively

Comments are closed.