Issue with Google Tag Manager click event not propagating to parent element

Question

Issue with Google Tag Manager click event not propagating to parent element

I am currently configuring Google Tag Manager for a client's website and encountering difficulties in getting click event tags to activate.

Although I have set the trigger to activate based on the button's CSS selector, the actual button contains several child elements, including an svg icon. Surprisingly, when the svg is clicked, the data layer records the click but the tag fails to activate. The tag only activates when the button itself is selected.

In an attempt to resolve this issue, I even removed event listeners from my own scripts that were connected to these buttons, thinking that perhaps a return false; or e.stopPropagation() was obstructing the process, but unfortunately, this did not yield any positive results.

My understanding was that GTM is designed to detect click events that propagate up to the document. If this assumption holds true, shouldn't my tag activate even if a child element is clicked? Or could it be possible that I am misinterpreting something?

On another note, would it be more effective to push the event to the dataLayer through my scripts instead of relying on a click trigger?

screenshots

10 gtm.click successfully triggered the tag

9 gtm.click refers to the child svg element that failed to do so

The screenshot at the end displays the activation rule for my trigger.

javascript google-analytics google-tag-manager

Answer 1

Answer №1

I've come across this issue frequently. It also occurs with <i> tags used for glyphicons. One simple solution is to apply the CSS rule pointer-events:none; to the SVG element (unless you specifically need it to be clickable and not just its parentElement). By adding pointer-events:none to the SVG, clicks on it will register on the parent element.

The ideal approach would be for client developers to implement the necessary JS code. Alternatively, a workaround could involve injecting code like this into a custom HTML tag using Google Tag Manager:

jQuery('a.link-youre-tracking svg').css('pointer-events','none)

Answer 2

I've come across this issue frequently. It also occurs with <i> tags used for glyphicons. One simple solution is to apply the CSS rule pointer-events:none; to the SVG element (unless you specifically need it to be clickable and not just its parentElement). By adding pointer-events:none to the SVG, clicks on it will register on the parent element.

The ideal approach would be for client developers to implement the necessary JS code. Alternatively, a workaround could involve injecting code like this into a custom HTML tag using Google Tag Manager:

jQuery('a.link-youre-tracking svg').css('pointer-events','none)

Answer 3

Answer №2

An innovative solution/idea is to utilize:

pointer-events:none

However, things get complicated when dealing with a complex div (containing 20 classes and 15 elements) that is wrapped within an <a> tag (like for a blog postcard).

Currently, GTM does not offer a straightforward solution for this particular issue :( When handling a complex structure, you may need to insert an "extra div" for pointer-events (which works but is not very elegant).

<a class="track-this-click-by-gtm" href="url">
  <div style="pointer-events:none">
    extra unwanted div
    <i></i>
    <p>hello</p>
    <ul><li>hello2</li></ul>
    <date>2019</date>
    lorem
  </div>
</a>

Answer 4

An innovative solution/idea is to utilize:

pointer-events:none

However, things get complicated when dealing with a complex div (containing 20 classes and 15 elements) that is wrapped within an <a> tag (like for a blog postcard).

Currently, GTM does not offer a straightforward solution for this particular issue :( When handling a complex structure, you may need to insert an "extra div" for pointer-events (which works but is not very elegant).

<a class="track-this-click-by-gtm" href="url">
  <div style="pointer-events:none">
    extra unwanted div
    <i></i>
    <p>hello</p>
    <ul><li>hello2</li></ul>
    <date>2019</date>
    lorem
  </div>
</a>

Answer 5

Answer №3

In previous discussions, it was mentioned that the “Just Links” trigger will bubble up to the parent <a>, so using this instead of “All Elements” can help resolve any issues with clicks registering on children of an <a>. However, what if you want to track clicks on a parent <button>? In such cases, you can utilize a Custom JavaScript variable named “Find closest” with this function:

function () {
  return function (target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

You can then implement this function within another Custom JavaScript variable like so:

var elementFound = {{Find closest}}({{Click Element}}, 'button');

For further information, refer to Simo Ahava’s comprehensive article.

Answer 6

In previous discussions, it was mentioned that the “Just Links” trigger will bubble up to the parent <a>, so using this instead of “All Elements” can help resolve any issues with clicks registering on children of an <a>. However, what if you want to track clicks on a parent <button>? In such cases, you can utilize a Custom JavaScript variable named “Find closest” with this function:

function () {
  return function (target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

You can then implement this function within another Custom JavaScript variable like so:

var elementFound = {{Find closest}}({{Click Element}}, 'button');

For further information, refer to Simo Ahava’s comprehensive article.

Issue with Google Tag Manager click event not propagating to parent element

Answer №1

Answer №2

Answer №3

Similar questions

Using Node.js to read and replicate a JSON file

What is the best place to keep my JWT token secure?

Purpose of triggering another function during an ajax request

Cypress - Mastering negative lookaheads in Regular Expressions

Following the ajax request, the subsequent code was unable to be executed as it awaited the JSON response

Adding a QR code on top of an image in a PDF using TypeScript

How can one achieve the equivalent of Flask Safe when making an ajax call?

An issue with the AngularJS [$parse:syntax] error has been identified when using specific data in the

Using jQuery .css({}) is not causing negative margin to function as expected

What is the best way to create a seamless Asynchronous loop?

Utilize the Webpack library and libraryTarget settings to establish our own custom library as a global variable

Ldap.js: exploring nested searches

How can I send back multiple error messages from a pug template in a node.js application with Express?

What could be causing my Link to malfunction in my about.js file?

Is it possible to transfer a Mongo connection to JQuery code using socket.io?

Implement Conditional Enabling of Forms in JavaScript or jQuery to Support Single Form Usage

Issue with Angular 17 button click functionality not functioning as expected

Expandable Grid Sections in React MUI

Is it possible to enter NaN in Vue3?

Querying Firebase by the value of a child node