Events are a powerful feature that helps you get better insights into how your users interact with your page. They allow you to track actions like external link clicks, form submission, or any other interaction that is not a page view.
The Splitbee JS library is exposed globally in the window object. You can access it with window.splitbee or just splitbee. If you are using a build tool for your project, we recommend looking into @splitbee/web.
To track an event, use the splitbee.track() function. The event is automatically assigned to the current user. You can choose any name you want for the event.
splitbee.track("Subscribe Newsletter")
We recommend giving your events short and precise names. It makes it easier to work with them in the future.
It might be a good idea to provide additional context for an event. This can be achieved by attaching data to it using the second argument. This data will be visible on the given user inside the user view. You can also filter by this data inside the dashboard.
splitbee.track("Select Plan", {type: "enterprise"})
The easiest way to track events is by adding the data-splitbee-event to any HTML element.
Just specify the name of the event and Splitbee will track every click automatically.
<button data-splitbee-event="Subscribe Newsletter">Subscribe</button>
You can also add event data using attributes
<button data-splitbee-event="Choose Plan" data-splitbee-event-planType="Business">Subscribe Business</button><button data-splitbee-event="Choose Plan" data-splitbee-event-planType="Enterprise">Subscribe Enterprise</button>
This will add the following data to the Choose Plan event.
{"planType": "Business"}
Add the data-splitbee-event to any <a> element to track link clicks.
<a href="https://twitter.com" data-splitbee-event="External Link" data-splitbee-event-destination="twitter">Twitter</a>
This will track a custom event called External Link with the following data: {"destination": "twitter"}
It is easy to track form submissions using Splitbee. Collect form data by adding the data-splitbee-event property to an <form> element, as demonstrated in the example below.
If a user submits that form, an event is triggered. In this example, it is called Submit Newsletter Form.
The form data is automatically attached to the event as custom data. In this case it would be {"email":"[email protected]"}.
<form data-splitbee-event="Submit Newsletter Form"><input name="email" type="email" /><button type="submit">Submit</button></form>
ℹ️ Fields with type="password" are not included and won't be sent to Splitbee!
If you want to track events on your server, check out sending events from Node.js.