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

Reading time: About 2 minutes

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>).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(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

355

26 comments skip to comment form

Cory said— 7 hours later

Awesome tip…I just switched to the async GA code on my site so adding this jquery code was an easy catch-all.

Thanks.

#1
Brian Cray said— 7 hours later

Glad you found it useful Cory!

#2
Mike More said— 8 hours later

Oh, I wouldn’t dare to answer those questions.. I always pushed that user behavior tracking thing to the back of my to-do list.
But, after what you said.. I’ll push it a little forward

#3
Stevie Benge said— 8 hours later

Hey man, I’ve been looking for how others are working with the new GA event tracking features… and this is excellent! Thanks so much. It’s nice not having having to track events as Pageviews any longer.

I really enjoy your site. Take care…

#4
SohoInteractive said— 9 hours later

Excellent tip Brian. Thanks for sharing.
Frank

#5
Sachin said— 14 hours later

this is one of the useful things i have come across this month…thanks

#6
Brandon said— 20 hours later

great tip!

#7
Inside the Webb said— 1 day later

Really cool article dude. Analytics is a really powerful application, just breaking the surface in this article is enough to get my mouth watering for more! I look forward to future posts on your blog

#8
Nate Riggs said— 1 day later

This is great stuff Brian. Thanks for all the tips!

#9
Nashville web design guy said— 2 days later

Very nice article. I have been using event tracking for a while on my website (which is basically one page) but it’s nice to get more insight into the feature. I’d love to see a post about the other potential uses of event tracking that you mentioned like mouse usage and a/b testing. Thanks.

#10
Drupal user said— 1 week later

Thank you for a great article. However, I’m having problems with implementing this. I have put asynchronous code after jquery call in the section.

Then I added this code between two of them, but it’s not loaded. It’s actually displayed in my browser as a regular text. Should I put that code in analytics code, between

tags?

#11
whirlwind said— 2 weeks later

This is great advice, very important in b2b marketing too. We often comb through our analytics to track behavior patterns such as time on site, frequently downloaded pdf’s, etc.

#12
Jorge Cunha said— 2 weeks later

Hi,

Thanks for sharing, awesome tip

Best Regards,
Jorge Cunha

#13
Anna` said— 1 month later

Awesome. Just followed your instructions and installed in on my blog. Thanks!

#14
claudius said— 1 month later

Thanks for sharing this great piece of information!
I’ll definitly put it into use, and keep an eye on your blog.

I seldom post comments, so take this as hint and not as criticism.
One thing annoys me using your blog:
The tracking script patronizes my surfing behaviors.
Usually I open interesting links in new tabs, and finish reading the current article first.

But since the script overrides the browser shortcuts I’m redirected instantly inside the browser tab.
You could improve the script if you use window.open instead of location.href if the Shift Key is pressed.

#15
Brian Cray said— 1 month later

Claudius – I really value your input, but I don’t want to open a new window either, because that kills the back button. Will see what I can do there.

#16
Claudius said— 1 month later

Well, I wouldn’t mind losing the browser history.
As it is unfortunatly the default in most browsers when a link is opened in a new tab…

#17
Fabian Pimminger said— 1 month later

Hey, I’ve ported your script to Mootools. Just in case you’re interested: http://bit.ly/dBApRg

#18
Brian Cray said— 1 month later

Thanks Fabian, I’ve linked to your port.

#19
gorostas said— 2 months later

Great tip!

but I have question, do I have to setup every site with this async code manualy.. no chanse to do it automatic?

#20
Brian Cray said— 2 months later

gorostas – no way to do it automatically that I know of. goold ol’ copy & pase =)

#21
Jan-Marten de Boer said— 3 months later

If you use your own CMS you could do it automatically At least, that’s how i do it. Just use my own CMS and because the site is linked to me as the webmaster, it also takes my analytics account and adds the code for this given domain to the template of the site. Some day, when i’ve got some spare time i want to code, i’ll make it so that when not available, the CMS will ask Analytics to make a new profile and ask for the code to add into the template.

It can be done, but copy & paste isn’t that much of extra work.

#22
Cormac Moylan said— 4 months later

Hi Brian,
Great post. I am applying it to a site we’re going to launch fairly soon. Quick question though.

In your post you say “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).”

Does that mean that each link requires the title attribute in order for them to appear within Google Analytics?

I know it’s good practice to include title tags on hyperlinks by default by unfortunately our web developer omitted them from all the links :/

#23
Brian Cray said— 4 months later

Cormac: No, no need to add title attributes

#24
Leaf. said— 5 months later

gAnalytics Asynchronous script is the only script I have on my site. So can I add the above code inside the script tags of that? And if so, does it matter if it’s before or after the gAanalytics code?

#25
hermes kelly bag said— 6 months later

but I have question, do I have to setup every site with this async code manualy.. no chanse to do it automatic?

#26
Respond to this post—

Your name

E-mail address will not be published