medama-io / medama

Self-hostable, privacy-focused website analytics.
https://oss.medama.io
388 stars 8 forks source link

feat(tracker): support page view custom props #132

Closed ayuhito closed 2 months ago

ayuhito commented 2 months ago

This rewrites a lot of the custom property logic to use new data attributes data-m:load, data-m:unload and data-m:click instead of relying on the old data-medama-key="value" approach.


Two new attributes, m:load and m:unload have been introduced as individual page view properties. These can allow users to send additional custom properties on page load and unload events.

<div data-m:load="key=value">...</div>

For full flexibility, data attributes can be placed anywhere in the HTML page and it will be scooped up by the tracker. However, since the browser does not support querying data attributes with wildcard selectors (data-medama-*), the only possible way to get these attributes in the form of data-medama-key="value" was running a loop and checking every single attribute on the page.

This is too wasteful, so we renamed it to this new format data-m:load="key=value", so we can rely on browser API's to find a specific selector without the use of wildcards. This new syntax is much more concise than before.


m:click remains as the same click event listener, however, the key value attributes have been moved inside the string. e.g.

<button data-m:click="key=value;key2=value2">Test</button>

Multiple keys and values should be delimited with a semi-colon.

ayuhito commented 2 months ago

I've gone ahead and removed m:unload as it would have a high failure rate and should not be encouraged to be used. That's where normal custom properties like m:click or SDKs should play a hand.