Google's Universal Analytics (UA) provides any developer or webmaster with a refreshed perspective on their analytics and data, providing the ability to collect from more devices, tracking in-app events, and, recording the data in a wider variety of formats.

Google Universal Analytics

Overall, UA enables a more concise data collection and integration into the core and heart of your applications, whilst providing a wrath of data processing tools, customisable dimensions, metrics and variables, and more accurate referrals processing.

UA is an excellent resource bank to manage, maintain and keep a track on all your SEO progress, the effectiveness of your content marketing and to track your inbound marketing. You're able to identify your audience, the most popular content, and statistics on the quality of visits and their demographics. But why is Google's Universal Analytics so great for developers?

Previously, using Google Analytics, website designers and developers were very restricted in the data they could collect, process and report on. They had to constrain to data types defined by Google themselves. UA changes all that, as we'll look into below.

Data Collection, Integration and Processing

Universal Analytics (UA) provides developers with even more ways to implement and collect data, and means of integrating different types of data directly into your analytics account. A great new feature is the fact you can now use UA across multiple devices and platforms, you're not bound to website-based analytics, you can now record and track events in your iOS or Android app equally.

Traditionally, in Google Analytics (GA) all data that was collected would be processed in the perspective of the visit, thus recording visit session variables and metrics whilst with UA, the processing is now in the perspective of the visitor, providing a more visitor centric overview to your reports.

Custom Dimensions, Metrics and Variables

One thing that was often restrictive with GA was the ability to filter your data using custom metrics - you were often only given a default selection that sometimes just didn't provide you with the data and information you actually wanted to report on. With UA, you can create your own dimensions and metrics which allows you to collect data types that GA does not automatically collect. User defined dimensions and metrics allow you to import additional data into your analytics account that'll help more accurately assess and evaluate your conversions and reports.

Refined Cookie Collection

Similar to GA, UA still collects cookies, but anybody concerned with the volume of cookies GA used to set will now be happy to know that UA only sets one cookie, _ga. Previously, Google Analytics used four cookies to directly track your visitors, however all this data is now sent directly to the Google servers.

Why the change? Primarily due to the fact a lot of visitors could have disabled cookies or use some privacy block extension that strips out any unwanted cookies. That meant that Google Analytics was unable to solely collect reliable data on your visitors and whether they're a recurring visitor. Now the change provides a higher level of flexibility to Google, making it easy to track your visitors regardless of whether or not they let Google place its cookie.

Diving into the UA Javascript Library

UA provides developers with a completely new Javascript API Library, known as analytics.js. The first thing to point out is that the tracking code is now different; to setup analytics, you need to pass the following:

(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-XXXX-Y', 'auto');
ga('send', 'pageview');

Recording On-page Events

A great part of Google Analytics is the ability to record custom events and keep track of events that are occurring in between page views. This could be anything from what aspects of a navigation menu a user is clicking, or a pseudo-log of any AJAX requests and their trigger. Lets take a quick look:

ga('send', 'event', 'category', 'action', 'label', value);

If we look at each:

  • Category - Required - A reference or identifier of the actual object that was interacted with. For example, if a button was clicked we could pass 'button' alternatively, if it was a dropdown handler, we could pass 'dropdown' or 'menu'.
  • Action - Required - Identifies the type of event interaction and what triggered the event. For example, if a button was clicked this would be 'click' whilst if we had a dropdown that appeared on hover, we could pass 'hover' or 'mouseover'.
  • Label - Custom text sent along with the event that could potentially be used to categorise events further down. In the reporting dashboard, you're able to filter events by label. For example, if a button was clicked, we could pass the location of that button on the page to distinguish between two similar buttons.
  • Value - Some order of significance for the event. For example, we could pass a weight assignment to different buttons.

With every event that you pass over to UA, you can assign an optional field object as the last parameter on each command. The field is a standard Javascript object though it only accepts some defined keywords. A complete list can be found under Google Analytics.js Field Reference.

Keeping Track of Asynchronous Requests

If your website is relatively modern, you'll most likely be relying on the use of AJAX requests to retrieve dynamic content for your website. Whether this is the number of shares or comments, you may want to see how many users are actually engaging in some way with that content.

We can, for example, send an event when a user clicks a 'Share' button on AddThis. We can then see if the amount of clicks matches the actual share counter, or did some users drop-out and not share your content?

// Fire off the analytics event
function shareEventHandler(evt) { 
    if (evt.type == 'addthis.menu.share') { 
        ga('send', 'event', 'addthis', 'share', 'Page Title - ' + evt.data.service);
    }
}
// Listen for the share event
addthis.addEventListener('addthis.menu.share', shareEventHandler);

In the example above, we'll send across an event to Google every time a user clicks share on any of the sharing services using AddThis. We'll pass over to Google the page we're viewing, along with the service the content was shared too.

Another case where this would be particular useful may be when a user leaves a comment on your website - how do you capture and send the event to Google? Let's firstly consider when using Disqus:

// disqus_config, defined in the Disqus API
function disqus_config() {
    this.callbacks.onNewComment = [function(comment) { 
        ga('send', 'event', 'disqus', 'comment', 'New comment: ' + comment.id); 
    }];
}

And let's now consider using a custom jQuery-AJAX comment system:

/**
 * Request to save the comment
 *
 * Returns a Javascript object comment: [
 * id, text, author, time
 * ]
 **/
$.ajax({
    url: '..',
    type: 'POST',
    dataType: 'json'
}).done(function(comment) {
    // Send to Google
    ga('send', 'event', 'disqus', 'comment', 'New comment: ' + comment.id); 
    // Now update the UI
    // [...]
});

If you need any help getting Google Analytics setup on your website or programming code for your asynchronous website events, don't hesitate to get in touch with us.

0
Ignite your brand, utilise user-generated content no matter where you or your audience are ›