Is Your Responsive Design Working? Google

Analytics Will Tell You

As people expected to be able to browse the web on their phones just as easily as

they browse the web on a desktop computer. Web designers are aggressively

involved in developing and designing their websites accessible to all screen types

especially on mobile devices.so creating a responsive web design has become a

dominant method in the field of web development.

Long ago, designers use breakpoints in CSS for particular screen sizes like 320

pixels for iPhone and 768 pixels for iPad, and then the sites were tested and

monitored on those devices. As responsive design has evolved, they start working

with content-centric breakpoints.

However, we are just assuming that our designs will perform well with different

devices. We need to monitor our website design’s performance with real traffic.

Though there are many tools available in the market to track and measure

responsive design changes .But Google Analytics has some great multi-device

features built in. In this article, we’ll demonstrate how WURFL.js and Google

Analytics can work together to show performance metrics across form factors.

Why Form Factor?

Speeding up and optimizing the user experience for a particular device or family

of devices is always easier. However, every device has a particular form factor.

Luke Wroblewski, author of Mobile First, outlines three categories to identify

device experiences:

Usage or posture,

Input method,

Output or screen.

The examples in this article use WURFL.js, including the form factors provided by

it, which are:

Desktop,

App,

Tablet,

Smartphone,

Feature phone,

Smart TV,

Robot,

Other non-mobile,

Other mobile.

Feeding Data to Google Analytics Link

Put WURFL.js on the pages that you want to track. Simply paste this line of code

into your markup:

<script type="text/javascript" src="//wurfl.io/wurfl.js"></script>

This will create a global WURFL object that you can access through JavaScript:

console.log(WURFL.form_factor);

Now that the script tag is in place, add the highlighted lines of code to Google

Analytics’ tracking code:

/* Google Analytics' standard tracking code */

_gaq.push(['_setAccount', 'UA-99999999-1']);

_gaq.push(['_setDomainName', example.com']);

_gaq.push(['_trackPageview']);

/* Tell Google Analytics to log WURFL.js' data */

_gaq.push(['_setCustomVar',

1,’complete_device_name’,WURFL.complete_device_name,1]);

_gaq.push(['_setCustomVar', 2,'form_factor',WURFL.form_factor,1]);

_gaq.push(['_setCustomVar', 3,'is_mobile',WURFL.is_mobile,1]);

/* The rest of Analytics' standard tracking code */

(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);

})();

Or, if you have updated to Google Analytics’ new “Universal Analytics“, you would

add this:

/* Google Analytics' new universal tracking code */

(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-99999999-1, 'auto');

/* Define the custom dimensions */

ga('send', 'pageview', {

'dimension1': WURFL.complete_device_name,

'dimension2': WURFL.form_factor,

'dimension3': WURFL.is_mobile

});

Further, if you are using GA Universal Analytics, you must remember to define the

custom dimensions. You do that by clicking Admin → Custom Definitions →

Custom Dimensions.

Analyzing the Data in Google Analytics Link

Now we need to avail data for inspection in Google Analytics. We can use custom

variables in Analytics in a number of ways, just look in the menu on the left and

click Audience → Custom → Custom Variables:

“Custom Variables” report. (Large version)

If you are using Universal Analytics, you’ll have the custom dimensions available

as any other dimension in all reports in GA:

Accessing custom dimensions. (Large preview)

You will get a pretty good picture of how form factors behave differently. You can

also find best metrics to focus on that will obviously depend on your website, but

in general, pay attention to bounce rate and pages per visit.

(Large preview)

Google Analytics will show these segments in most of its standard reports as

separate dimensions in charts and tables:

Segments chart. (Large version)

We have used Google Analytics here, but WURFL.js is, of course, compatible with

other analytics tools, as long as custom variables like the ones above are allowed.

Conclusion Link

In this article, we discovered that how performance per form factor is a key

metric for monitoring a website and how WURFL.js and Google Analytics help to

visualize this data. Also, bounce rate and page impressions per visit are key

metrics.

To give you more assistance, we provide responsive web design template that you

can install in your Google Analytics dashboard. Just follow the instructions to

assign an Analytics property, which will then appear under Dashboards → Private.