A solid way to build SEO around your blog is obviously to link to sources and to other in-depth articles for your readers to route in. This is an ethic, yet convenient, way to manage a blog and, last but not least, makes Google not evil. On the other hands, be able to measure how much and which kind of traffic you’re driving to your sources is crucial for your content strategy, as It could give could insights about which kind of topics your readers are interested in and you should craft in a first place. That’s why the third step of our learning path is about how to track outbound links clicks and how to efficiently report it on Google Analytics.

Tracking clicks in Google Tag Manager was out to Google Tag Manager specialists from the beginning of time. It is a relatively easy task and in its simpler implementation it just implies tracking clicks like Google analytics events, this approach will steadily bloat your GTM container and ends up in a complete mess, as each link must have his dedicated tag. A better solution is to just add one tag that will serves for all your outbound links. In other words, and Event Router.

The idea of the router is quite simple, yet powerful: the router is made with a simple JavaScript code that pushes a custom event to GTM, which in turn triggers the Google Analytics event. Confused? Let’s make it step by step!

On Google Tag Manager: Set up the Data Layer Variables

First of all, we need to prepare a couple of GTM data layer variables. You may find them in the Variables section, but since in a typical GTM setup you’re going to use lot of them. my advice is to use the Folder feature to better organize your space (1). Anyway, for the sake of completeness, data layer variables are those kind of variables that hold data you push from the page to GTM. Let’s see them as a bridge for connecting the page (trough JavaScript) to GTM. They are really easy to set up if you know the basis.

Feel free to name your GTM variables as you want or use the following table for your convenience (2).

GTM Variable NameGTM Variable TypedataLayer NamePurpose
Custom Metric IndexData LayercustomMetricIndex of the custom metric to increment as set on Google Analytics.
eventCategoryData LayereventCategoryThe category of the event sent to Google Analytics.
eventActionData LayereventActionThe action of the event sent to Google Analytics event.
eventLabelData LayereventLabelThe label of the event sent to Google Analytics event.
eventValueData LayereventValueThe value of the event sent to Google Analytics event. You probably want to set it to zero.

On Google Analytics: Set up the Custom Metric

Setup outbound link click on GTM: custom metric

Strictly speaking you should not consider an outbound click like…err…a conversion as It technically doesn’t bring you value or money. On the other hands, it should be useful to count the number of clicks split by, such as, acquisition channels, landing pages, devices or other dimensions. Thus, not just counting events or setup a Goal, better here is to set up a custom metric.

The setup is really trivial: just go to the Administration section on Google analytics, then on Custom Definitions, then Custom Metrics (1). Add a new custom metric (2) of scope HIT and formatting Integer (3). Take note of the auto-assigned Index field, as we’re going to use it later, and that’s it here.

On Google Tag Manager: The External Links Trigger

Go back to Google Tag Manager and go to the Trigger section. We need to create a trigger that is fired only when the user click to somewhat that points to an external website. Technically speaking, it is a Just Links trigger and it is fired when the clicked URL does not contain your domain address (1). Of course, you must avoid any possible race condition between tags, so be ensured to check the Wait for Tags box (2). This will make sure that all tags meeting the conditions to be included in the page are correctly thrown before leaving the page itself. A waiting time of 2000 milliseconds is probably safe enough, here.

Then, don’t be afraid to also activate the Check Validation box (3), as in the above figure. This will need you to add an inclusion condition, but this will make sure that only valid link actions will be recorded. Use a simple .* pattern as a condition to make the trigger be fired on every page on the domain.

Finally, makes the trigger firing only on those clicks to links pointing out of your own blog using a simple exclusion condition on the destination URL (4).

On Google Tag Manager: The “AnalyticEvent” Custom Event

As we outlined before, the Router will fire a custom Event to GTM called AnalyticEvent. This trigger in turn will fire the “real” Google Analytics Event Tag. Go again on the Trigger section and create a Custom Event trigger (1). Call it AnalyticEvent (2) and make it to fire on All custom Events (3).

On Google Tag Manager: The Router

This is the coolest part of our journey. Really! And this is much simpler than you make imagine!

Go to the Tags (1) session and create a new Custom HTML Tag (3), then add the JavaScript implementation of the Router (3) and let him firing when the user clicks an outbound link (4). If you like, you can prevent logged users to trig the tag.

The code below is a router in its simplest form, with only one rule.

As you may imagine, the customMetric here is the index of the Custom Metric you’ve set up on Google Analytics. As you may notice, the fields being pushed (except the event field, which has a special effect, more on this below) have a dedicated data layer variable, as we created them on the first step of the tutorial. Thus, the values will be available as GTM variables and can be used on other Tags and Triggers as well.

Of course, this is a trivial implementation of a Router. But can’t you see the powerful and flexibility of this? You’re in the realm of JavaScript, here! Wanna split events by categories? Just add a switch() statement and decode the conditions. Wanna strip away the path and just keep the hostname in the Click URL? Just use some string handling magics with JavaScript on the {{Click URL}} auto variable and you’re on the way on. As another example, here’s a router which split clicks to our partner’s site among the rest (assuming the hostname of the partner is hold on the {{Partner’sHostname}} GTM variable).

As I said before, your possibilities are endless, here!

Just one last advice! Watch out to not remove the event field on the dataLayer.push()! This is responsible of calling the custom GTM trigger AnalyticEvent we’ve set up just a few lines above. Without it, GTM won’t be aware of the push, thus the custom event won’t be fired at all!

On Google Tag Manager – The last step: Firing the Google Analytics Event!

GTM for Bloggers: firing an outbound click trigger

Now you just need to fire a new Tag (1) that sends a Google Analytics tracking event (2). All the data you need to send are already available thru GTM Variables (3) as it is the index of the custom metric to increment (4). Finally, add the AnalyticEvent we set before as a trigger for this tag, save, publish the container and let’s the dance begins!

Conclusions and how to use collected data

Ok…err…we’ve started collecting data. But where’s going the collected data, at first place? It’s on Google Analytics, of course. But where?

As we said before, we tracked the clicks as Events, so we’re going to find them in the Event Area, as expected, but this is probably not so useful. However, since we’ve used the event to itself to increment a custom metric at the same time, we can use it in Conversion Reports. But this will covered in a future series of post about Web analytics. Meanwhile, thanks for following and don’t forget the other articles of the Google Tag Manager for Bloggers learning path. Ciao!

Share This