Why doesn't my GTM Click trigger fire for clicks on child elements or dynamically added buttons?
GTM's Click triggers listen via event delegation at the document level and evaluate the element the click actually landed on, which for a button containing an icon or nested span is often the child, not the button you configured the trigger against. Elements added to the DOM after GTM's listeners attach are covered fine by delegation - the real fix is almost always broadening the click condition to match nested elements, not chasing a timing problem that does not exist.
Why this happens
There are two commonly confused failure modes here. First, a real click can land on a <span> or <svg> icon nested inside the button you are targeting; if your trigger condition checks Click Element matches CSS selector #buy-button but the click target reported is the inner span, the condition fails even though a human would say "I clicked the button." Second, GTM's click listeners are attached at the document level using event delegation, so elements added dynamically after page load are covered - the "not firing for dynamic content" complaint is very often actually the nested-element problem above, misdiagnosed as a timing problem.
Fix it
- Open GTM Preview, click the element that should trigger the tag, then look at the trigger's own debug panel - it shows the actual Click Element, Click Classes, and Click ID GTM captured. Compare this against what your trigger condition checks; a mismatch here is the diagnosis, not a guess.
- If the click lands on a child element, broaden the CSS selector condition to match the child too (e.g.
#buy-button, #buy-button *), or target a stable ancestor class guaranteed present on both the button and its children. - Prefer Click Classes or Click ID conditions with "contains" rather than exact-match "equals" when the target's class list is dynamically generated (common in React/Vue component libraries that append hashed class suffixes).
- If the element lives inside an
<iframe>(embedded checkout widget, third-party form), GTM's document-level click listener cannot see clicks inside a cross-origin iframe at all - this is a browser restriction, not a GTM bug, and needs the iframe's own tracking or a postMessage bridge instead. - For custom or JS-driven components that do not emit a real click on the DOM node you would expect (a canvas-rendered button), push a custom event from the component's own click handler and trigger off that instead of relying on GTM's click detection.
How to verify it worked
In Preview, click the target and confirm the trigger fires (green checkmark, tag listed as fired) - then re-click a nested part of the same control (the icon, the label text) and confirm it also fires. If only the outer element triggers it, the selector still needs broadening per the fix steps above.
Still stuck after working through this?
Send us what you are seeing in Preview and the Network tab. We trace GTM containers for a living and can usually tell you what is actually happening in one look.
Ask a GTM Engineer