Button Click Not Triggered When clicking on it's child

Tag Manager
,
1

I have a following button I want to trigger click events to:

<button id="click-button" (click)="onClick($event)">
    <div>
        <span class="fas fa-clock"></span>
        <p>Button text</p>
    </div>
</button>

I configured the trigger in the Matomo Tag Manager in the following way:
Click ID contains id of the

I want to track the clicks on the button. But it doesn’t always work. I was able to split the isue in 2 separate conditions:

  1. When I click on the center of the button, click is registered on the

    or and bubbles to 's click event. In this case Matomo trigger does NOT fire.

  2. has a style with paddings on sides. So when I click on the side of the button, the click event is registered on the itself. In this case Matomo trigger DOES fire successfully.

Just to note the click event in Angular fires each time.

What did I do wrong and how to fix this behavior?

2

Hello shmulik hakipod, as you said, depending on which part of the button you click on, your trigger fires or not. That happens because sometimes you click the <button> element, but in other cases you clicked the <div> element that is inside it; so you need to consider these last cases. To do that, you could change the condition when you fire the trigger to start considering also the elements inside the button. There are different solutions you could implement, for example, you could use a condition like the following one:

Click Element, matches the CSS selector, button[id="click-button"], button[id="click-button"]*

With this condition, you won’t only consider when the users click the button, but also when they click what is inside it. I hope this will help you, if not make me know :v:

3

Hi @IgnacioPEREZ ,

A helpful solution!
One question:
Does that mean I can use , to separate different CSS selector within one trigger ?
I used to defining two triggers for parent elements and child elements individually to make the tag work.

4

Hi @Kevin_Chien1 ,

Exactly, you can use the comma to consider multiple CSS selector at once in the same trigger or variable. If the triggers are used in the same scenario for fire the same tag, yes, i would recommend you to use multiple CSS selectors separated by a comma instead of having one trigger for each CSS selector.

1 Like