How To:  Track Internal Link Clicks in Google Analytics 4 via GTM

There are many ways you can enhance your GA4 tracking via bespoke events implemented using Google Tag Manager, but one of my favourites has to be internal link clicks so that you can analyse and report on how users navigate your site whether that be via links in the menu, content or footer.

Out of the box, GA4 doesn’t actually track internal link clicks – the default “click” event only tracks external link clicks.  I’m not sure why that is, it just doesn’t and this seems like a huge oversight to me.

But, with a custom HTML tag, it is possible.   The following is what I implement on all client websites following a standard website tracking audit:

GA4 Event – click_internal_link

Set up an event as follows:

You then configure the following parameters:

click_text

this is the anchor text of the link that is clicked on, for example:

You can track this easily via the in built variable {{Click Text}}

click_path

this is the path of the page that the internal link clicks through to – by default, this is not available.  We do have the {{Click URL}} path available to us, though this will always include the domain, such as:

https://daveashworth.co/skills/analytics-and-ad-tracking-consultant/cookie-consent-compliance/

You can track the full URL if you wish, but as we know this is an internal link, we can remove the domain by creating a Custom Javascript variable that removes the domain from the URL and returns just the path.

function()
{
  var a = document.createElement('a');
  a.href = {{Click URL}};
  return a.pathname + a.search + a.hash;
}

This will then save the click_path as:

/skills/analytics-and-ad-tracking-consultant/cookie-consent-compliance/

page_path

this is the path of the page that the link is clicked on using the in built {{Page Path}} variable which save as follows:

/skills/google-tag-manager-consultant/

If you want to save the full URL, use {{Page URL}} instead.

page_section

this is the most useful part for me – when I track internal link clicks I want to know if they are in the header, content or footer.   To track this, you can use the following function which detects where on the page a link is situated – though you may need to amend this to suit how your site is coded:

function() {
  // Function to check if an element matches a given selector
  function matchesSelector(element, selector) {
    var matchFn = element.matches || element.webkitMatchesSelector || element.mozMatchesSelector || element.msMatchesSelector;
    return matchFn ? matchFn.call(element, selector) : false;
  }

  // Get the clicked element from GTM's built-in variable
  var clickedElement = {{Click Element}};

  // Selectors for different sections
  var headerSelector = "nav, nav *, #mbl-menu, #mbl-menu *";
  var contentSelector = ".container, container *";
  var footerSelector = "footer, footer *";

  // Check if the clicked element or any of its parents match the selectors
  while (clickedElement) {
    if (matchesSelector(clickedElement, headerSelector)) {
      return "header";
    } else if (matchesSelector(clickedElement, contentSelector)) {
      return "content";
    } else if (matchesSelector(clickedElement, footerSelector)) {
      return "footer";
    }
    clickedElement = clickedElement.parentElement;
  }

  // Default return if no section is matched
  return "unknown";
}

So, the key lines are where the headerSelector, contentSelector and footerSelector variables are detected.

A standard site tends to be built using <nav>, <main> and <footer> elements – in which case you specify this by the following, for example:

var contentSelector = "main, main *";

You must include the element name, followed by element name plus *

If like my site, they are in elements defined by an id or class, you include those in the same way:

#mbl-menu, #mbl-menu *

or

. container, container *

Then, you set the name of the page section you wish to track in your event – this is done on the lines:

      return "header";
      return "content";
      return "footer";

click_class
click_id

you may also to track the CSS class or ID of the element that is being click, for example if you want to be able to report on a certain type of internal link element, such as a “read more” box, or a certain section of a menu.   If so, simply pass in the in-built variables {{Click Class}} and {{Click ID}}

Once you have your tag in place, you then create the trigger

GA4 Trigger – click_internal_link

Here, you select a trigger type of “Click – Just Links” and set the condition to “Click URL” – starts with – your TLD – e.g. https://daveashworth.co

If your site runs on multiple sub domains – for example www and shop – which you want capture all clicks for, you can use a regex here such as:

^https:\/\/(www|shop)\.daveashworth\.co\/.*

Test Tags And Triggers

As always, test that everything works as expected, if all configured correctly you will see events sending data as follows:

Set Up Custom Definitions For New Parameters

Once your tags are live and tracking data, before you can create a fully customised report including your bespoke parameters such as “page_section” you need to set up these up in GA4 as follows:

Admin -> Data Display -> Custom Definitions -> Create Custom Definition

Then add the parameter name into “Dimension Name” and “Event Parameter”:

Create Internal Link Report in Looker Studio

You can then create an internal link report in looker studio as follows:

• Add required dimensions
• Set metric to event count
• Add filter to only include event name equal to “click_internal_link”

Create Internal Link Report In GA4 Exploration

Or alternatively, set up an GA4 exploration report as follows:

And there you have it – one of the most insightful user behaviour tracking enhancements you can make.

I hope you find it useful too.