simpledomtracking

tracking via DOM made simple (hopefully? 👀)

quick examples

first generate a tracker:

const simpleTracker = trackingFactory(
  {
    keyInCode: 'keyInDOM',
    otherKeyInCode: 'otherKeyInDOM',
  },
  keys => keys.keyInCode
)

then use it, examples of how to add tracking to your DOM:

// JSX
const Component = () => (
  <div
    id="wow"
    class="noway"
    {...simpleTracker.create(keys => ({
      [keys.keyForTracking]: 'you clicked wow!!',
    }))}
  />
)

// vanilla js (with custom setAttributes or simpledomtracking/setAttributes to "attach all attributes in one call")
const wow = document.querySelector('#wow')
setAttributes(
  wow,
  simpleTracker.create(keys => ({
    [keys.keyForTracking]: 'you clicked wow!!',
  }))
)

finally start tracking!:

// yourTracking might be google analytics f.e. (const yourTracking = data => window.dataLayer.push(data))
document.addEventListener('click', ({ target }) => {
  if (simpleTracker.isTracking(target)) yourTracking(simpleTracker.getTrackingData(target))
})

just looking for some more code? check out...

• the jsx example
• the vanilla example

so, what does this tracking do?

1. it takes key-value entries bundled in an object from you
   • keys = tracking keys, those will be used later on when sending the data to any server
   • values = tracking keys which appear on the DOM-Element
2. it gives you some functions based on your previously defined tracking-configuration of 1.
3. you push those tracking keys on elements (which allows you to add dynamic keys etc)
4. the user clicks and you pull the data from the DOM-Elements into your request, done

The main purpose of this library is to add a quick and easy possiblity to spread tracking thru a whole project and leave you the possiblities of how to deal with the data itself (you can have tracking which relies on the DOM-keys, but also you might have your own tracking which relies on the keys inside the code ¯\_(ツ)_/¯).

more documentation (linked from the /docs directory)

functionality

• trackingFactory
• mockElement
• setAttributes

other

• typescript

ups and downs

this thing can be very useful if you're controlling the delegation well (in theory and practically), it's even pretty useful in projects with element-binded event handling (since tracking is much different compared to normal user interactivity it's also nice to keep it out of the casual logic imho), but as everything also this has its negative points: it can become pretty complex with all the bubbling and other existing listeners etc, therefore it's always a good idea to read around a bit, besides the MDN-articles there's are plenty of blogs about this topic like this one from jasonformat for example, and also check if your project is qualified for delegating (many preventDefaults might kill this approach f.e.)

hacky hacks

• it is possible to quickly reduce logic at spots by using the CSS-line pointer-events: none on specific children (not recommending, just mentioning! as alternative: use Element.closest(..))