@s-ui/html-tagger

> Tool to tag the HTML of your webpage from a service.

It provides:
* A way to tag HTML elements, perfect for add tracking on SPAs.
* Performance focused in order to avoid jank and heavy script load.

Use:

``js
import { tagHTML } from '@s-ui/html-tagger'
// create an object like this
const tags = {
'CSS_SELECTOR_OF_THE_ELEMENT_TO_TAG': {
'DATA_TAG_NAME_TO_ADD': 'DATA_TAG_VALUE_TO_ADD'
},
'.simple-div': {
'tracking-tag': 'c_tracking_tag'
},
'.button': {
'tracking-tag': 'c_tracking_button'
},
'.added-later': {
'tracking-tag': 'c_tracking_dynamic'
}
}

// execute the method and use the created tags
tagHTML({ tags })
`

Performance:

* It uses requestIdleCallback if supported, in order to only tag when the browser is idle. If not available, it tries to use requestAnimationFrame in order to tag elements smoothly.
* It uses MutationObserver if supported in order to only tag elements when these are added.

$3

You can use this command in the console to check if the tagging has worked correctly.

`js
console.table(
Array.from(document.querySelectorAll('[data-tracking-tag]'))
)
``