Event Tracking

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.

Using JavaScript

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.

Attach custom data to an event

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"

Using HTML attributes

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"}

Tracking outbound links

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"}

HTML Forms

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>

ℹ️ Fields with type="password" are not included and won't be sent to Splitbee!

Using Node.js

If you want to track events on your server, check out sending events from Node.js.