Custom Events

Tiny Metrics lets you define and track custom events. A few examples of custom events could be Buy, Signup, or FormSubmitted. These can be useful when you want to understand precisely how users are interacting with certain parts of your website.

Using HTML attributes

The simplest way to track custom events is by adding the data-tiny-event HTML attribute to relevant elements in the DOM. Once an event name is specified, all clicks will be captured automatically:

<button data-tiny-event='Buy'>Buy Now</button>

You can add extra information to the event through the property attribute:

<button data-tiny-event='Buy' data-tiny-event-color='red'>Buy Now</button>

This adds a property, color, with the value red to the event. It is possible to add several properties to the same event when relevant.

Manually triggering an event

It is also possible to manually trigger custom events using the window.tinymetrics.track function:

window.tinymetrics.track('Buy', { color: 'red' })

This triggers a custom event with the name Buy and a property color with the value red. As with HTML attributes, you can add several properties to the same event if required.