Do you know how your website visitors are interacting with content on your website? With Google Tag Manager it is super easy to track link clicks and learn how to improve your website.
Decide that and how to track. Have a plan.
Before setting one Tag that will track all the links and send them to Google Analytics, think about what exactly you want to track, what kind of data to send to Google Analytics and how to analyse them after.
I’ve come up with such link categorization:
- Outbound links – links leading outside your website.
- Your Social media profiles – links to your Facebook, Twitter, Linkedin and other profiles.
- Social sharing links – well, links to share your awesome content.
- Outbound website links – other links that lead to different websites.
- Internal links – links that does not lead visitors outside your website.
- Navigation links – links inside various blocks that help users to navigate through the website, including main and secondary menus, related content blocks and etc.
- Call-to-action links – links that lead to certain user actions, like call-to-action buttons and links that open & submit various forms.
- Interactive element links – links for videos, slides, tabs, accordions, filters, modal windows and other elements that change the content dynamically and show user engagement.
- Content links – links inside articles and page content.
You can also group links by other common traits, like:
- block type – links inside specific blocks, for example: main menu vs related posts;
- position – where the links are appearing on the page, for example: footer vs content vs header call-to-action buttons;
- pages – links on specific landing pages;
and etc.
Often some of these links overlap, like having call-to-action and outbound links inside the article, but in the end it’s up to you to decide how to categorize and track links on a particular website.
I will use this blog as an example and have the following link structure for tracking to get better understanding of visitor interactions:
- My social profile links – Are the visitors interested in connecting with me on social networks? [Spoiler: findings are disappointing in my case.. ] Which social networks are more popular among my blog visitors?
- Social sharing links – Is the content being shared via sharing buttons? Who is sharing it the most?
- Outbound links – Which outbound links (except social profiles and sharing) are getting more clicks?
- Inner links inside Related posts & Recent posts blocks – Are these links actively used?
- Inner links on post previews – Are the visitors clicking more on the title or “read more” button?
- Inner links inside the articles – How many visitors are navigating using the links inside the articles? Which are the most popular?
And few more frequent cases, although not present on my website, so I will skip them for now:
- Video plays, JavaScript powered FAQ toggles & content tabs – Learn what content interests visitors the most.
- AJAX website menu tabs – Generate virtual pageviews and track content usage that is untrackable with a default setup due to no page reload and URL change.
Your could have more detailed structure or much simpler, track only specific links or all, it’s fine as long as you get the data and answers you need.
I’ve decided to use Event Category to separate different links groups, Event Action to save link URLs, Event Label – for link anchor texts (to distinguish same links in different places).
Again, you may send different data, as long as it makes sense for you, for example: clicked URL hostname (can be used to group links by clicked domain) or particular parts of the URL. Think about what do you need for the analysis and group data so that it would be convenient and flexible to use. Also remember that Page URL is being sent along with an Event by default, so usually no need to send it one more time as Event Action or Label.
While most of the time you may be using Events, for some cases like JavaScript/AJAX powered sections on a website, Virtual Pageviews will be more appropriate. Check my previous article on Event Tracking vs Virtual Pageviews if you are in doubts.
Setting up Google Tag Manager
Variables
To start you need to enable Built-in Variables (see below) and later I will cover some custom ones.
Tags
As I’ve mentioned before, we will use Google Analytics Events and create a separate Tag for each link type, with the following setup:
Tag Type: Universal Analytics
Tracking ID: {{GAID}} – Constant Variable with GA tracker ID
Track Type: Event
Category: Category Name – Name for the link category, entered manually for each Tag
Action: {{Click URL}}
Label: {{Click Text}}
There will be some exceptions, that I will cover along the way.
Triggers
Triggers are the most interesting part as with them you can separate links in different groups for further analysis.
This will be the default setting for all the Triggers.
Often the confusion arise with using Just Links or All Elements for Click Trigger. All Elements Listener will push click events on all clicks and return the exact element clicked. So if the user clicks on the link <a href=”#home” id=”home-link”><span>Home</span></a> All Elements will return <span> element (direct element on which the click occurred), while Just Links – <a> (link element on which the click occurred).
I’ve also left Wait for Tags option enabled as some of the links will reload the page and it will ensure the Tag will have the time to fire while users won’t notice the delay.
One more common confusion if choosing Wait for Tags is Enable When option. It is the precaution, if the delay from Wait for Tags suddenly conflicts with some page functions or will be unnecessary, you have the possibility to limit the Trigger to work only on certain pages or events. Enter RegEx pattern for all pages (.*) if it works fine for all (and usually it does).
As for the last setting – Fire on – here are the most frequent ways to select and group link clicks:
- Using clicked link URL {{Click URL}} or different URL parts – hostname, path and etc. Use it to select and group specific links, like all outbound links, .pdf documents and etc.
- Using clicked link class {{Click Classes}}, id {{Click ID}} or other attributes – usually used if you can’t separate links by URLs and/or you want to group links with a specific attribute.
- If the <a> link element has no attributes you can use – with CSS selectors you can select clicked element {{Click Element}} by parent element class or id. Will provide more explanation and information on CSS selectors further in the article.
- Sending custom event – last option, if GTM Click Listener is blocked by other JavaScript functions or you just want to send some custom data.
And one more thing – on some websites you may not see link click event (gtm.linkClick) while Just Links Click Trigger is chosen.
If you click on a link and don’t see this event, make sure the link click behavior is not rewritten with JavaScript using event.stopPropaganation(); or return false;.
In this case you can:
- Best option. Ask the developers to remove the code mentioned and use only event.preventDefault(); instead.
- Use All Element click Triggers. It may become tricky if the link has other elements inside (spans, images, etc.).
- Implement onclick dataLayer.push custom events, although it will clutter the code and will be less flexible.
Configuring Trigger selectors
1) To track social profile links, i’ve created a RegEx pattern that will match those links specifically. You can check my article about building regular expressions in Google Tag Manager for more explanations. Click Trigger condition for my social profiles would be:
{{Click URL}} matches RegEx (twitter|plus\.google|linkedin)\.com/([A-Za-z/+]+)asters$
2) For social sharing links on this blog the RegEx pattern and Trigger condition will be like this:
{{Click URL}} matches RegEx (facebook|share\.google|linkedin|twitter)\.com/share
Sharing would be more appropriate to track as Social interactions, not Events, so this will be an exception and Tag setup will look like this:
Tag Type: Universal Analytics
Tracking ID: {{GAID}}
Track Type: Social
Network: {{Click URL hostname}}
Action: share
Action Target: {{Page URL}}
Sidenote: If you are unable to use Click Trigger due to different social sharing button implementation on your website, here is a more advanced tutorial from Simo Ahava.
4) Outbound links are easy. Just match negatively your own hostname.
{{Click URL}} does not match RegEx www\.apasters\.com
Just don’t forget to add Social Profile and Sharing Triggers as exceptions. They might contain your website domain and better to make sure Triggers don’t overlap as we want to track them separately.
5) Links inside Recent posts – here it gets interesting. {{Click URL}} can’t be used as a selector, as the same links are placed all over different pages and sections, while we want to separate only those inside Recent posts section. Links have no id, class or other attributes as well.
Fortunately, we can use CSS selectors. This means we can specifically select just a (<a>) elements inside the element with id recent-posts-2. Awesome, right?
Similarity, we can configure link tracking for Related posts.
6) & 7) Inner links on post previews and inside the posts – in WordPress case both link types are inside the <article> tag and the way how to differentiate them could be by looking at the page type, that is conveniently provided via dataLayer (comes with a GTM WP plugin).
We will send the link click into “Inner links – Full post” Category if the {{pagePostType2}} will be “single-post” or “Inner links – Post preview” if any other value (set via Default value).
Is this case, Tag setup will be link this:
Tag Type: Universal Analytics
Tracking ID: {{GAID}}
Track Type: Event
Category: {{Inner Link Category}}
Action: {{Click URL}}
Label: {{Click Text}}
Again, using CSS selector for the Trigger:
This is the Tag and Trigger setup summary. As some of the Trigger conditions overlap, I’ve added them as exceptions (blocking Triggers).
| Tags / Triggers | Exception Triggers |
| Social profiles | Social sharing |
| Social sharing | Social profiles; Social sharing |
| Outbound links | |
| Related Posts | |
| Recent Posts | |
| Inner Post links | Outbound links; Social profiles; Social sharing |
Analysing user behaviour
As a result you will have on overview of the user navigation that you can explore and analyse.
For this blog, I’ve learned that Related posts are being clicked more often than Recent posts; 95% vs 5% visitors clicks on the article title compared to those who click “read more” button or other links. Also I’ve learned which outbound traffic links were the most relevant, how many times content was shared via sharing buttons and many other interesting insights.
If you are really interested in understanding visitor behaviour, I would also suggest adding click heatmap (Crazy Egg, ClickTale and many more). Heatmap tools will provide click visualization on specific pages, while Google Analytics – quantitative click data and sources for the whole website. Having a heatmap may lead you to new questions, and by adding GTM & Google Analytics click tracking you will get more data to compare and analyze.
So now you know more about visitor clicks on the website. What next? Think how to use it to create engaging content, easier navigation and better user experience.
Some link you also may be interested it
- Learn more about CSS selectors in GTM from Simo Ahava
- Learn CSS selectors while playing a game http://flukeout.github.io/
- Variable guide for GTM, again, from Simo Ahava
- RegEx guide for GTM and Google Analytics
- Event Tracking with Google Tag Manager – official GTM support page.