Best practices to track events on a front-end codebase for product analysis

Question

I am currently looking for the best architecture to track a large number of events on a client-side (web) codebase. I am using Segment for data tracking, but I couldn't find any good practices for large scale tracking in their documentation.

Our current way of doing things (React examples):

<Button
  onClick={(e) => {
    handleClick(e)
    window.analytics.track('save-book', {
     category: 'my-feature-A',
     optionA: true
    })
  }}
>
  Save
</Button>

This works, but I don't think it's very scalable for a few reasons:

• Lack of type-safety
• Tracking code mixed with business code (adds noise to the code)
• No reusability

---

A second pattern that I found cleaner is to enable data-track attributes on my UI components. And add global events-listener that check for that attribute.

<Button
  onClick={(e) => {
    handleClick(e)
  }}
  data-track={{
    id: 'save-book',
    category: 'my-feature-A',
    optionA: true
  }}
>
  Save
</Button>

By doing so, I leverage typesafety, and I can narrow the number of track categories...

type TrackDefinition = {
  id: string
  category: 'feature-a' | 'feature-b'
}

type ButtonProps = {
  'data-track': TrackDefinition
}

I also enforce a bit more SRP, by splitting responsibilities:

• The onClick handler is still used for business code only
• data-track is a new specific attribute for tracking