So we wanted to start doing some more advanced event tracking on HackingUI, to iterate on designs, improve our UI and to have actual data to back up our decisions.

We were already using Google Analytics, which has the ability to do simple event tracking, but we also wanted to take Mixpanel for a spin. It has a more visual interface and is entirely focused on events, not all of the other data that Google Analytics also displays.

In order to track an event with either one of the services you have to call a Javascript method with some parameters. But as we started to implement event tracking on our website, we realized that there were hundreds of potential user actions that we wanted to track. Writing a function for each of them wasn’t scalable.

This problem gets even worse if you are working with a CMS (like WordPress) and frequently create posts from the admin. We wanted to be able to track elements that we added in the posts, like sign up forms or links, but didn’t want to write javascript functions inside of our posts.

So, I wrote some simple code to make event tracking easier.

hackingUi = hackingUi || {};
hackingUi.Analytics = {
    trackEvent: function(category, action, label) {
        var eventObject = {
                'eventCategory': category,
                'eventAction': action
            },
            mixpanelName = category;
 
        if (label) {
            eventObject.eventLabel = label;
            mixpanelName = mixpanelName + ': ' + label;
        }
        if (window.ga) {
            ga('send', 'event', eventObject);
        }
        if (window.mixpanel) {
            mixpanel.track(mixpanelName);
        }
    },
 
    bindToAllClicks: function() {
        var _this = this;
        $('body').on('click', '[data-analytics-category]', function() {
            var category = $(this).data('analyticsCategory'),
                label = $(this).data('analyticsLabel');
 
            _this.trackEvent(category, 'click', label);
        });
    },
 
    init: function() {
        this.bindToAllClicks();
    }
};

The code works by adding a click handler to every element that contains the data attribute “data-analytics-category”. The click handler is actually bound to the body element of the page, that way this code will even work for elements that are created on the client side, after the page initially loads.

If you want to use this code on your own site, you can just copy and paste the snippet above and then call the init method, as seen below.

$(function() {
   hackingUi.Analytics.init(); 
});

Then to use it to track an event, just add a “data-analytics-category” attribute to any element you want to track clicks on. This value will be passed with the event as the category parameter (in Google Analytics). You can also add a “data-analytics-label” attribute to give an optional label to the event, which will then be passed as the name parameter.

Here’s how this code looks in a link on our header:

<a href="https://hackingui.com"
    data-analytics-category="Header"
    data-analytics-label="logo">
        HackingUI
</a>

Another nice thing about this code is that it calls both Google Analytics and Mixpanel from the same function. In the future we may want to add other services for event tracking as well, and we can just add them to the event method.

For Google Analytics, each event passes the action as “click”. I thought about making this more dynamic, or adding the ability to add another data-attribute to the element, but honestly we just haven’t had the need for it.

Mixpanel events only accept one parameter, so I concatenate the category and label and pass them to the event in the format myCategory : myLabel.

I hope some of you find this useful and can start tracking user events on your own sites.