Are you experiencing issues with click and link click tracking in Google Tag Manager (GTM)? Tracking user interactions such as clicks and link clicks is crucial for understanding user behavior and optimizing your website’s performance. However, when GTM fails to track these events accurately, it can hinder your ability to gather valuable insights. In this guide, we’ll walk you through troubleshooting steps and provide a solution using custom code to ensure reliable click and link click tracking in GTM.

Identifying the Problem

The first step in troubleshooting is to identify the problem. If GTM is not tracking clicks and link clicks as expected, it could be due to various reasons such as inactive of build-in configurations, conflicts with other scripts, or issues with GTM.

Checking Build-in Variables

Start by reviewing the build-in variables configurations in GTM. Ensure that you have set up all the necessary variables to capture click events and link clicks.

Step 1: Click on Variables

Step 2 : Click on Configure

Step 3: Enable all the Variables

If still the link click and outbound links are not visible in Tag assistant then follow the below custom code step

Debugging with Preview Mode

Utilize GTM’s Preview mode to debug the tracking setup. Preview mode allows you to test your tags, triggers, and variables in real-time before publishing changes. Use the Preview mode to inspect which gtm API calls are firing and troubleshoot any discrepancies.

API Call : gtm.linkClick is visible in this case

Custom Code Solution

If you’ve exhausted troubleshooting options within GTM and still encounter issues with click and link click tracking, you can implement a custom HTML script to ensure reliable tracking. Here’s a code snippet you can use:

<script>
document.addEventListener('click', function(event) {
    var element = event.target;
    
 
    if (element.tagName === 'A') {
        var url = element.href;
        var text = element.innerText;
        var elementClasses = element.className;
        var elementId = element.id;
        

        dataLayer.push({
            'event': 'Link Click 2',
            'linkUrl': url,
            'linkText': text,
            'gtm.element': element,
            'gtm.elementClasses': elementClasses,
            'gtm.elementId': elementId

        });
    } else {

        dataLayer.push({
            'event': 'click',
            'clickElement': element
        });
    }
});
</script>

This custom HTML script listens for click events on your website and distinguishes between regular clicks and link clicks. It then sends the relevant data to the GTM Data Layer, ensuring accurate tracking of user interactions.

Let’s break down the provided JavaScript code snippet:

1. Event Listener:

   document.addEventListener('click', function(event) {

This line adds an event listener to the document, specifically listening for click events. When a click event occurs anywhere on the page, the function provided as the second argument (the event handler) will be executed.

2. Event Target:

   var element = event.target;

Within the event handler function, this line retrieves the element that triggered the click event. The event.target property represents the DOM element where the click occurred.

3. Conditional Statement (if-else):

   if (element.tagName === 'A') {

This conditional statement checks if the clicked element is an anchor (<a>) tag. If the condition is true, it means the click occurred on a hyperlink.

4. Extracting Information for Anchor Tags:

   var url = element.href;
   var text = element.innerText;
   var elementClasses = element.className;
   var elementId = element.id;

Inside the if block (for <a> tags), these lines extract various pieces of information from the clicked anchor element:

• url: Retrieves the value of the href attribute, which contains the URL the hyperlink points to.
• text: Retrieves the visible text content within the anchor tag.
• elementClasses: Retrieves the CSS classes associated with the anchor element.
• elementId: Retrieves the value of the id attribute, providing a unique identifier if present.

1. Pushing Data to Data Layer:

   dataLayer.push({
       'event': 'Link Click 2',
       'linkUrl': url,
       'linkText': text,
       'gtm.element': element,
       'gtm.elementClasses': elementClasses,
       'gtm.elementId': elementId
   });

Inside the if block, this code pushes an object to the dataLayer array. This object contains various pieces of information about the click event on the anchor tag, including the event name ('Link Click 2'), the URL and text of the hyperlink, and additional GTM variables such as gtm.element, gtm.elementClasses, and gtm.elementId.

6. Handling Clicks on Other Elements:

   } else {

This else block executes if the clicked element is not an anchor tag (i.e., if the condition in the if statement is false).

7. Pushing Data for Other Clicks:

   dataLayer.push({
       'event': 'click',
       'clickElement': element
   });

Inside the else block, this code pushes an object to the dataLayer array for other types of clicks. It includes the event name as 'click' and the clicked element itself as clickElement.

Overall, this script tracks click events on anchor tags (hyperlinks) and other elements on the page, providing detailed information about each click event for tracking purposes in Google Tag Manager.

Implementation Steps

1. Access GTM Dashboard: Log in to your Google Tag Manager account.
2. Create Custom HTML Tag: Navigate to the Tags section in GTM and create a new Custom HTML tag.
3. Paste Custom Code: Copy the provided custom HTML script and paste it into the Custom HTML tag.
4. Set Trigger: Configure a trigger for the Custom HTML tag to fire on All Pages or specific pages where you want to track clicks.
5. Test and Publish: Test the implementation in Preview mode to ensure accurate tracking. Once validated, publish the changes in GTM to make them live on your website.

By following these steps and implementing the custom HTML script, you can overcome issues with click and link click tracking in Google Tag Manager, ensuring you capture valuable user interaction data effectively.