Is Your Responsive Design Working? Google Analytics Will Tell You

Is Your Responsive Design Working? Google Analytics Will Tell You

• By Jon Arne Sæterås and Luca Passani


• August 28th, 2014


• AnalyticsData VisualizationJavaScript


• 0 Comments

Responsive web pattern has turn a widespread process of building and conceptualizing websites. It creates it easier to consider “mobile first” and to emanate a website that is ocular on mobile devices.

In a early days of manageable web design, formulating breakpoints in CSS for sold shade sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, and afterwards we tested and monitored those devices. As manageable pattern has evolved, we now some-more mostly start with a calm and afterwards set breakpoints when a calm “breaks.” This means that we competence finish adult with utterly a few content-centric breakpoints and no sold inclination or form factors on that to exam your website.

However, we are usually guessing that a designs will perform good with opposite device classes and form factors and opposite opposite communication models. We need to ceaselessly guard a design’s opening with genuine traffic.

Content-centric breakpoints are unequivocally a approach to go, yet they also meant that monitoring your website to brand when it breaks is some-more important. This information, when simply accessible, provides hints on what forms of inclination and form factors to exam further.

Google Analytics has some good multi-device features¹ built in; however, with manageable design, we are unequivocally conceptualizing for form factors, not for devices. In this article, we’ll denote how WURFL.js² and Google Analytics can work together to uncover opening metrics opposite form factors. No some-more guessing.

Why Form Factor?

Speeding adult and optimizing a user knowledge for a sold device or family of inclination is always easier. In reality, though, formulating a device-specific experience³ for all forms of inclination is not feasible, given that a farrago of web-enabled inclination will usually continue to grow. However, any device has a sold form factor. Luke Wroblewski⁴, author of Mobile First⁵, outlines 3 categories to brand device experiences⁶:

• usage or posture,


• input method,


• output or screen.

Because inclination change between these categories, we get opposite form factors. Hence, treating form cause as a primary dimension by that to guard a manageable website creates sense. This will prove that form of device to exam for usability.

The examples in this essay all use WURFL.js, including a form factors supposing by it, that are:

• desktop,


• app,


• tablet,


• smartphone,


• feature phone,


• smart TV,


• robot,


• other non-mobile,


• other mobile.

Feeding Data To Google Analytics

The initial step is to put WURFL.js on a pages that we wish to track. Simply pulp this line of formula into your markup:

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

This will emanate a tellurian WURFL intent that we can entrance by JavaScript:

console.log(WURFL.form_factor);

Now that a script tab is in place, a usually other thing to do is supplement a highlighted lines of formula to Google Analytics’ tracking code:

