View
250
Download
1
Category
Preview:
Citation preview
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.
Recommended