How to perform Form Analytics with components that use shadowRoot?

Premium Features
#1

Hi,
We have made a (web)component library with StencilJs. These components use shadowRoot. Therefore FormAnalytics cannot find a -tag nor any -tags.

Registering a form using _paq.push(['FormAnalytics::trackForm', formNode]) will not work because the -tags are in a -tag and therefore not between the -tags. Also these -tags are within the shadowRoot.

Is there a way to register each -tag (separately) to the FormAnalytics?

1 Like
#3

Hi Jasper,

Thanks for sending through the examples for us to test this via email.

Generally it would work using the trackForm call above for an element inside the shadowRoot if you pass the form element inside the shadowRoot as a parameter.

However, inside the shadowroot you don’t seem to have a element with input fields.

There is a form element but it only has a button.

Instead you use a slot element which lets you create separate DOM trees and present them together as if it was one. Every form element is again in it’s own shadowRoot etc.

Unfortunately we can’t think of any workaround so far and we can’t hard code anything for your specific HTML markup naming. If you weren’t using the SLOT feature then it would work out of the box if you were passing eg

_paq.push(['FormAnalytics::trackForm', document.querySelector('[form-id=matomo-form]').shadowRoot.querySelector('form')])

I trust this information will be useful in getting this working.

Thanks

#4

Hi Richard,

Thank you for your answer.

But what if we would not use <simple-form> but just <form>?
Can ‘FormAnalytics::trackForm’ connect to the <input> that is inside the shadowRoot of <simple-input>?