Documentation
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.