How to use Google Analytics Event Tracking to capture navigational behaviour on your website

The purpose of navigation is to help visitors to our websites find their way round them, but how do we know how useful this navigation really is to them? 

To understand this, we need to know they actually use it. This post outlines how we have implemented automated tracking of navigational activity on the V&A website. It shows how Google Analytics Event Tracking has been set up to capture data whenever visitors use the various navigation features on the site.

The method described here allows us to see exactly how often each navigation link is used and which specific navigational menu the link belongs to. We use this to gain understanding of navigational factors that may impact on how visitors behave. These include things like the position of links within different areas of the page, the difference in use between two links to the same page with different wording, the name of navigational features and the effect of images used within navigation. This is to provide evidence of user behaviour to feed into the continual development of the site.

By reviewing how we have set this up, we hope it may be useful if you are trying to get to grips with understanding user behaviour on your sites.

How Event Tracking is set up

The approach we have used is relatively straightforward and you should be able to adapt it to work on your own site. Although there is a one-off resource cost to adapt page templates or page code, once implemented, data about navigational behaviour will just be automatically collected across your whole site.

To get it working does require access to update your HTML, CSS and Javascript. As these are usually within your site templates, you need to have content-management system administrator or developer permissions, or be responsible for managing the staff who have access to make these changes. 

What is included here

• Code to see what we have done (JQuery, Javascript, HTML and CSS). This has everything you need to understand how it works, to adapt it as you need.
• Screenshots showing examples of navigation we have it applied to, so you can see how visitors experience the front-end features that the data represents.
• Data from the same navigation shown in Analytics reports, so you can see how it is accesses and how it can be intepreted.

Requirements

• Google Analytics needs to be in place. We use asynchronous Analytics. Check out the latest version of the Google help page for setting Analytics up:
  https://support.google.com/analytics/answer/1008080
• In-page navigational areas need to be distinguishable within the HTML. This really just means that links withion navigation can be identified. This is done by checking for links (<a> tags), within lists (<li> tags), within defined page elements (e.g. <div> tags) associated with CSS style classes or CSS IDs. 
• The page needs a way by which navigational activity causes data to be sent to Analytics as an Event. This is achieved with jQuery which uses a Google Analytics Event Tracking method to send packets of structured data. The structure of the data is based on combinations of the <a>, <li> and CSS classes and IDs described above to represent the navigation in an identifiable way.

Sending structured data

This explanation is intended to outline the way this works, so you can adapt the code. It not intended to cover JQuery comprehensively.  Bear with it, it’s not that tricky.  Coding help-references are listed below for those wishing to develop these concepts further.

Google Analytics Event Tracking works in a similar way to the basic Analytics code you have installed. The Analytics _gaq object uses a method called _trackEvent() which allows packets of data to be sent to your Analytics account which represent Events. This works in a similar way to how Analytics handles page tracking. Event Tracking does not affect the standard page count.

The data structure follows a fixed pattern. Each event triggers the following data to be sent. 

• An event category – In most cases this is simple the category “Navigation” to distinguish navigational events from other types of event being tracked. 
• An event action – This represents the type of navigational event and is defined by the navigational section the link is in (e.g. header, footer, etc)
• An event label – This represents the target URL of the link, and indicates what the visitor was navigating to.

The _trackEvent () method

The specification for the _trackEvent() method is:

_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

The _trackEvent() method can send Event data to your Analytics using its five parameters: “category”, “action”, “opt_label”, “opt_value” and “opt_noninteraction”. 

We only make use of the first three:“category”, “action”, “opt_label”. These are used to send combinations of data, structured to identify the navigational elements. In Analytics reports these show up as “category”, “action” and “label” as described above.

NB – “category” and “action” are required fields when setting up event tracking. The “opt_” prefix simply tells you a field is optional. In this case “opt_label”.

Using JQuery to detect navigation activity and record it as an Event in Analytics

