Adding Event Tracking to the new Google Universal Analytics (analytics.js)

Google has a newer version of it’s Google Analytics solution called ‘Universal Analytics’ (analytics.js) that is an upgrade to it’s previous web tracking solution (ga.js). If you (like me) are setting up Analytics for the first time, you’ll want to use the newer version – or you can upgrade.

Google provides good instructions for adding Universal Analytics to your website, but their instructions & examples for adding Event tracking was not as helpful – at least for the basic implementation I was looking for; it took a bit of tinkering, searching through other’s online contributions on the subject, and finally just some logic and experimentation to get it figured out and working, mostly because all the other discussions I found were for the older version of Analytics, and the two methods, and their implementations, are different.

So this is a short notes-style guide to getting Universal Analytics set up on your website, and adding Events tracking so you can see what people are actually clicking on within the page, not just what pages were visited.

If you haven’t set up Google Analytics yet, you can read about & get started here:

http://www.google.com/analytics/

At the bottom of the page, under ‘Learning & support’, click ‘Help Center’. Under ‘Setup and basics’ click ‘Get started with Analytics’.

After you’ve set up your new account (jot down your account number) , you’re ready to add the JavaScript snippet to your website and test basic operation. The ‘Introduction to Analytics.js’ page is helpful:

https://developers.google.com/analytics/devguides/collection/analyticsjs/

Because I have an ASP.net website, I put the Analytics Tracking Code snippet at the bottom of the Site.Master page, just before the </body> and </html> tags; since the Site.Master controls the basic header/footer/menu/etc. format for all the web pages, putting the code here allows tracking page clicks over the entire site without the need to add code anywhere else.

You’ll need to modify the tracking code to reflect your Analytics account number and your website url (without the www. at the front).

To add support for Event Tracking, you’ll want to add an additional JavaScript function under the tracking code:

function GAEventClick(element) {
ga(‘send’, ‘event’, element, ‘click’, element);

Here’s an example of the basic + event tracking code for my site (minus the account #):

<script type=”text/javascript”>

(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’);

ga(‘create’, ‘UA-XXXXXXXX-X’, ‘packetiq.com’);
ga(‘send’, ‘pageview’);

function GAEventClick(element) {
ga(‘send’, ‘event’, element, ‘click’, element);
}

</script>

If you’re editing & testing your website code in an editor like Visual Studio, you can modify the ‘ga(create’   segment so the Analytics will send events to Google when you run/test a local copy of your site (by pressing F5 in VS, for example); remember to change it back before you publish your site:

<!– To test with local host –>
ga(‘create’, ‘UA-XXXXXXXX-X’, { ‘cookieDomain’: ‘none’ });

After making the above modification, start your local instance of your website. On the Google Analytics page, click ‘Real-Time’ & ‘Overview’ and click through a few pages on your site – you should see these page clicks show up in the Pageviews a few seconds after clicking.

Once basic page tracking is working properly, you’re ready to add Event tracking to the buttons and other controls on each of your pages.

For each item / button / control, add ‘onmousedown=”javascript:GAEventClick(‘tag’)” to the html code, where ‘tag’ is a textual representation (that you create) of what was clicked. I used short phrases to represent what was clicked, and on what page it was on so I can tell what items were of the most interest to visitors, and what pages they were on when they clicked a particular item (because I may have links to get same brochures, etc. on multiple pages).

Here’s an example of the code added to the ‘Network Performance Analysis’ button on the home page of my site:

<td><a href=”/Services/Network-Performance-Analysis.aspx”><img alt=”Network Performance Analysis” onmousedown=”javascript:GAEventClick(‘NPA_IconClick’)” src=”/images/cta-network.jpg” border=”0″ /></a></td>

When someone clicks this icon, I see an Event on the Analytics report page tagged ‘NPA_IconClick’.

An another example, if someone clicks the URL to download/view the Application Performance Analysis brochure on the Application-Performance-Analysis.aspx page, the code and tag I added to the <a> code segment was:

onmousedown=”javascript:GAEventClick(‘APABrochure_APAPage’)”

When I see the ‘APABrochure_APAPage’ Event I know what was clicked and from what page.

Finally – I used the ‘onmousedown’ instead of the ‘onclick’ because it (onmousedown) is reported to execute sooner because it fires upon the click of any of the mouse buttons, whereas ‘onclick’ only fires *after* the left mouse button has been depressed and released. Either will probably work.

You’ll need to go through all your web pages and add the ‘onmousedown’ Event tracking code to all objects you want to track – remember to add it to images as well as URL lines if you use both, etc.

I hope this helped save you some time and effort getting Event tracking up and working quickly on your site! I deeply appreciate our modern ability to quickly and easily find solutions to problems from a quick search on the web, and all those whose contributions makes this possible – this is, in turn, my small contribution to that wonderful ability.

I imagine there’s better / more enlightened ways to achieve what I’ve outlined above – but this works, and is hopefully a good starting point. If you know of better methods for achieving the same results, I – and others – would appreciate your feedback / well documented examples.

James H. Baxter
PacketIQ Inc.
JamesHBaxter_PacketIQ_Inc_ 9-2010_272x321

(Visited 3 times, 1 visits today)