Add custom Google Analytics event tracking

In an earlier post, I covered the correct way of adding Google Analytics to your blog without ending up with a 'custom' template.

With some blogs, there might be user interactions that you want to track. For example, in so-how-do-i.blogspot.com, some articles like parallax for Contempo or AddThis sharing icons have a custom HTML gadget that users can one-click install on their blogs. So, I wanted to track how often that is happening.

Note: Blogger uses 'blogger' as the namespace for their analytics - ensure that you use 'blogger.send', rather than the default 'send' when logging.

Custom events in Universal Analytics

Blogger's Google Analytics snippet uses the analytics.js Universal Analytics snippet. Their event tracking documentation does a great job of covering the basics for tracking an event on the client.

ga('blogger.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

The ga function is available globally once the snippet is installed. Fine-tuned drilldown can be achieved using the category/action/label optional fields.

Form hooks example

Continuing with the example of counting click-events for users installing the custom HTML gadgets from so-how-do-i.blogspot.com, the following JS snippet defines a 'log' event, and binds the submit click handler it (using jQuery helpers).

var log = function() {
  if (typeof(ga) !== 'undefined') {
    console.log('Logging form usage.');
    ga('blogger.send', {
      hitType: 'event',
      eventCategory: 'Form',
      eventAction: 'Add Gadget',
      eventLabel: _WidgetManager._GetAllData().blog.canonicalUrl,
      transport: 'beacon'
    });
  }
};
var forms = $('.Blog form input[type="submit"]');
forms.click(log);
console.log('Set up event logging for ' + forms.length + ' forms');

This manifests in the Analytics UI under Behaviour -> Events -> Overview.

Automatic global tracking

Some of you might not want to track anything too specific, but just a bunch of the clicks, scrolling, and other behaviour in any forms or links in the page. The Google Analytics team have developed autotrack, a JS plugin which adds

"Automatic and enhanced Google Analytics tracking for common user interactions on the web."

event coverage to your page.

The following custom HTML gadget can install this for you.

<b:includable id='main'>
  <style>#<data:widget.instanceId />{display:none;}</style>
  <b:if cond='data:blog.analyticsAccountNumber'>
    <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','https://www.google-analytics.com/analytics.js','ga');
      ga('create', '<data:blog.analyticsAccountNumber/>', 'auto', 'autotrack');
      ga('autotrack.require', 'eventTracker');
      ga('autotrack.require', 'maxScrollTracker');
      ga('autotrack.require', 'mediaQueryTracker');
      ga('autotrack.require', 'outboundLinkTracker');
      ga('autotrack.require', 'outboundFormTracker');
    </script>
    <script src='https://cdn.rawgit.com/googleanalytics/autotrack/master/autotrack.js' type='text/javascript' ></script>
  </b:if>
</b:includable>