To make use of the _trackEvent() method, we use JQuery code which loads with our web pages. Standard JQuery event handlers look for user activity and if detected, they cause the _trackEvent() method to send the structured data. Mostly the JQuery is looking for mouse clicks and key presses, using the “.click()” and “.keyPress()” and “.live()” methods.

It is easiest to see an example. This is a JQuery function from the code on our page. It is checking for events that represent visitors clicking on links in the footer. It’s just one of several functions in the Event Tracking code. The full code is listed below.

$(‘.footer li a’).click(function(){
_gaq.push([‘_trackEvent’, ‘Navigation’, ‘Footer’, $(this).attr(‘href’)]);
_gaq.push([‘two._trackEvent’, ‘Navigation’, ‘Footer’, $(this).attr(‘href’)]);
});

This looks harder than it is.  The JQuery function ($ is JQuery shorthand for function) is simply looking for javascript events associated with navigational features in the page (like clicking links or keyboard presses). It identifies events within different navigation by a combination of CSS (classes or IDs) and HTML tags (e.g. <li>, <a>). In this example, the events are being selected in the combination (‘.footer li a’). This is what these refer to:

• “.footer”  is the name of the CSS style class associated with the <DIV> element for the footer navigation
• “li” is checking for any lists (HTML <li> list tags) within the footer DIV, class “.footer”
• “a” is checking for any links (<a> tags) in the lists in the DIV, class “.footer” ) 

When the JQuery function detects events in navigation elements that match these criteria, it sends a coded packet of data to our Analytics accounts. The line is the one sending the data:

_gaq.push([‘_trackEvent’, ‘Navigation’, ‘Footer’, $(this).attr(‘href’)]);

In this example, the following “category”, “action” and “label” data is being sent:

• Category = ‘Navigation’ – this is to distinguish a navigation event from other events we record
• Action = ‘Footer’ – this is to distinguish it’s the footer navigation
• Label = the URL of the link. This is where it is pointing at and is obtained using the JQuery function, “$(this).attr(‘href’)” .

And that, more or less is how it works. For details of the full JQuery and Google Analytics code, see below, but first, here are some examples of why this may be worth doing…

Example 1 – general navigation features

What the user sees…

This is a typical V&A page, the Fashion subject hub, showing the layout of the page and common navigational features. The various navigation areas are highlighted with blue dots. 

The navigational features highlighted above are found across the site. They are…

1. Header (An orientation navigation displayed at the top of all pages with easy links to major content areas)
2. Two megamenus for “What’s in the V&A” and “Visit Us”. The first lists subjects of interest for which the V&A has significant collections (Note – this is deliberately NOT by department. Users don’t care about that) and the second has important links to help visitors to the Museum.
3. Recommended Read (Content highlights that have been editorially chosen as recommended on any subject hub)
4. Related content (Automatic selection of articles likely to be about similar, but more tangentially-connected subjects)
5. Related images from the Collections (Automatic selection of images of collection objects that are related to the subject of the page)
6. Promotional module (A random selection from a small fixed list of current items being promoted, such as Membership benefits)
7. Shop promotions (An item available online from the V&A Shop. This is automatically selected, based on the subject of the page)
8. Event Promotions (An event at the V&A, automatically selected based on the subject of the page)
9. Footer (A fixed orientation-navigation displayed at the bottom of all pages with a greater links to significant services)

Some like the header and footer feature on every page, promotional navigation-features could be used on almost any page but may not always be used and “Recommended Read” navigation appears on main subject hub pages, but not general article pages.

The data we can see about general navigation use

To see the data in Analytics, the standard Event report is used. Here is a simple example. The Event category “Navigation has been selected” and this report is showing all the data for the Navigation category, listed by Event Action (as Primary Dimension) and Event Label (as Secondary Dimension).

It is lists the top ten links under the general category of navigation. This tells us other interesting things. For example, the fifth most used navigational link is a Mobile navigation menu not visible on the webiste on desktop computers. While it is not surprising that What’s On and the Home Page links in the Header are the top two most used navigational links, it was less expeceted that the third most popular link (current exhibitions) is in the Footer. Interesting…