/* Google Analytics' customary tracking formula */
_gaq.push(['_setAccount', 'UA-99999999-1']);
_gaq.push(['_setDomainName', example.com']);
_gaq.push(['_trackPageview']);

/* Tell Google Analytics to record WURFL.js' information */
 _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' customary tracking formula */
(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 we have updated to Google Analytics’ new “Universal Analytics⁷“, we would supplement this:

/* Google Analytics' new concept tracking formula */
(function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r])(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-99999999-1, 'auto');

/* Define a tradition measure */
ga('send', 'pageview', 
 'dimension1': WURFL.complete_device_name,
 'dimension2': WURFL.form_factor,
 'dimension3': WURFL.is_mobile
);

Further, if we are regulating GA Universal Analytics, we contingency remember to interpretation a tradition dimensions. You do that by clicking Admin → Custom Definitions → Custom Dimensions.

⁸

For Universal Analytics we need to interpretation a tradition measure in a Admin section. (Large preview⁹)

Analyzing The Data In Google Analytics

Now that a information is in Google Analytics, we need to make it accessible for inspection. We can use tradition variables in Analytics in a series of ways, a many apparent being to demeanour in a menu on a left and click Audience → Custom → Custom Variables:

¹⁰

“Custom Variables” report. (Large version¹¹)

If we are are regulating Universal Analytics, you’ll have a tradition measure accessible as any other dimension in all reports in GA:

¹²

Accessing tradition dimensions. (Large preview¹³)

Already, we’re removing a flattering good design of how form factors act differently. The best metrics to concentration on will apparently count on your website, yet in general, compensate courtesy to rebound rate and pages per visit.

Big Picture With Dashboard Widgets

With dashboards¹⁴ in Google Analytics, we get a high-level overview of a many critical metrics. This is a good place to guard how your website performs opposite form factors. Once again, rebound rate and page impressions per revisit are good metrics to start with. The purpose of a dashboard widgets is to warning we and to daydream how your website’s opening changes for certain form factors.

Let’s emanate a few widgets to arrangement a standing of opposite form factors. First, emanate a pie-chart widget that shows how many your website is being used by opposite form factors.

¹⁵

Widget displaying form factors. (Large version¹⁶)

In a Dashboard, click Add Widget, name Pie, afterwards a Sessions metric, and organisation it by a form factor tradition variable. Note that a tag in a immature drop-down list is Custom Variables, not a tangible name. In a example, a form factor non-static is in a second slot, yet make certain to select a right container if you’ve implemented it in a opposite order. Again, if we have converted to Universal analytics, a procession is similar, yet in stead of selecting tradition variables, we simply supplement a name of your tradition dimension as we would with any other dimension.

Next, emanate a few widgets to arrangement visits and rebound rates¹⁷ per form factor. The widgets will prove either changes to a website have had a certain or disastrous impact. Obviously, we wish aloft visits and a reduce rebound rate.

¹⁸

Creating a “form factor” widget. (Larger version¹⁹)

Create this widget by adding a filter to a customary metrics. Choose a timeline blueprint and filter a information with your tradition non-static where we have stored a form factor. Create one widget for any of a form factors that we wish to monitor:

²⁰

“Form factor” widgets in a dashboard. (Large version²¹)

You competence find that some form factors disappear in a statistics for tellurian rebound rates since a information set is now bigger (as in a instance above). As indicated by a red arrows, something thespian has happened with smartphones and underline phones. Specifically, some changes were done to a alighting page to boost trade from tablets, and a changes clearly had a disastrous impact on trade from smartphones and underline phones. Identifying a reason for a dump in trade requires some-more fine-grained Analytics reports, and a dump competence not have been easy to mark though carrying monitored form factors.

Form Factor Segments

Any tradition non-static that we put into Google Analytics is, of course, accessible in many reports as filters or dimensions, so tweaking them to your needs is utterly easy. Another approach to keep form factors during a tip of mind is to put them in segments²² by formulating conditions. Here is one shred per form cause that you’ll wish to track:

²³

Configure a segment. If you’re regulating Universal Analytics, we contingency use your tradition measure rather than a tradition variables. (Large version²⁴)

The same, yet in Universal Analytics:

²⁵

(Large preview²⁶)

Google Analytics will uncover these segments in many of a customary reports as apart measure in charts and tables:

²⁷

Segments chart. (Large version²⁸)

You can make “form factor” a dimension in many reports. As mentioned, rebound rate and ubiquitous rendezvous are pivotal metrics to follow, yet goals and acclimatisation rate are apparently interesting, too. You competence find a need to emanate new goals or during slightest examination your flue for certain form factors.

After monitoring form factors for a while, we competence interpretation that we need to offer opposite user practice for one or some-more form factors. Furthermore, we competence need to tweak goals, funnels and promotion campaigns to comment for differences in use per form cause or device type.

We have used Google Analytics here, yet WURFL.js is, of course, concordant with other analytics tools, as prolonged as tradition variables like a ones above are allowed.

Conclusion

In this article, we have looked during how opening per form cause is a pivotal metric for monitoring a website and how WURFL.js and Google Analytics assistance to daydream this data. Once we put WURFL.js’ information into Analytics, it will be accessible in many customary reports as filters or dimensions, so tweaking a reports to your needs is utterly straightforward. And a dashboard widgets will give we a high-level overview of their status. Also, rebound rate and page impressions per revisit are pivotal metrics, during slightest to start; so, defining form factors as segments will give we good visualizations in many customary reports.

As a subsequent step, demeanour into conversions and goals in Google Analytics to see how to confederate and guard form factors, that will change according to a website’s duty and purpose. To give we a conduct start, we have done a template that we can install²⁹ in your Google Analytics dashboard (This template uses tradition variables, not tradition dimensions). Just follow a instructions to allot an Analytics property, that will afterwards seem underneath Dashboards → Private.

(al, ml, il)

Footnotes

1. 1 http://www.smashingmagazine.com/2014/03/03/how-to-use-analytics-to-build-a-smarter-mobile-website/


2. 2 http://wurfl.io


3. 3 https://developers.facebook.com/blog/post/2012/01/24/device-experiences—responsive-design/


4. 4 http://www.lukew.com/


5. 5 http://www.lukew.com/resources/mobile_first.asp


6. 6 https://developers.facebook.com/blog/post/2012/01/24/device-experiences—responsive-design/


7. 7 https://support.google.com/analytics/answer/2790010?hl=en


8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAcustomdim-large-opt.png


9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAcustomdim-large-opt.png


10. 10 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image01-large-opt.png


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image01-large-opt.png


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAUIcustomdim-large-opt.png


13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAUIcustomdim-large-opt.png


14. 14 https://support.google.com/analytics/answer/1068216?hl=en


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image05-large-opt.png


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image05-large-opt.png


17. 17 https://support.google.com/analytics/answer/1009409?hl=en


18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image00-large-opt.png


19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image00-large-opt.png


20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image04-large-opt.png


21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image04-large-opt.png


22. 22 https://support.google.com/analytics/topic/3123779?hl=enref_topic=1727148


23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image03-large-opt.png


24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image03-large-opt.png


25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAcustomin2-large-opt.png


26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/07/GAcustomin2-large-opt.png


27. 27 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image02-large-opt.png


28. 28 http://www.smashingmagazine.com/wp-content/uploads/2014/05/image02-large-opt.png


29. 29 https://www.google.com/analytics/web/template?uid=gUP6PNubRZ6qlqhq4M2g2Q

↑ Back to topShare on Twitter

Is Your Responsive Design Working? Google Analytics Will Tell You