Tracking user events with a custom & simple Keen.IO implementation


Tracking user events with a custom & simple Keen.IO implementation

When building new applications, it is very important for us to track which features are being used, and how they are being used. For this purpose, we use Keen.IO, which allows us to collect arbitrary events and do some analysis with them later. In this post, I want to explain why I ended up builing my own simplified library to work with Keen.io.

But first, a quick introduction to Keen.

Keen events can have simple or complex JSON data attached to them. For example, we might have an ‘evaluation-cancel-button-clicked’ event, which might have no data at all, or an ‘page-view’ event which has a ‘page’ and a ‘fullPath’ property. (You can go as crazy as you want there – check out the Keen.IO docs for more examples & information.)

We do most of our tracking directly from our JavaScript apps, as this allows us to track when and how certain UI elements are used. For this purpose, Keen.IO provides a JavaScript SDK (keen-js) which provides various methods for collection and querying data from Keen.

After initially looking into this, I soon found two things that bothered me with the default SDK:

  1. At the end of the day, the SDK simply makes a POST-request to the Keen-API. Do I really need an SDK for that?
  2. While Keen provides a great way to collect multiple events at once, there is no included way to queue events and send them with one request.

Regarding the first issue, it turns out that the keen-js SDK is 34kb (minified) – and that it only the tracking version. If you include the full version (keen.min.js), it goes up to 96kb. While this obviously also includes some other, more advanced features, for us it was kind of overkill – we simply wanted to collect data.

The second issue could of course be solved with a wrapper function around keen-js. Basically, we collect quite a few events. These might be collected on multiple components all around the page more or less at the same time. In this case, we wouldn’t want to make 6 simultaneous requests to the Keen API, but collect these events and send them in one combined payload.

keen-js-simple

In order to solve these issues, I built my own, simplified keen-js implementation, which I call keen-js-simple. This is, in contrast, about 3 kb minified, and uses a queue for event sending.

After including it, the library can be used like this:

This example would send one request after 5 seconds, including these two events.

There are also a few other options that can be set:

Originally, I built this as an addon for Ember.js, ember-keen, and we have been successfully using it in production in multiple projects for half a year now.

The framework agnostic version, keen-js-simple, should be usable in every JavaScript project. Even though by default it uses jQuery’s $.post method, this can easily be overridden with a custom ajax method.

I can very much recommend tracking events with Keen, as it gives us great power to analyse which features are actually used. I’d love to hear about how you approach tracking in your web apps.

Francesco Novy

http://fnovy.com

I'm a Web Developer from Innsbruck, Austria. I love to make things on the web. My passion is frontend development with HTML5, JavaScript and CSS. I strife for interoperability and usability as well as for modern and cross-browser UIs. My special focus lies on Mobile Web Apps.