The Why And How Of Google Analytics Event Tracking

by Robin Cannon

Last updated on February 20th, 2018

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>

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;

  • 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.

One Comment


Get updates on new articles, webinars and other opportunities:

Robin Cannon

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


Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.


Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. Stanley Rao says:
    July 29, 2012 at 11:59 pm

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

Show Me My Heatmap

A3: @CrazyEgg was one of the best tools I have used to understand what and where users are engaging with a page. #seochat

Matthew Diehl


What makes people leave your website?