Custom Events

OnboardFlow automatically tracks page views for each of your trial users (both standard page views as well as single-page app views via hash params) . However, from time to time you may also need to track custom UX events. In this article we'll cover the steps needed to track Custom Events for your Trial users.


Depending on the nature of your business and SaaS product, it can often be useful to know when one of your Trial User performs a specific action within your interface. This could be anything from watching a video to clicking a specific button.

Tracking a Click

To track that someone has clicked a button or link within your interface, add the class "of-track" to the anchor or button in question. Let's take the following Anchor as an example:

<a href="#">Click Me</a>

To tell OnboardFlow to start tracking clicks to this anchor, there are two things we need to add. Firstly, we need to add the class "of-track" to the anchor, and secondly, we need to give it an ID so that we can refer to it later on in the OnboardFlow dashboard and reports. Let's use the same example above and see what it looks like after we've added these two details.

<a href="#" class="of-track" data-of-id="activate_project">Click Me</a><br>

In the above example, I'm telling OnboardFlow that I want to track all clicks to this anchor and that I want it to be referred to as "activate_project". When setting this up for your self, make sure that "of-track" is spelt exactly as it is shown here, but the data-of-id value can, of course, be anything you want.

Triggering All Other Events

To fire any other event, you'll need to manually call the triggerCustomEvent method.

OnboardFlowLoader.triggerCustomEvent(eventValue, eventMeta);

eventValue should be something that uniquely identifies that event. It could be the ID or title of the video the user watched or the button ID they clicked - it's up to you what you set, but making sure they are correctly identified will allow OnboardFlow to group similar results later on (i.e. all people that watched the video with ID ABC123 etc).

The  eventMeta variable should be a dictionary containing any other metadata you feel is relevant (such as the category of the video the user watched). If you want to specify a display label value for the Custom Event (such as the title of the Video being watched) then set a “title” value in that eventMeta dictionary and that will then be used to identifier it in the OnboardFlow app. I.e. {‘title’:’Video One’}.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.