As part of their monthly reporting, and to assist with determining which banners and content on the home page capture a user’s interest, a client asked me to track which links on their home page were being clicked.
Link clicks are very easy to track with Google Tag Manager, and it’s also straight forward to create a trigger that allows you to track links on a specific page – the tricky part was figuring out how to do so within a specific <div> or <section>
Most web templates these days are split into 3 sections:
- Header – where the main navigation, logo, search box and useful internal links go
- Main Content – this is the main body of the page and where (you should) find unique content
- Footer – newsletter sign ups, useful internal links, social media links etc
In some cases, it would also be useful to track popular menu items or to see if users interact with your footer, but in this instance the internal links we are interested in are in the main content.
Most website templates tend to use the same elements for various sections of the page, those being:
- <header>
- <main>
- <footer>
We are interested in the <main> element, and we will need the css identifier for this – either the class or ID assigned to <main> – you can find this easily via the inspect tool – in the case of my home page, the id is “maincontent” (as it is with many templates, such as out of the box Magento themes).
In GTM, we then create a trigger type “Just Links” which will track “some link clicks”. The event that we need to create is any link click within the element “maincontent”. This bit had me stumped as I assumed it would be “matches CSS selector” and #maincontent, though this didn’t do anything, as it technically would be trying to track any clicks on the maincontent div as opposed to elements within the div.
After much experimenting, I gave up and decided to tweet GTM expert Simon Ahava who was more than happy to point me in the right direction:
As he explains in his Wilcard CSS Selectors article:
The wildcard selector literally means any descendant of the preceding selector. So given a selector like div#nav * would match any elements that are nested with a <div id=”nav”> element, but not the <div> element itself.
So in my case, the “matches CSS selector” command is:
#maincontent, #maincontent *Further to this, to ensure this only fires on the home page add the condition “Page Path” “equals” /
Once the trigger has been created, you can then create an event which will track the URL of the internal link that has been clicked as follows:
You can then see, via real time tracking or event tracking, which home page links are receiving clicks – in my case, it will be interesting to see which sections of the home page are of interest to visitors, and if they scroll down and click through to my key services:
In Google Analytics real time event tracking we see:
Fair to say, this is very useful data to have – if this is the sort of data you need in your analytics and reporting and need any help getting it set up, feel free to get in touch.