The Why And How Of Google Analytics Event Tracking

by 1 07/27/2012

Google Analytics is a great service straight out of the box.

Just add the tracking code to the footer of your website and you’ve got access to free, comprehensive statistics on your website visitors. Beyond that default functionality, however, is the potential for even more insights into how people use your site, and how effective your design and content is.

Event Tracking gives you the capacity to significantly extend the power of Google Analytics.

Moving beyond the page load

You can get a lot of information from Google Analytics.

  • Total visits
  • Unique visitors
  • Pageviews
  • Average duration of a visit
  • Bounce rate

All of this data is effectively captured by a page load event. Once a page has loaded, the default Google Analytics code can only really track:

  • how long you stay on the page
  • where you go next (on the same site)
  • or whether you leave.

That’s useful information, but how about user behavior that isn’t based on a page load event. Or how about if you have two call-to-action links on the same page, both leading to the same URL. Which one is more effective?

Event Tracking solves this problem. Once you’ve got the basic Google Analytics code embedded in your site, you can use Javascript to bind tracking to different user events.

Basic Use Cases (with jQuery)

By default, Event Tracking doesn’t exist on your site. You have to add it specifically in your own jQuery. When you start doing that, you have massive flexibility in what you can do.

How many people trigger a popup or tooltip?

If I have a form on my site, it would be useful to see which form fields people get confused by. One way of measuring this might be to see which tooltips are triggered most often.

<p id="field1">
  <input placeholder="Enter your data here" />
  <span class="help">Need help?</span>
  <span class="tip">Some information about this field.</span>
</p>

By default, the “.tip” span is hidden. We only show it if someone clicks the “.help” span. That isn’t a page load event, so Google Analytics won’t track it by default, but Event Tracking can track it.

In our jQuery file, we can add the following:

$('#field1 .help') .click(function()
{
  _gaq.push(['trackEvent'], 'Tooltip', 'Show', 'Field1 Info', 'true']);
});

Every time someone clicks the “.help” within the “#field1″ paragraph, it’ll be logged by Google Analytics. In the Analytics dashboard, by clicking ‘Content’ > ‘Events’, you’ll be able to see how many tooltips in total were shown to users, and then divide that by which tooltips they were (in this case, “Field1 Info”).

Which call-to-action link is more effective?

I might have two call-to-action (CTA) links on my homepage. They both direct to the same URL. By default, Google Analytics will track the total clicks through from both CTA links, and aggregate that as a route through to the target URL. So I’ll see in total how many visitors went from one page to the other, but I won’t know if more people used one button over another.

If I give each link a separate ID, I can use Event Tracking to let me know which CTA link is most popular.

<a href="somelink" id="cta1" class="cta">...</a>
<a href="somelink" id="cta2" class="cta">...</a>

In the jQuery file, I target the “.cta” class and then pull the ID into the information that we’re sending to Google Analytics.

$('.cta') .click(function()
{
  _gaq.push(['_trackevent', 'Call To Action', 'Click Through', $(this) .attr('id'), 'true']);
});

Here, when the link is clicked, Google Analytics will log the category “Call To Action”, the action “Click Through” and then pull the ID of that hyperlink as specific data. We’ll then be able to look in Content > Events and just see how many clicks were assigned to “#cta1″ and how many to “#cta2″.

An Overview Of The Syntax

Everything is based on the _trackEvent() method. You can embed this in the source code, or a widget, or in a jQuery file (as I do). It works like this;

_trackEvent(CATEGORY, ACTION, LABEL, VALUE, BOOLEAN);
  • Category – The name for the overall group that we’re tracking (in our examples, ‘Tooltips’ or ‘Call To Action’)
  • Action – What actually happened. This could be a click, a hover, a transition, etc.
  • Label – A more specific note on the event data. We used ‘Field1 Info’ in the first example, and dynamically pulled the ID of the element that was clicked for our second example.
  • Value – We can also assign an integer to give numerical data about events.
  • Boolean – If we set this to “true” then whatever event interaction occurs is *not* counted towards the page’s bounce rate statistics. i.e. If a user visits one page, does a non-page load interaction and then leaves, we still count it as a bounce.

There’s a lot more to it

This is a really basic intro to the general capabilities of Event Tracking and once you get started with some basic Event Tracking you will likely see a lot of opportunity.

It has the potential to massively increase the depth of information that is possible to obtain from Google Analytics. It’s also great because it’s so flexible; any event you can bind to Javascript, you can track.

Getting this much additional data on user behavior can really help in making website improvements, and provide a genuine competitive advantage.

About 

Robin Cannon is Front End Engineer at Viggle, Inc. He also blogs regularly on his site Shiny Toy Robots.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

1 COMMENT

Stanley Rao

Clear image on google analytics… and very easy to understand… thank you for sharing this post with us

July 29, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>