Track Internal Link Clicks as GA Events with GTM

Link Click Illustration Image

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.

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.

WhatTypeNaming (Me)Naming (Simo)Comment
VariableCustom JavaScriptCSS Selector - Find ClosestFind closestUse code from Simo's blog post.
VariableCustom JavaScriptCSS Selector - Content Blocks(No name)Use concept code from this blog post.
VariableLookup Table or RegEx TableCSS Selector - Content Block Names---New Variable not found in Simo's blog post. This is either a Lookup Table or a RegEx Table
TagCustom HTMLCSS Selector PolyfillThe Custom HTML Tag
(Headline in blog post)
Use code and setup from Simo's blog post.
TagGoogle Analytics - Universal AnalyticsGA - Event - Content Block Link Clicks---New Tag not found in Simo's blog post.
Track Type = Event
TriggerClick - Just LinksLink 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.

  1. Variable: CSS Selector – Content Blocks
  2. 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).

Here you have 3 possible Content Blocks Link Clicks that you may want to track:

  1. Header Links -> Click on Logo Link in this case
  2. Menu (nav element)
  3. 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.

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.

GTM Variable: CSS Selector - Content Block Names

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.

It’s no problem to match this className in the CSS Selector – Content Blocks Variable, you could do it like this.

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.

GTM Trigger: Link Click - Content Block Link Clicks

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).

GTM Tag: GA - Event - Content Block Link Clicks

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"

Leave a comment

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.