We want to track when a user clicks on an accordion item. The accordion item is a <div> that contains a <span> and a <Plus> component. The <Plus> component contains an <svg>, which in turn contains a <path>.
We’ve added a tracking ID to the <div> and created a trigger for it (Click Element > matches > [tracking-id="unique-id"]), which works. However, this tracking ID is not applied to the <span> or the <Plus> component. To handle this, we created a trigger that fires when the clicked element is a child of an element with the tracking ID.
The issue is that this doesn’t seem to work for all children—specifically, clicks on the <path> inside the <svg> within <Plus> are not being tracked.
We expected the trigger to work for all child elements. What would be the best way to ensure all clicks within the accordion item are tracked without having to add tracking IDs to every element manually?
Have you checked if the click events (on <path> and <svg>) are registering correctly in the tracker debugger? Sometimes clicks on nested SVG elements might not work as intended, so it’s important to check the debugger and if the clicked element matches.
You could try using closest(), which automatically climbs up the tree until it finds the nearest matching ancestor, if it doesn’t find anything then it returns null.
Here is an example of how to use it (in a PPTM variable):
@Josefin You can also use a CSS selector that targets both the parent element and all child elements, by using the CSS universal selector (*). In your example that would be: