xinglinkedinenvelopebubblesgoogleplusfacebooktwitterfeedgithub

Tracking clicks with Google Analytics

14th February 2014 | by Adam Beres-Deak | javascript, tracking, google analytics

Every website has some links or buttons, users are clicking on them. But do webmasters know which ones do users click most often? Are there maybe some, which are not clicked at all? Maybe you just built a shiny new navigation and you may ask "do users use it?". Clicktracking gives you the answer. When using Google Analytics the results are just shown on your dashboard.

Why would you track clicks on a website?

I think the answer to this question is very easy: to know, what users are clicking and where they are clicking. You maybe have questions like these:

Let's find the answers

<button id="playVideo">Play video</button>
<script>
    $('#playVideo').click(function() {
        video.play(); // doing some work

        _gaq.push(['_trackEvent', 'Videos', 'Play', video.title]); // the 'old' way, when using the old tracking code
        /* or */
        ga('send', 'event', 'Videos', 'Play', video.title); // when using Universal Analytics
    });
</script>

This way you track events in Google Analytics which show up under Behaviour > Events on your Dashboard. In the example above we are always generating an event when somebody clicks on the play button. With these events we also store what really happened: category=Videos, action=Play, label='title of video'.

We just have to set the arguments properly, and then we exactly know which link was clicked.

<a href="/my-cool-page.html" class="greenButton">Go to my cool page</a>
...
<a href="/my-cool-page.html" class="redButton">Go to my cool page</a>
...
<a href="/my-cool-page.html" class="blueButton">Go to my cool page</a>

<script>
$('.greenButton, .redButton, .blueButton').click(function() {
    var className = this.className;

    _gaq.push(['_trackEvent', 'Click', 'Link', className]); // the 'old' way, when using the old tracking code
    /* or */
    ga('send', 'event', 'Click', 'Link', className); // when using Universal Analytics
});
</script>

This method is also perfectly suitable for A/B testing. We just have to take care of displaying each variant equally for the visitors of our site.

What the docs don't say

The modern browsers are quite fast. When users click on links, it happens quite often, that Google Analytics has not finished tracking the event. But the browser navigates away from the page, and at the end the event doesn't get registered at all.

What to do?

With listening to mousedown event, we can reduce the number of lost events:

$('.myButton').mousedown(function() {
    // track click
});

Or using a little hack, we can track even more events. But this one has a tradeoff: the user has to wait more till the new page is loaded. In some situations it is maybe acceptable, but try to avoid this because slower loading pages usually mean worse user experience. Which means less pageviews, more frustrated users and less conversion.

Here is the hack:

$('.myLink').click(function() {
    var href = this.href; // getting the URL of the next page

    setTimeout(function() {
        window.location.href = href; // after a timeout of 250ms we navigate to the URL, where the user wanted to go
    }, 250);

    return false; // preventing default behaviour, so that the browser doesn't navigate away
});

References:

by Adam Beres-Deak

| Share | Tweet | Share | Share

Latest blog posts

Displaying icons with custom elements 14th October 2015

Plain JavaScript event delegation 26th January 2015

After the first year of blogging - what happened on my blog in 2014? 1st January 2015

Better webfont loading with using localStorage and providing WOFF2 support 18th December 2014

Worth watching: Douglas Crockford speaking about the new good parts of JavaScript in 2014 20th October 2014