2017 Dec 20

An introduction to Google Tag Manager and a guide for setting up custom event tracking for links

Google Analytics is a technology that is quite ubiquitous at this point in time on the web. People generally have a grasp of what it is and what it can do whether they operate their own website, work on someone else's or have exposure to it through other means be it personal or professional.

One tool that the analytics side of things doesn't natively offer is the ability to track custom events (without custom intervention). Typically there needs to be some auxiliary mechanism by which the events are recorded into analytics. When we say custom events, we mean non-standard events that are specific to your website outside of page views.

We often have requests to setup very pointed tracking on elements within a website. These could be calls to action on just the homepage, or 3 links on a specific page, etc. The point is that they are meant to expose activity on something very unique in order to find out if it's doing it's job or if it's being used at all.

Traditionally to set up custom events, custom code (typically Javascript) would need to be developed to record events. There's some issues with doing it this way.

  1. Maintenance costs go up as there needs to be changes to the website code
  2. If you aren't a developer, you'll likely need one to accomplish the previous point.
  3. Very specific events only needing to be up for a short period can limit flexibility, as you'll need to plan ahead tracking down a developer and coordinating the content that will need to be tracked.

A Streamlined Approach

There is another, better way. While googling around for how to set up custom event tracking, you may have come across something called Google Tag Manager. The name at first sounds a bit crytpic for what it is, but where we're concerned, it's a great alternative for tracking your custom events. Basically instead of writing code against your website, you can define all your events from within an interface that Google provides. No code is needed, no developer is needed, and all can be achieved through a nice interface hooked up through your google account.

In this post we'll walk through creating custom event tracking for specific outbound link clicks. Tag manager can be setup to do many things, but this post will be scoped to click tracking. Also, once you've walked through this procedure, you'll likely inherit a global understanding of what tag manager is and other things you can do with it. This post also assumes you already have a Google Analytics account setup. 

Setup a Tag Manager Container:

First head over to the Google Tag Manager site and login with your existing google account. At first, you'll be prompted to create a new "container". This consists of a name, we like to use the client name for this. We'll also need a container name. We like to use the web address assuming it's for a website.

GTM new account page

Once that's done, you'll see a popup with the container code needing to be put in to your website with instructions for placement. The nice thing is this only needs to be done once. Following this there will be no need to touch any code again. To get at this code again, you can see it by going to "admin" > "Install Google Tag Manager"

code from GTM

Setup Variables

Tag Manager has the concept of both user-defined and built-in variables. We'll want to turn on the default click ones that are built in, and below we'll also go over setting up your analytics code as a custom variable.

From the left menu, click on "Variables". Then click the configure button at the top. This will bring up a choice of ones that can be turned on for use. Choose all available under the "Clicks" category and save.

Built in variables display

Setup a custom variable for your GA code

On the same Variables screen as above, under "User-Defined Variables" click on the "New" button. From the list, choose the "Constant" variable type. Give it a name and set the value in the field to be your google analytics code, which usually looks like "UA-XXXXX-X". We'll use this later when setting up the tags.

constant choice GTM

Setup a Trigger

A trigger is basically a prompt with conditions applied to tell GTM when to fire your events. On the same left menu we've been using, choose "Triggers", then click the "New" button at the top. From the list of trigger types, choose the "Just Links" type. To configure this trigger, name it for what it does. If this is specific to a link that goes to a website, maybe call it "link to XYZ website" so you can remember what it does. Then choose the "Some link clicks" radio button and enter in conditions. Here's where our built in variables are used. Most of the time for links, this list is all you'll need. We'll use the Click URL one and enter in the link to look for.

just links trigger

Setup a Tag

In this last step, we'll configure a tag to run based on the previous trigger we've setup. Again, on the left menu, choose "Tags" and click the "New" button at the top. Under tag configuration, choose universal analytics. Use the following options as a baseline guide. You can of course customize these to your liking.

  • Track Type: Event
  • Category: Outbound Links
  • Action: {{Click URL}}
  • Label: {{Page URL}}
  • Value: {{Click text}}
  • Non Interaction Hit: False

Finally, under "Enable overriding settings in this tag", choose the {{GA code}} variable we setup earlier. 

Configure the tag triggers

In the bottom area of the tag configuration window, choose the trigger we've setup previously so that when we click on that specific link, it'll record the above information we want to track based on the tag configuration.

GTM tag configuration

Testing our configuration

  1. Click on the "Preview" button (located on the top right hand corner, right next to the "Publish" button.)
  2. Now visit any page on your site (in the same browser) and you should be able to see the "Google Tag Manager" console appear at the bottom of the page since you're logged in to your GTM profile while in preview mode.
  3. To check if the events are working, click on the link you've setup. Links opening in both a new window and not will be able to be tracked without issue. If the event is working, you'll see the tag move from the "not fired" to the "fired" section in the GTM console.
    GTM Preview console

Publish the Changes

Once you've confirmed the events are working, you need to publish your work by clicking on the "Submit" button at the top right. You will be asked to add a name and description. This is kind of like providing a message for version control when committing some changes so we have some historical reference of activity. Once done, click the "Publish" button.

All your outbound link clicks will now be recorded in Google Analytics. Remember that you need to click Submit and Publish each time you make changes to anything. There is only a single Submit and Publish button for all changes. Check under the "Versions" tab to see a record of all changes that have been made.

Confirming events from Google Analytics

To see your events from the perspective of your analytics account, login to your GA account and proceed with the following steps:

  1. Click on Real-time > Events from the left panel.
  2. Go to your site and click on the link that has the event setup for it. 
  3. Within seconds, you'll see the event appear on this page. It will look similar to the following image containing the data we've configured to capture.

GA realtime events chart

Conclusion

Tracking of custom events is quickly becoming a standard requirement for most sites. Rather than trouble yourself with having to implement this via code, try and explore Google Tag Manage as your solution. It can do more than we've covered in this post so it's a worthwhile endeavor to learn. It perhaps gets overlooked due to it's deceiving name but once you understand what it does, you can leverage it as much as you do with Google Analytics itself.