When doing client side analytics, you'll be tracking UI and programmatic events. Sentret helps you with the UI events.

Declarative usage

<div>
  <span>What would you like to buy?</span>

  <!-- We declare events as data attributes (configurable) -->
  <button data-event="SELECTED_BANANA">Banana (green)</button>
  <button data-event="SELECTED_BANANA" data-properties='{"ripe": true}'>
    Banana (ripe)
  </button>

  <button data-event="CHECKOUT" data-properties='{"from": "products-page"}'>
    Checkout
  </button>
</div>

Reminders

data-* attributes can only ever be strings. When using a data binding framework like Vue or React, make sure to convert any objects to JSON for data-properties

And the setup

import {Sentret} from 'sentret'

// Our sample stack uses Segment (analytics.js) to ship events to the
// server, so we can plug it in directly as the handler
Sentret({log: true}).on('event', analytics.track)

Supported Options

{
  log: true,
  eventAttribute: 'event', // data-event
  propertiesAttribute: 'properties' // data-properties
}

Methods

Documentation is in TypeScript for clarity. Typescript is not required

interface SentretInstance {
  // Listen for UI events
  on: (eventType: 'event', cb: SentretClickCallback) => void

  // Sometimes components from poorly written external libraries don't
  // propagate clicks. In such cases you may forward them to Sentret using
  // this method
  click: (event: MouseEvent) => void

  // If your workflow requires it, you may destroy this Sentret instance
  // which will clean up any event listeners on the DOM
  destroy: () => void
}

// The UI event callback should accept an event name and a data object
type SentretClickCallback = (eventName: string, data?: object) => any