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 website accessible to all screen types, especially on mobile devices.
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.so creating a responsive web design has become a dominant method in the field of web development.
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, an 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
Put WURFL.js on the pages that you want to track. Simply paste this line of code into your markup:
//wurfl.io/wurfl.js
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
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 andpage-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.
Custom Website Design , Web Development in Toronto 
