Google Tag Manager click event not bubbling up to parent

Question

I'm setting up Google Tag Manager on a client's site and I'm having trouble getting click event tags to fire.

I have the trigger set to fire on the button's CSS selector.

The button itself has some child elements, including an svg icon. When the svg is clicked, the click is registered in the data layer, but the tag is not fired. The tag only fires when I select the button itself.

I also tried removing event listeners in my own scripts that were attached to these buttons in case a return false; or e.stopPropagation() was blocking it, but this didn't change anything.

I had the understanding that GTM listens for click events that bubble up to the document. If this is the case my tag should fire when a child is clicked, right? Or am I misunderstanding something?

Alternatively, should I push the event to the dataLayer in my scripts rather than using a click trigger?

screenshots

10 gtm.click correctly fired the tag

9 gtm.click was the child svg that did not

The last screenshot is the firing rule for my trigger.

Answer 1

I've encountered this type of problem a lot. It happens with <i> tags for things like glyphicons as well. Simply add CSS pointer-events:none; to that SVG (unless you require that SVG to be clickable and not just the parentElement). The pointer-events:none on the SVG will mean that when it is clicked the click event registers on the parent element.

Best way would be to have the client developers add the JS. the more hacky way would be to run something like this in a custom HTML tag via GTM

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

Answer 2

Grate solution/idea to use:

pointer-events:none

But what happens when you have complex div (20 classes and 15 elements inside) and you wrap this div with a link <a> tag (For blog postcard for example).

For now GTM lack of a normal solution for this issue :( For complex structure you should add "extra div" for pointer-events (Work fine but "not 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 3

As said before the “Just Links” trigger will bubble to the parent <a>, so using that instead of “All Elements” should solve any issues you have with clicks registering on children of an <a>. But what if you’re trying to register clicks on a parent <button>, for example? Then you could use a Custom JavaScript variable called “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;
  }
}

And then use that function in another Custom JavaScript variable like this:

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

Read Simo Ahava’s article on this for more info.