As an establised Google Tag Manager consultant<\/a> I know that link clicks are very easy to track with GTM, and it\u2019s also straight forward to create a trigger that allows you to track links on a specific page \u2013 the tricky part was figuring out how to do so within a specific <div> or <section><\/p>\n\n\n\n Most web templates these days are split into 3 sections:<\/p>\n\n\n\n Tracking engagement within these areas can help identify which content drives the most interaction and conversions<\/a>.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Most website templates tend to use the same elements for various sections of the page, those being:<\/p>\n\n\n\n We are interested in the <main> element, and we will need the css identifier for this \u2013 either the class or ID assigned to <main> \u2013 you can find this easily via the inspect tool \u2013 in the case of my home page, the id is \u201cmaincontent\u201d (as it is with many templates, such as out of the box Magento<\/a> themes).<\/p>\n\n\n\n In GTM, we then create a trigger type \u201cJust Links\u201d which will track \u201csome link clicks\u201d.\u00a0 The event that we need to create is any link click within the element \u201cmaincontent\u201d.\u00a0\u00a0 This bit had me stumped as I assumed it would be \u201cmatches CSS selector<\/a>\u201d and #maincontent, though this didn\u2019t do anything, as it technically would be trying to track any clicks on the maincontent div as opposed to elements within the div.<\/p>\n\n\n\n After much experimenting, I gave up and decided to tweet GTM expert Simon Ahava<\/a> who was more than happy to point me in the right direction:<\/p>\n\n\n\n As he explains in his Wilcard CSS Selectors article<\/a>. Techniques like this are particularly useful when implementing more advanced GA4 interaction tracking setups.<\/a><\/p>\n\n\n\n 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.<\/strong><\/p>\n<\/blockquote>\n\n\n\n So in my case, the \u201cmatches CSS selector\u201d command is:<\/p>\n\n\n\n Further to this, to ensure this only fires on the home page add the condition “Page Path” “equals” \/<\/p>\n\n\n\n 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:<\/p>\n\n\n\n Similar methods can also be used to track form interactions<\/a> and other custom engagement events<\/a>.<\/p>\n\n\n\n You can then see, via real time tracking or event tracking, which home page links are receiving clicks \u2013 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:<\/p>\n\n\n\n <\/p>\n\n\n\n In Google Analytics<\/a> real time event tracking we see:<\/p>\n\n\n\n Real-time reporting is also useful when debugging events that aren\u2019t appearing correctly in GA4<\/a>.<\/p>\n\n\n\n Fair to say, this is very useful data to have \u2013 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.<\/p>\n\n\n\n\n
<\/li>\n\n\n\n
<\/li>\n\n\n\n\n
![\"Web](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/web_page_inspect_tool-1024x681.jpg\")
<\/figure>\n\n\n\n![\"Twitter](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/twitter_conversation_with_simon_ahava.jpg\")
<\/figure>\n\n\n\n\n
#maincontent, #maincontent *<\/code><\/pre>\n\n\n\n![\"GTM](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/2021-01-21_15-49-06.jpg\")
<\/figure>\n\n\n\n![\"GTM](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/2021-01-21_15-35-35.jpg\")
<\/figure>\n\n\n\n![\"Key](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/seo_services-1024x704.png\")
<\/figure>\n\n\n\n![\"GA](\"https:\/\/daveashworth.co\/blog\/wp-content\/uploads\/2021\/01\/real_time_tracking.jpg\"){kind=tracking}
<\/figure>\n\n\n\n