Posted in:

I’ve been using Google Analytics on my all websites for ages. It’s super simple to set up – just copy in a small block of script to each page and you’re done. And the analytics dashboard (while being somewhat complicated to use) provides you access to a wealth of information about who is visiting your page, where they came from, and what they did.

However, sometimes there are events you want to track that Google Analytics does not pick up. For example, I have a “purchase” button on my Skype Voice Changer site that launches a payment overlay. Since this is not a navigation to another page, I have no way of knowing how many people are clicking purchase only to browse away mid-way through the transaction.

Fortunately, Google Analytics makes it incredibly easy to track any arbitrary events on your web-page. Here’s how to create an event that tracks a click on a particular button:

$(document).ready(function () {
    $(".purchase_button").click(function () {
        ga('send', 'event', 'Clicks', 'Purchase', 'Home Page');
    });
});

The API allows you to send a “category” (I’ve used “Clicks”), an “action” (I used “Purchase”) and a “label” (I used “home page”). And in fact, if you read the documentation, you can see that you can send even more data as part of an event.

Once you’ve set it up, you can test it immediately, by navigating to the Real-Time section of the Google Analytics site and watch your events come through in real-time:

image

So this is a great, easy to use way to get a bit more insight into what users are doing on your webpage, and best of all it’s completely free.