Our team use google tag manager (or something like this) to track what phone number or button user will click. This tool requires elements to have id.
When we click on a simple link, without <i> or <span> in it, everything is ok. We get the id, the link works, the popup with "call" or "cancel" appears.
However, it's not that simple with markdown below:
<a class="phone-number" id="phone2" href="tel:+380671112233">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>+38 067 111 22 33</span>
</a>
Link works, the popup appears, but the id is not tracked
I used jQuery to console.log what element has been clicked. It appears that click actually has been made on <span> or <i>. So my guess is that click event made on <span> or <i>, then bubbling thing happens and it triggers link. So popup appears as the link has been triggered, but click has been made on another element, so google tag manager can't catch id.
What can I do to disable click on inner elements and force click on <a> tag?
Could you please try to set "Click triggers" to "Just links" in GTM settings?
Reference: Capturing The Correct Element In Google Tag Manager