Google Analytics and Responsive Web Design – Introducing Responsive Tracking

von Henry Zeitler

Nowadays, responsive web design has become a common approach for building mobile-optimized Websites. As you might know, the technique behind this changes the layout of a page to enhance the user experience depending on the viewport using media queries. But what about tracking those alternate states of a page in Google Analytics? Here’s a working example of how we can track events in a responsive environment.

This article was published on February, 7th 2013 on Netzkern Maigrün-Blog.

 

In responsive web design (RWD) the sections of a page get rearranged
with the help of CSS3 media queries. In general, the most valuable content
for the user will be placed highest on the page to avoid unnecessary
scrolling on a mobile device. Less useful content will fill
up the lower sections. An important element for the conversion could be a
searchbox, a product description or an article
depending on the type of website or the business behind it.
By
reordering the hierarchy of the page’s sections and components, some
parts will lose the precious focus of the user. To get an idea of how a
user interacts with those components, we need a method to track
specific events on mobile devices.
To create another buzzword, let’s call it Responsive Tracking.

 

The issue

Let’s assume we want to track the clicks on a certain button on a mobile device. In the desktop version it may be placed on the right hand side.
This will move the button far down the page on a 480px viewport size – far below “the fold” shown in the red area seen below.
As a consequence, the button will no longer be as prominent as it used to be. Being data driven when it comes to change, we need to measure how often it is being clicked.


The place of a button (red box) on a desktop and a mobile device.

To gather information about how the button converts and if the
visitor of the site interacts with it, we track the clicks
on it but only at a viewport size of 480px.

 

The idea

As we all know, it’s not possible to fire a Javascript event via a
media query in the CSS file. That means a solution based on Javascript
is needed to trigger the event tracking. A solution to simply detect the
viewport size is already available in Javascript (here’s Andy Langton’s approach to it).
However, it’s not able to catch and then react to a viewport change like a switch from portrait to landscape mode and back.

Event tracking in Google Analytics (GA) are simple Javascript methods that send customized values through a tracking pixel (_utm.gif) to your GA account. Once processed in GA, those values are counted and displayed in the Event Overview
section. This makes it very easy to send customized values into GA.
Fortunately there is already a snippet that fits our needs and
forms the basis for Responsive Tracking.

At this point, enquire.js
comes into play. enquire.js is a Javascript library without any
dependencies on jQuery (even if we’ll use it in this example anyway) or
other similar libraries. It’s lightweight (less than 1kb when GZIP’d and
minified) and very easy to use. It works with the simple syntax know
from the CSS media queries to set up the detection rules. Here’s an
example of how it looks.


enquire.register("screen and (max-width:1000px)", {
    match : function() { console.log('1000px'); }
 }).listen();

 

The solution

Let’s go back to the test scenario and let’s assume the button we
want to track isn’t a real button, it’s an email-link to contact the
service team of a shop with the appearance of a button.
The GA-code, jQuery and enquire.js are already implemented into the page
and the only thing to do is to add a function to fire the event when
the email was clicked. Sounds easy? Indeed it is…

The tricky part is that we only want the event to be fired when the
user is within the 480px viewport range, therefore we’ll dynamically
apply a class to the anchor-element and remove it when the screen size is larger than this. The
function to achieve this with the help of enquire.js looks like this:


$(function() { 

  var query = "screen and (max-width:480px)";
  var iconMail = $(".icon-mail");

  function respClass(className) {
    return {
      match : function() {
        iconMail.addClass(className);
        console.log('add class 480px');
      },
      unmatch : function() {
        iconMail.removeClass(className);
        console.log('remove class 480px');
      }
    };
  }
  enquire
    .register(query, respClass("clickMail"))
    .listen();
  });

Explanation: At first the media query (var query) is set to a maximum width of 480px and the class of the element we want to manipulate is being declared (.icon-mail).
The
next function defines the behavior when the viewport matches or
respectively unmatches a width of 480px. In this case the class called .clickMail is added to or removed from the element. console.log
is just for debugging purposes and posts a message to the console of
the Dev Tools when the viewport matches. It can be removed after debugging.
The last paragraph initializes enquire.js and, by adding the handler listen(), the event is going to be fired each time the user enters or leaves the 480px range.
Next we’ll build the click-event for the dynamically applied class clickMail with jQuery:


$(".clickMail").live("click", function() { 
    _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); 
    _gaq.push(['_trackEvent', 'Get In Touch', 'Click Email at 480px']); 
    console.log('Email clicked at 480px'); 
  });

We use the jQuery event handler live()
here, because the class was added dynamically to the element and isn’t
present in the DOM when it is first rendered. Without this handler, the
click event won’t be fired and that’s the simple reason why we use
jQuery for this case. The next two lines represent the GA tracking code
for events. We provide the account-ID as well as the event with the
category “Get In Touch” and the title “Click Email at 480px”. Category
and title are defined by the analyst to make sure that the events can be
kept apart from each other. Learn more about tracking events in GA at Tracking Basics (Asynchronous Syntax).

Tracking in GA
Tracked events in GA’s overview section

If everything works fine, the result will appear in the Events
Overview in the Content section of Google Analytics. You can filter the
events by clicking on the category name. If you want to easily set up
and configure tracking events for GA, you can use Raven’s Google Analytics Configuration Tool.
At this point we have achieved to set up a simple solution to track events in RWD.

Unfortunately
debugging the code can be a pain because it takes up to 24h until
the results appear.

 

Quick tip for debugging

For debugging the code we use the Developer Tools of Google
Chrome. I know that there are several extension like Google Analytics
Debugger for Chrome and Firefox
making it more easy to read out the data within the headers of the
tracking pixel. But I choose the Developer Tools to avoid cluttering my browser with
extensions and plugins. People often aren’t aware of the capabilities
the Dev Tools provided. So let’s dive into it.

After implementing the function for the tracking of the event into
the source code of the website, we first open the site and then the Dev
Tools in Chrome (hit F12). To be sure to match 480px we scale the
browser window down until the console displays the add class 480px message. After clicking the element we want to track the event should be fired. We can examine it by clicking on Network in the Dev Tool panel and check the last entries.
Here we can see if the __utm.gif
was fired (see screenshot below, top section). If not, check the code
of enquire.js and the jQuery handlers. If so, click on the item to open
the details of the header.
Within the headers you should see the
domain, the values of your event (category, title, …) and the ID of your
GA account. If not, you should check the event tracking code of GA.

debug view of Chrome
Top: check if the analytics-gif has been send. Bottom: check the headers and if all informationn are contained in it.

As simple as the implementation is, I’m looking forward to hear your thoughts, ideas and improvements.

comments powered by Disqus