Selecting by CSS does not work with parents?

Fishy · November 1, 2022, 11:19am

Hi,

I have an angular application where I want to track the clicks on a close button, which looks something like this:

<app-icon icon="close">
  <svg>
     //paths etc.
  </svg>
</app-icon>

Now I added a click element trigger in the tag manager on the parent of that close icon (matches CSS selector = app-icon[icon=“close”]), but I noticed it oftentimes does not fire.

In the matomo debug logs the click is either registered on the app-icon, the svg, or even some path within the svg. Why is it not always detecting the app-icon click when nothing of the svg is visible outside of it? Is there a solution to this or is the tag manager just not suited for this kind of html?

heurteph-ei · November 4, 2022, 10:32am

Hi @Fishy
Your problem seems to be related to:

github.com/matomo-org/tag-manager

Add support for element inheritence

opened 01:03AM - 14 Sep 22 UTC

Starker3

Currently when configuring triggers that use something such as a `Click Classe…s contains` or `Click Classes equals` it only works if the element has the class directly applied to it. So for example if we had the following: ``` <div class="myClass"> <p>Some Text Here </p> </div> ``` Using a `Click Classes contains myClass` would not work for any clicks on the `<p>` element as it doesn't have the class directly set. This is kind-of supported when using a CSS selector, but a CSS selector is quite specific in certain cases (Eg. list items would have a different selector for every list item which makes this sort of setup quick difficult to achieve)