Getting Started with Google Analytics

2015-01-25

Event Tracking in Google Analytics

Google's regular Tracking Code gives you a way of counting page views (amongst many other things) - but how do you measure things like how many times a link was clicked? For example to download a file or play a video? You do it with Event Tracking...

 

Event Tracking - Universal and Classic Analytics

There's an old way of doing Event Tracking (part of Classic Analytics) and a new way (part of Universal Analytics). This web page exlains the new way - which Google advises we all use now. The new way was the default when this was written (January 2015). If your Tracking Code features the term "analytics.js" you will be all set up to use Universal Analytics (and thus the new way). If your Tracking Code features "ga.js" then you are still on Classic Analytics - and Google recommend that you upgrade to Universal Analytics and the new way of doing things Please click here for more information about Universal Analytics and upgrading to it.

 

How to do Event Tracking with Universal Analytics

 

Theory

You use some JavaScript to do two things:

 

(a) Install an OnClick event handler on the web page element you want to track (e.g. a download link). You need the Id of the link (i.e. <a> tag) to be able to do this).

(b) Code the event handler to send the appropriate information to Google.

 

The JavaScript

The following is just a sample - you have to customise it for your particular situation (just the coloured text):

 

<!-- Google Analytics - Track Clicks -->

<script type="text/javascript">

/* Install OnClick event handler for web page element being tracked  */

var downloadLink = document.getElementById('download_vizigen_page');

addListener(downloadLink, 'click', function() {

  ga('send', 'event', 'Download', 'Installer Package', 'ViziGen-Page', 1);

});

 

/** General Purpose "Add Listener" Function

    * Utility to wrap the different behaviors between W3C-compliant browsers

    * and IE when adding event handlers.

    *

    * @param {Object} element Object on which to attach the event listener.

    * @param {string} type A string representing the event type to listen for

    *     (e.g. load, click, etc.).

    * @param {function()} callback The function that receives the notification.

*/

function addListener(element, type, callback) {

   if (element.addEventListener) element.addEventListener(type, callback);

   else if (element.attachEvent) element.attachEvent('on' + type, callback);

}

</script>

 

Customising the JavaScript

You must customise the coloured text in the sample code above, as follows:

 

1) In the sample code above 'download_vizigen_page' is the ID of the link being tracked. You must change this to the ID of the link you want to track. Users of ViziGen-Page can get the ID of their web page element by viewing the source code of the web page in their web browser.

 

2) You need to customise the parameters of the call on function "ga". Click here for more information on these parameters. The first three are just textual literals that provide three levels of categorisation when you report on your Events. The fourth parameter assigns a numerical value to the click.

 

3) If you want to track multiple links in a web page you only need duplicate the first block of JavaScript (downloadLink declaration and addListener function call).

 

Inserting the JavaScript into your web page

You must embed the customised JavaScript in you web page - and below the element that you are tracking - or all of them if you are tracking multiple element clicks.

 

For users of ViziGen-Page you insert the JavaScript as follows:

1) Open the web site's project in ViziGen-Page.

2) Go to the Folder Tree tab.

3) Select the Page you want to work on.

4) Flip the the Page Tree tab.

5) In the tree view, locate the Page Content Box that contains the link (or links) to be tracked - or the lowest Page Content Box (in the tree view) if the links are located in two or more Page Content Boxes.

6) Right click on the selected Page Content Box and click on "Insert HTML Block..." in the context menu.

7) Give the HTML Block a Name and paste the customised JavaScript into the HTML Block field.

8) Flip to the Web Site Files tab, re-generate your web site, and then upload it to your web server.