Tracking Events in Google's New "Universal Analytics"

Why?

I wrote this because I wanted to use Google Analytics tracking events and came across them while Google was transitioning their analytics system over to "Universal Analytics" I found a lot of old StackOverflow posts and other outdated examples that didn't end up working for me. I was very frustrated and with this post I hope you won't have to go through the same pains as me.

The New Analytics

Google is switching over their analytics system to the new "Universal Analytics". This switch is so their system can work nicely with sites, apps, TVs, wearables, etc instead of just being a website centric service.

With this new system there comes new APIs and some breaking changes for old ones. This includes the tracking events.

Tracking Events

Tracking events in Analytics are a great way to get more specific data about your users than just simple pageviews, bounce rates, etc. The same snippet you already add to your page for the basic Google Analytics features also exposes an events API that you can call from click handlers and anywhere else in your JavaScript code to register a custom entry on analytics that can be tracked.

The Difference

spec: _gaq.push(['_trackEvent', category, action, label]);

example: <a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);">Play</a>

The above code is the old analytics code and is being replaced with the new "Universal Analytics" API below:

spec: ga('send', 'event', category, action, label);

example: <a href="#" onClick="ga('send', 'event', 'Videos', 'Play', 'Baby\'s First Birthday');">Play</a>

Here is the docs for the new events API https://developers.google.com/analytics/devguides/collection/analyticsjs/events

The "Universal Analytics" Snippet

Just to double check make sure you are using the current snippet in your pages or the new API won't work. If you're using Yeoman generators or most other starter kits you are probably already using the new snippet. Here is an example to refer to.

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->  
<script>  
(function(i,s,o,g,r,a,m)    {i['GoogleAnalyticsObject']=r;i[r]=i[r]||function()    {(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

// Sends events from localhost for testing. 
// Replace with 'create' call below.
// ga('create', 'UA-XXXXXXXX-X', {
//   'cookieDomain': 'none'
// });

ga('create', 'UA-XXXXXXXX-X', 'auto');  
ga('send', 'pageview');  
</script>  

Analytics Console

To view the event logs you created first trigger at least one event by clicking on the widget you assigned it to on your actual site. Then go into your Google Analytics dashboard for the site in question, navigate from the left nav bar Behavior -> Events -> Overview, then make sure you select custom date and select today's date. The general "day" selector is actually analytics for the prior day.