Example 2: Responsive mobile display

The V&A website changes responsively to give a display optimised for the size of screen our visitors are accessing it with. It changes by screen-width in fact. The Fashion page viewed on a small screen (320px and lower) is much more compact and has a different way of handling the navigation. The mobile view is a single column with collapsed menus. Because space is limited, it handles navigation by having two modes, Content-Viewing (shown left below, with no navigation showing) and Navigation (shown right below, with navigation, but no content showing)

The Event Tracking data can show us the relative use of each of the menu items in the mobile “Sections” navigation. Here is the report for the Sections menu listed by Label (equivalent to link URL).

The top three pages are visitor-related (77.4% of all navigation activity on the mobile menu). This indicates that on a mobile phone, people are accessing the site with visiting in mind. Here is the same menu with the results against it.

This is useful to know, as it implies that the menu is in the wrong order for the visitors using it, especially for the V&A Channel and Support Us pages, which visitors are showing very low interest in. 

Summary

With just these simple examples, it is clear that there is much to be learned from data collected that represents how visitors really use the features we provide. We hope that you can use this to help you understand your visitors too.

Google Analytics basic code

On our main site all pages have the following javascript added, which simply sends data on load. Data is actually sent to two separate properties here.

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-376941-9']);
_gaq.push(['_setDomainName', '.vam.ac.uk']);
_gaq.push(['_setAllowHash', 'false']); _gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
_gaq.push(['two._setAccount', 'UA-376941-1']);
_gaq.push(['two._setDomainName', '.vam.ac.uk']);
_gaq.push(['two._trackPageview']);
_gaq.push(['two._trackPageLoadTime']);
(function() { var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

ga_event_tracking.js

This is the jQuerycode used on the V&A website. It is there to make the connection between the javascript events and CSS identification on your page and the Google analytics data capture process.

NOTE – this version uses a deprecated JQuery method called “.live()”, This is because at the time of writing, the JQuery version <insert> is being reviewed for updating. 
You should refer to the JQuery documentation for the latest recommended method.
http://api.jquery.com/live/

jQuery(document).ready(function(){

_gaq.push(['_setCustomVar', 1, 'Viewport Width', $(window).width(), 1]);
_gaq.push(['two._setCustomVar', 1, 'Viewport Width', $(window).width(), 1]);

$('#keyterm-menu li a').live('click', function(){
_gaq.push(['_trackEvent', 'Search', 'Keyterm suggestion', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Search', 'Keyterm suggestion', $(this).attr('href')]);
});

$('#keyterm-menu li a').live('keypress', function(e){
var k = e.keyCode?e.keyCode:e.which;
if( k===13 ){
_gaq.push(['_trackEvent', 'Search', 'Keyterm suggestion', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Search', 'Keyterm suggestion', $(this).attr('href')]);
}
});

$('#article-menu li a').live('click', function(){
_gaq.push(['_trackEvent', 'Search', 'Article suggestion', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Search', 'Article suggestion', $(this).attr('href')]);
});

$('#article-menu li a').live('keypress', function(e){
var k = e.keyCode?e.keyCode:e.which;
if( k===13 ){
_gaq.push(['_trackEvent', 'Search', 'Article suggestion', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Search', 'Article suggestion', $(this).attr('href')]);
}
});

$('.related-content li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Related content', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Related content', $(this).attr('href')]);
});

$('.related-themes li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Explore other subjects', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Explore other subjects', $(this).attr('href')]);
});
$('.related-images a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Related images from the collections', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Related images from the collections', $(this).attr('href')]);
});

$('.promotion-site a').click(function(){
_gaq.push(['_trackEvent', 'Promotion', 'Site promotion', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Promotion', 'Site promotion', $(this).attr('href')]);
});

$('.promotion-shop a').click(function(){
_gaq.push(['_trackEvent', 'Promotion', 'Shop product', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Promotion', 'Shop product', $(this).attr('href')]);
});

$('.promotion-event a').click(function(){
_gaq.push(['_trackEvent', 'Promotion', 'Event', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Promotion', 'Event', $(this).attr('href')]);
});

$('.promotion-tickets a').click(function(){
_gaq.push(['_trackEvent', 'Promotion', 'Tickets', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Promotion', 'Tickets', $(this).attr('href')]);
});

$('#header-nav li > a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Header', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Header', $(this).attr('href')]);
});

$('#header-nav .subnav a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Megamenu', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Megamenu', $(this).attr('href')]);
});

$('#mobile-nav li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Mobile Sections', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Mobile Sections', $(this).attr('href')]);
});

$('#mobile-nav li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Mobile Sections', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Mobile Sections', $(this).attr('href')]);
});

$('#mobile-nav a.tab').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Mobile Sections', 'Sections Button']);
_gaq.push(['two._trackEvent', 'Navigation', 'Mobile Sections', 'Sections Button']);
});

$('#mobile-nav a.tab.open').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Mobile Sections', 'Sections Closed']);
_gaq.push(['two._trackEvent', 'Navigation', 'Mobile Sections', 'Sections Closed']);
});

$('#mobile-nav li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Mobile Nav', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Mobile Nav', $(this).attr('href')]);
});

$('.footer li a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Footer', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Footer', $(this).attr('href')]);
});

$('#content').find('a[rel=#popup]').click(function(){
_gaq.push(['_trackEvent', 'Content', 'Pop-up Image', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Content', 'Pop-up Image', $(this).attr('href')]);
});

$('#mustread a').click(function(){
_gaq.push(['_trackEvent', 'Content', 'Must read', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Content', 'Must read', $(this).attr('href')]);
});

$('#recommendedread a').click(function(){
_gaq.push(['_trackEvent', 'Content', 'Recommended read', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Content', 'Recommended read', $(this).attr('href')]);
});

$('#area3 a').click(function(){
_gaq.push(['_trackEvent', 'Content', 'Area three', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Content', 'Area three', $(this).attr('href')]);
});

$('#recently-viewed a').click(function(){
_gaq.push(['_trackEvent', 'Navigation', 'Recently viewed', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Navigation', 'Recently viewed', $(this).attr('href')]);
});

$('.randomise a').click(function(){
_gaq.push(['_trackEvent', 'Home Page', 'Randomised Box', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Home Page', 'Randomised Box', $(this).attr('href')]);
});

$('#keep-in-touch a').click(function(){
_gaq.push(['_trackEvent', 'Home Page', 'Keep in touch', $(this).attr('href')]);
_gaq.push(['two._trackEvent', 'Home Page', 'Keep in touch', $(this).attr('href')]);
});

$('a').click(function(){
if (/vam.ac.uk$/.test(this.hostname) === false) {
_gaq.push(['_trackEvent', 'Links', 'External', this.hostname]);
_gaq.push(['two._trackEvent', 'Links', 'External', this.hostname]);
}
});

$('a[href$="ppt"],a[href$="doc"],a[href$="pdf"]').click(function(){
var filename = this.pathname.replace(/^.*[\\\/]/, '');
_gaq.push(['_trackEvent', 'Links', 'Download', filename]);
_gaq.push(['two._trackEvent', 'Links', 'Download', filename]);
});

$("a[href*='lovetheatre.com']").click(function() {
_gaq.push(['_link', this.href]);
_gaq.push(['two._link', this.href]);
});

if (typeof(FB) !== 'undefined' && FB.Event && FB.Event.subscribe){
FB.Event.subscribe('edge.create', function(targetUrl){
_gaq.push([trackerName + '_trackSocial', 'facebook', 'like', targetUrl]);
});

FB.Event.subscribe('edge.remove', function(targetUrl){
_gaq.push([trackerName + '_trackSocial', 'facebook', 'unlike', targetUrl]);
});

}
});

Code handy reference links

Credits

This code was originally implemented by Rich Barrett-Small, and added to by Luca Carini. Hats off to clever developers everywhere.