Event Tracking inside WebComponents / ShadowDOM

General questions
1

Hi!

Following the sample on

I successfully could implement event tracking using data attributes.

Unfortunately the “All Elements Click” Trigger does not work on Click Events on elements inside a shadowDOM (that is typically the case when composing a page based on web components)

example:

..
<div id="shadowHost"></div>

<script>
  var shadow = document.querySelector('#shadowHost').attachShadow({ mode: "open" });
    shadow.innerHTML = '<a href="#" class="primary-button" matomo-track="true" matomo-category="button" matomo-action="click" matomo-name="order now">Click inside shadowDOM</a>';
</script>
...

Has anyone an idea how to make it work on the shadowDOM?
Maybe somehow its. possible to add the shadowRoots to the observable elements via some Matomo JS API?

Any hints are greatly appreciated!

Thanks
Andreas

2

Created a possible fix as pull request: https://github.com/matomo-org/tag-manager/pull/544

1 Like