Modern websites increasingly use Web Components and Shadow DOM for design systems, payment forms, chat widgets, video players, and other interactive components. While this improves encapsulation, it can create tracking challenges for Google Tag Manager (GTM).
What is Shadow DOM?
Shadow DOM creates an isolated DOM tree inside a web component. Elements inside the shadow root are separated from the main page's DOM, which means standard selectors such as document.querySelector() cannot directly access them.
This isolation also affects GTM's standard click-tracking variables.
Why can't GTM track Shadow DOM clicks correctly?
GTM's Click Element trigger relies on the browser's click event and event.target. When a user clicks an element inside a Shadow DOM, the browser can retarget the event to the outer custom element.
As a result, GTM may receive incomplete or incorrect information about:
- Click ID
- Click Classes
- Click Text
- Click Element
The trigger may fire while still failing to identify the actual element the user clicked.
How can you track Shadow DOM interactions?
One of the most useful solutions is JavaScript's event.composedPath() method. It exposes the complete event path, including elements inside an open Shadow DOM.
A basic approach is to capture the click, identify the actual element, and send a custom event to the GTM dataLayer.
The workflow can be:
- Add a Custom HTML listener in GTM.
- Capture clicks using the event's composed path.
- Identify the actual clicked element.
- Push relevant information to the dataLayer.
- Create a Custom Event trigger in GTM.
- Send the interaction to GA4 or another analytics platform.
What about closed Shadow DOM?
There is an important limitation. If a component uses a closed shadow root, JavaScript cannot access its internal elements through shadowRoot.
In that situation, the best option is to use tracking hooks provided by the component or vendor. If you control the component, having it send a clean dataLayer event directly is usually more reliable than scraping the DOM.
Shadow DOM vs iframe tracking
Both create tracking challenges, but they work differently.
An iframe is a separate document, while Shadow DOM is an isolated DOM tree within the same document. Iframes often require communication such as postMessage(), while open Shadow DOM can be accessed using techniques such as composedPath() and shadowRoot.
Final takeaway
Shadow DOM does not make tracking impossible, but it means standard GTM click triggers may not provide the information you need.
Using event.composedPath(), custom dataLayer events, and component-level tracking can help capture interactions inside modern Web Components more reliably.
Read the complete guide:
https://www.brillmark.com/shadow-dom-interaction-why-gtm-cant-see-inside-modern-web-components/
Top comments (0)