Google tag manager matches CSS selector one fires another doesn't they don't fire consistently

In google tag manager, tracking this markup

<div class="swiper-button-prev-recom" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-29c7f9f933787763" aria-disabled="false">
            <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.261501 5.64373C-0.087168 5.9924 -0.087168 6.57352 0.261501 6.92218L5.53027 12.1909C5.91767 12.5784 6.49879 12.5784 6.84746 12.1909L7.7385 11.3386C8.08717 10.9512 8.08717 10.3701 7.7385 10.0215L3.98063 6.26359L7.7385 2.54446C8.08717 2.19579 8.08717 1.61468 7.7385 1.22727L6.84746 0.374968C6.49879 -0.0124407 5.91768 -0.0124408 5.53027 0.374968L0.261501 5.64373Z" fill="#757575"></path>
            </svg>   
        </div>

With the trigger:

"Click Element Matches CSS Selector .swiper-button-prev-recom svg"

Works fine.

But trying to track:

<div class="swiper-button-next-recom" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-29c7f9f933787763" aria-disabled="false">
            <svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.7385 6.92218C8.08717 6.57352 8.08717 5.9924 7.7385 5.64373L2.46973 0.374968C2.08232 -0.0124408 1.50121 -0.0124407 1.15254 0.374968L0.261501 1.22727C-0.0871676 1.61468 -0.0871675 2.19579 0.261501 2.54446L4.01937 6.30233L0.261501 10.0215C-0.0871672 10.3701 -0.0871671 10.9512 0.261501 11.3386L1.15254 12.1909C1.50121 12.5784 2.08232 12.5784 2.46973 12.1909L7.7385 6.92218Z" fill="#757575"></path>
            </svg>                
        </div>

With:

"Click Element Matches CSS selector .swiper-button-next-recom svg"

Does not work. Why not?

I asked chatGPT and this is what it said:

> The trigger "Click Element Matches CSS selector
> .swiper-button-next-recom svg" should work to track clicks on the next
> arrow, assuming there are no issues with the CSS selector or the
> configuration of the trigger.
>
> Here are a few possible reasons why it might not be working:
>
> Selector specificity: Ensure that the CSS selector
> .swiper-button-next-recom svg accurately matches the next arrow
> element in the markup. Double-check the class name and make sure there
> are no typos or extra spaces. It's also possible that there are
> conflicting CSS styles or JavaScript modifications affecting the
> element, preventing the trigger from firing. You can inspect the
> element in the browser's developer tools to verify that the selector
> correctly targets the next arrow.
>
> Trigger order: Verify that the trigger for the next arrow is
> positioned correctly in Google Tag Manager. If you have multiple
> triggers that match the same click event, the order of the triggers
> matters. Make sure the trigger for the next arrow is placed before any
> other triggers that might interfere with its firing.
>
> Event propagation: If there are event listeners or JavaScript code
> attached to the next arrow element that prevents the click event from
> propagating to the document, the trigger may not fire. This can happen
> if there are custom event handlers or JavaScript frameworks
> intercepting the click event. In such cases, you might need to use
> custom JavaScript code to manually track the click event.
>
> To troubleshoot the issue, you can:
>
> Verify the CSS selector: Use the browser's developer tools to inspect
> the next arrow element and confirm that the CSS selector
> .swiper-button-next-recom svg accurately targets it.
>
> Test the trigger: Create a test trigger with a different condition,
> such as "Click Element - matches CSS selector -
> .swiper-button-next-recom", to see if it correctly captures the click
> event. If it does, there might be an issue with the CSS selector used
> in your original trigger.
>
> Check for JavaScript conflicts: Temporarily remove any custom
> JavaScript code or third-party scripts that may interfere with the
> click event. Then, test if the trigger fires correctly. If it does,
> gradually reintroduce the JavaScript code to identify any conflicts.
>
> By reviewing the CSS selector, trigger order, and potential JavaScript
> conflicts, you should be able to troubleshoot the issue and track
> clicks on the next arrow successfully.

Doing

document.querySelectorAll('.swiper-button-prev-recom svg') gives me the right element.

https://stackoverflow.com/questions/65017083/click-element-with-css-selector-is-not-working-in-google-tag-manager

The information in that answer I don't find helpful.

How do you get the arrow to fire consistently?

Click Element refers precisely to the selected element. If you click on a child element, f.e. an inline span inside a link, it will be handled instead of the link.

Changing your trigger from Click Element to Click Class should prevent this behaviour.

Example Click Element, CSS Selector div > svg:

Click on the SVG and accidentally select div > svg > path. Now path is your Click Element and the trigger for div > svg will not fire.

Example Click Class, CSS Selector div > svg:

Click on the SVG and accidentally select div > svg > path. Nevertheless, the svg is handled as Click Class because path is a child of the selector scope.