Diving deep into user behavior with Google Analytics, Event Tracking, and jQuery

In a default Google Analytics setup, the information you have about your users' navigation behaviors and preferences is limited to which pages they viewed and where they came from. But what does that really tell you about how your users behave inside your web pages? Not much, and that's where all the juicy behavioral insight comes from.

I dare you to answer the following questions with your current Google Analytics setup

Are your users using the main menu to navigate or do they use different means to find content?
Do your users scroll through your content and click links in the footer?
Do your users click on an article title or the "continue reading..." link?
Do your users actually go through the items in my dropdown menu, or are they unaware of the dropdown menus?
Do your users follow your related blog entry suggestions?

I'll help you answer some of these questions right now

Using Google Analytics' Event Tracking, you can begin tracking arbitrary events—including your users' behaviors—inside your web pages.

Before you get started follow these 2 important steps:

Migrate your Google Analytics tracking code to Asynchronous Tracking
Move jQuery to your <head> element (I know, it's against optimization standards, but the data payoff is worth it if you use good caching techniques)

The code

Add this to the <head> element or alongside your current jQuery code (as long as that code is in the <head>).

$(function () {
     $('a').click(function () {
        // tell analytics to save event
        try {
            _gaq.push(['_trackEvent', thisel.parents('[id!=""]:first').get(0).id, 'clicked', (thisel.text() || thisel.children('img:first').attr('alt'))]);
        }
        catch (err) {}
        
        // pause to allow google script to run
        var date = new Date();
        var curDate = null;
        do {
            curDate = new Date();
        } while(curDate-date < 300);
    });
});

Screenshot of Event Categories after installation

After installing the code above, I can see which sections on my website receive the most clicks (based on the ID attribute of the element or parent elements).

Screenshot of Event Labels after installation

After installing the code above and drilling down on an Event Category (left), I can see the captions of the links that were clicked, for example, the link text of menu items as seen below.

Getting even more user insight with Event Tracking

This is just the beginning of the rabbit hole, Alice. With proper jQuery knowledge and a thirst for user insight, you can take this technique way further.

Track form behavior and mouse behavior.
Track time between user actions
Make design changes, then watch how those design changes affect actual user behavior (similar to asynchronous A/B testing).

Fabian Pimminge has ported this code to MooTools, if that's your JS framework of choice: See this article