Tracking Internal Link Clicks as Google Analytics Events isn’t something new, and there are many reasons for doing so:
- Prioritizing of content blocks on front page
- Ordering of Menu Links based on popularity or sales
- Better understanding of navigation (do people click on releated articles, do they use breadcrumbs for navigation, etc.)
To examplify better, if you are going to prioritize Content Blocks on the front page, you need to group your link clicks. That could for example be:
- Recent Articles
- Shortcuts to popular Categories or Brands
- Menu(s)
- Internal Advertising (if you don’t track this as Enhanced Ecommerce).
- Etc.
The “grouping part” of those links in the tracking can be the difficult part. It should be easy to set up and maintain in Google Tag Manager, using the least amount of Google Tag Manager Variables, Triggers and Tags.
The easiest method I have found is to tweak some work from who else than Simo Ahava. The solution we are going to tweak can be found in the blog post called Capturing The Correct Element In Google Tag Manager (I’m linking directly to the headline “The Solution” in that blog post). In the name of meta, The Solution is to tweak The Solution…
Implement all the code and setup that Simo describes in his solution, except from the code below that you find at the end of his blog post.
1 2 3 4 |
function() { var el = {{Find closest}}({{Click Element}}, 'div[id^="product"]'); return typeof el !== 'undefined' ? el.id : undefined; } |
This is the part we are going to tweak, in additon to adding some more stuff to Google Tag Manager.
The Tweaked Solution of The Solution
First, I use some different namings than Simo for the GTM Variables and Tags. They are translated in the table below, which also shows which Variables, Triggers and Tags we are going to create.
What | Type | Naming (Me) | Naming (Simo) | Comment |
---|---|---|---|---|
Variable | Custom JavaScript | CSS Selector - Find Closest | Find closest | Use code from Simo's blog post. |
Variable | Custom JavaScript | CSS Selector - Content Blocks | (No name) | Use concept code from this blog post. |
Variable | Lookup Table or RegEx Table | CSS Selector - Content Block Names | --- | New Variable not found in Simo's blog post. This is either a Lookup Table or a RegEx Table |
Tag | Custom HTML | CSS Selector Polyfill | The Custom HTML Tag (Headline in blog post) | Use code and setup from Simo's blog post. |
Tag | Google Analytics - Universal Analytics | GA - Event - Content Block Link Clicks | --- | New Tag not found in Simo's blog post. Track Type = Event |
Trigger | Click - Just Links | Link Click - Content Block Link Clicks | --- | New trigger not found in Simo's blog post. |
What you choose to name your Variables, Triggers and Tags are up to you, just use this table as a reference in your naming.
Implementing The Solution from Simo
Implement some part of The Solution from Simo. Remember, we are going to tweak 1 Variable, so what you need to implement from Simo in Google Tag Manager is this (using “my” naming):
- Tag: CSS Selector Polyfill
- Variable: CSS Selector – Find Closest
Identify your Content Block Variables
The next thing you must do is to set up 2 Variables in Google Tag Manager.
- Variable: CSS Selector – Content Blocks
- Variable: CSS Selector – Content Block Names
But before you do that, you will have to identify what I call “Content Blocks“.
Imagine this is some of your HTML code (DOM Elements).
1 2 3 4 5 6 7 8 9 10 11 12 |
<header> <a href="https://www.mywebsite.com"><img src="/logo.png" alt="My Website" /></a> <nav id="top"> <ul> <li><a href="https://www.mywebsite.com/link-1">Link 1</a></li> <li><a href="https://www.mywebsite.com/link-2">Link 2</a></li> </ul> </nav <ul class="breadcrumb"> <li><a href="https://www.mywebsite.com/">Home</a></li> </ul> </header>> |
Here you have 3 possible Content Blocks Link Clicks that you may want to track:
- Header Links -> Click on Logo Link in this case
- Menu (nav element)
- Breadcrumb
There is 1 possible problem when it comes to grouping those 3 Content Blocks in our tracking, and that is to target only clicks on the logo since it has neither a id or a class attached. We will have to target link clicks within the header element itself. But targeting the header element, means that also the other links within the header could be tracked as Header Link Clicks, which is not correct.
Luckily this is easy to avoid with this solution, more on that later.
GTM Variable: CSS Selector – Content Blocks
This is the code from Simo that I have tweaked. If you compare the code snippets, you will see that I have added a Javascript Variable called sel, and changed the last part of the code.
1 2 3 4 5 6 |
function() { var sel ='header, nav[id^="top"], ul[class^="breadcrumb"]'; // Replace with your own Content Block values var el = {{CSS Selector - Find Closest}}({{Click Element}}, sel); return el.id || el.className || el.tagName } |
In the Javascript sel Variable, add the elements (Content Blocks) that you are going to target clicks within. If you have several elements to target, you just add them as a comma separated string as in my example. The ordering of the elements in the string doesn’t matter.
In Simo’s example code, that code would only walk up the DOM and try to find an element with a specific id. This code will look for className and tagName DOM Element Objects in addition.
GTM Variable: CSS Selector – Content Block Names
This GTM Variable is where the “magic”happens, and will give you meaningful Content Block Names in your tracking. This Variable will be tracked as Google Analytics Event Action.
This Variable is either a LookUp Table or a RegEx Table. I would recommend to go for a LookUp Table if you can, but if your elements and DOM structure are complex, you may have to use a RegEx Table. If you use a RegEx Table, try to make your RegEx as non greedy as possible.
As I wrote earlier about potentital problem with targeting the header element, using a LookUp or RegEx Table for defining Content Block Names will solve that problem if done correctly. The ordering of the elements matters now. The most “specific” elements (top & breadcrumb in this case), have to be listed before the “generic” element (header) that they are wrapped within.
Notice that tagName will return the element in UPPERCASE, as shown with HEADER.
When should I use a RegEx Table instead of a LookUp Table?
Imagine that you are going to track Related Article Link Clicks, and this is your HTML.
1 2 3 4 5 |
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 related-article"> <ul> <li><a href="/my-awesome-article">My Awesome Article</a></li> </ul> </div> |
It’s no problem to match this className in the CSS Selector – Content Blocks Variable, you could do it like this.
1 2 3 4 5 6 |
function() { var sel ='div[class$="related-article"]'; // Matching "ends with" "related-article" var el = {{CSS Selector - Find Closest}}({{Click Element}}, sel); return el.id || el.className || el.tagName } |
However, if you are going to match this in your CSS Selector – Content Block Names Variable using a LookUp Table, then you would have add the complete className string to the Input field like this:
- col-lg-4 col-md-4 col-sm-6 col-xs-12 related-article
In cases like this, using a RegEx Table would be more flexible.
GTM Trigger
Link Click – Content Block Link Clicks
The trigger set up is shown in the image below.
You may wonder why I haven’t “checked” the Wait for Tags Checkbox? In some rare cases I have experienced that Wait for Tags has caused conflicts. You shouldn’t activate Wait for Tags without proper testing. Instead I use the Beacon API to improve the quality of this tracking. Not all browsers and browser versions support Beacon so it’s not perfect, but it’s better than screwing things up.
To add beacon to your tracking, either do in your Google Analytics Settings variable, or override the settings of your tag. In the Fields to set setting, add a new field with the following values:
Field name: transport
Value: beacon
Google Analytics Event Tracking Tag
This is the setup of the Google Analytics Event tag.
Use a good and descriptive Event Category to describe what you are tracking. Event Action will be the values from the LookUp/RegEx Table Variable {{CSS Selector – Content Block Names}}.
What you are going to track as Event Label is up to you. In this example I’m tracking {{Click URL}}. If you have a good URL Structure, Click URL can be a good choice. If you have a URL Structure that isn’t the best, or URL’s are changing often but the Click Text isn’t, then Click Text can be a good choice.
Beware that you may have to tweak Click URL or Click Text to improve data quality (you may have to create an Variable that tracks either Click Text or Click Alt Text as an example).
Some final words
Although I have found this method to be the easiest, it comes with some final words.
If HTML DOM Element Objects don’t have a good structure, you may not be able to call this method “easy” out of the box. You may have to ask IT to implement a structure that make it easier.
Since this method relies completely on the structure of your HTML code, it may break if the site is changed (ex. IT release, new CMS version etc.). Also test your tracking well before publishing the Google Tag Manage setup.
With that said, happy tracking!
And of course, I wonder what method you are using, or if you have used this type of tracking with success.
Be the first to comment on "Track Internal Link Clicks as GA Events with GTM"