Tracking Events in the Shadow DOM

Data collection and tags
1

Does anyone have experience implementing Piwik Pro and the tag manager when operating with Web Components and the ShadowDOM?

I have experience implementing for GA4 and GTM using Simo Ahava’s excellent guidance: Tracking Interactions In the Shadow DOM

1 Like
2

Hi,

if you use a constom HTML tag to listen and push events to the dataLayer whenever something interesting happens there, you can use them as triggers or dataLayer values just like you can in GTM. Or in short: it should work :wink:

best,
Markus

3

Hey guys,
thank you Markus for your help. I can confirm that it should work the same way as it’s written in this article.
I only wanted to note that we don’t support nested data layer variables yet, but it will change in the upcoming months :slight_smile:

4

Thank you both.
I had also posed this question in MeasureChat, where Kuba Bomba kindly answered.

For anyone who asks this question in the future, his response was also:

Hi. It work similarly to GTM. Piwik PRO operates on the same dataLayer, so as long as your custom code is able to generate datalayer.push, our Tag Manager can intercept it and use it exactly as in GTM.

  1. Create a custom code tag in Piwik PRO Tag Manager that fires on all pages to register the event and push information about that to the datalayer

  2. Create a tag with proper triggers that reads the information from datalayer (that’s a standard thing, Piwik PRO Tag Manager also operates with DataLayer Variables and DataLayer Triggers)

If you’re looking at [Simo’s Guide from my OP] The only thing I’d change is providing all the event details using a flat structure, so it’s easy to read. Piwik PRO Tag manager doesn’t support yet reading nested datalayer variables, but it will change in the coming months