Is Your Responsive Design Working? Google Analytics Will Tell You

Advertisement

Responsive web design has become the dominant method of developing and designing websites. It makes it easier to think “mobile first” and to create a website that is viewable on mobile devices.

In the early days of responsive web design, creating breakpoints in CSS for particular screen sizes was common, like 320 pixels for iPhone and 768 pixels for iPad, and then we tested and monitored those devices. As responsive design has evolved, we now more often start with the content and then set breakpoints when the content “breaks.” This means that you might end up with quite a few content-centric breakpoints and no particular devices or form factors on which to test your website.

However, we are just guessing that our designs will perform well with different device classes and form factors and across different interaction models. We need to continually monitor a design’s performance with real traffic.

Content-centric breakpoints are definitely the way to go, but they also mean that monitoring your website to identify when it breaks is more important. This information, when easily accessible, provides hints on what types of devices and form factors to test further.

Google Analytics has some great multi-device features1 built in; however, with responsive design, we are really designing for form factors, not for devices. In this article, we’ll demonstrate how WURFL.js2 and Google Analytics can work together to show performance metrics across form factors. No more guessing.

Why Form Factor?

Speeding up and optimizing the user experience for a particular device or family of devices is always easier. In reality, though, creating a device-specific experience3 for all types of devices is not feasible, given that the diversity of web-enabled devices will just continue to grow. However, every device has a particular form factor. Luke Wroblewski4, author of Mobile First5, outlines three categories to identify device experiences6:

  • usage or posture,
  • input method,
  • output or screen.

Because devices vary between these categories, we get different form factors. Hence, treating form factor as the primary dimension through which to monitor a responsive website makes sense. This will indicate which type of device to test for usability.

The examples in this article all 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

The first step is to 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, the only other thing to do is 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 Analytics7, 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 AdminCustom DefinitionsCustom Dimensions.

GAcustomdim-preview-opt8
For Universal Analytics you need to define the custom dimensions in the Admin section. (Large preview9)

Analyzing The Data In Google Analytics

Now that the data is in Google Analytics, we need to make it available for inspection. We can use custom variables in Analytics in a number of ways, the most obvious being to look in the menu on the left and click AudienceCustomCustom Variables:

Custom Variables Report10
“Custom Variables” report. (Large version11)

If you are are using Universal Analytics, you’ll have the custom dimensions available as any other dimension in all reports in GA:

GAUIcustomdim-preview-opt12
Accessing custom dimensions. (Large preview13)

Already, we’re getting a pretty good picture of how form factors behave differently. The best metrics to focus on will obviously depend on your website, but in general, pay attention to bounce rate and pages per visit.

Big Picture With Dashboard Widgets

With dashboards14 in Google Analytics, we get a high-level overview of the most important metrics. This is a good place to monitor how your website performs across form factors. Once again, bounce rate and page impressions per visit are good metrics to start with. The purpose of the dashboard widgets is to alert you and to visualize how your website’s performance changes for certain form factors.

Let’s create a few widgets to display the status of different form factors. First, create a pie-chart widget that shows how much your website is being used by different form factors.

Widget displaying form factors15
Widget displaying form factors. (Large version16)

In the Dashboard, click Add Widget, select Pie, then the Sessions metric, and group it by the form factor custom variable. Note that the label in the green drop-down list is Custom Variables, not the actual name. In our example, the form factor variable is in the second slot, but make sure to choose the right slot if you’ve implemented it in a different order. Again, if you have converted to Universal analytics, the procedure is similar, but in stead of selecting custom variables, you simply add the name of your custom dimension as you would with any other dimension.

Next, create a few widgets to display visits and bounce rates17 per form factor. The widgets will indicate whether changes to the website have had a positive or negative impact. Obviously, you want higher visits and a lower bounce rate.

Creating a “form factor” widget18
Creating a “form factor” widget. (Larger version19)

Create this widget by adding a filter to the standard metrics. Choose a timeline diagram and filter the data with your custom variable where you have stored the form factor. Create one widget for each of the form factors that you want to monitor:

“Form factor” widgets in the dashboard20
“Form factor” widgets in the dashboard. (Large version21)

You might find that some form factors disappear in the statistics for global bounce rates because the data set is now bigger (as in the example above). As indicated by the red arrows, something dramatic has happened with smartphones and feature phones. Specifically, some changes were made to the landing page to increase traffic from tablets, and the changes clearly had a negative impact on traffic from smartphones and feature phones. Identifying the reason for the drop in traffic requires more fine-grained Analytics reports, and the drop might not have been easy to spot without having monitored form factors.

Form Factor Segments

Any custom variable that you put into Google Analytics is, of course, available in most reports as filters or dimensions, so tweaking them to your needs is quite easy. Another way to keep form factors at the top of mind is to put them in segments22 by creating conditions. Here is one segment per form factor that you’ll want to track:

Configure a segment23
Configure a segment. If you’re using Universal Analytics, you must use your custom dimensions rather than the custom variables. (Large version24)

The same, but in Universal Analytics:

GAcustomin2-preview-opt25
(Large preview26)

Google Analytics will show these segments in most of its standard reports as separate dimensions in charts and tables:

Segments chart27
Segments chart. (Large version28)

You can make “form factor” a dimension in most reports. As mentioned, bounce rate and general engagement are key metrics to follow, but goals and conversion rate are obviously interesting, too. You might find the need to create new goals or at least review your funnel for certain form factors.

After monitoring form factors for a while, you might conclude that you need to offer different user experiences for one or more form factors. Furthermore, you might need to tweak goals, funnels and advertising campaigns to account for differences in usage per form factor or device type.

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 have looked at 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. Once you put WURFL.js’ data into Analytics, it will be available in most standard reports as filters or dimensions, so tweaking the reports to your needs is quite straightforward. And the dashboard widgets will give you a high-level overview of their status. Also, bounce rate and page impressions per visit are key metrics, at least to start; so, defining form factors as segments will give you nice visualizations in most standard reports.

As a next step, look into conversions and goals in Google Analytics to see how to integrate and monitor form factors, which will vary according to the website’s function and purpose. To give you a head start, we have made a template that you can install29 in your Google Analytics dashboard (This template uses custom variables, not custom dimensions). Just follow the instructions to assign an Analytics property, which will then appear under DashboardsPrivate.

(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=en&ref_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 top Tweet itShare on Facebook

Jon Arne is an active member and thought leader in the global mobile community since the late nineties. Jon Arne is a developer by trade, and truly believe that the key to success is a happy end user, and that innovative use of technology will help achieve that truly optimal user experience. Coding now is just done for recreation as he is now heading the Innovation team at ScientiaMobile.

Luca Passani is an Italian software engineer with many years of experience in Web and Mobile Internet development. Prior to co-founding his company, ScientiaMobile, Luca has worked for Openwave Systems, AdMob (now part of Google) and taken part in projects for Telecoms in the US and Europe. He is known to the community of developers for identifying the issues of device diversity (an area in which Luca is a recognized expert) as early as 1999. In 2001, Luca created WURFL, the Wireless Universal Resource FiLe, an Open-Source project that addressed the challenges of device fragmentation and established itself as the reference framework in the field.

Advertisement
  1. 1

    Shouldn’t you make the wurfl.js JS include async?

    1
    • 2

      Jon Arne Sæterås

      August 28, 2014 4:30 pm

      Yes. Thank you for mentioning that. If wurfl.js is not used for anything “rendering critical” asynchronous loading is of course preferred. In the examples above, we could have made it async.

      7
  2. 3

    It’s worth noting that, by default, Google Analytics has no visibility of low-end devices that don’t run their JavaScript tracking code. So, before deciding that you have no feature phone traffic, you may want to either use a different analytics solution or try the various techniques for making GA work on low-end devices.

    6
    • 4

      Jon Arne Sæterås

      August 28, 2014 7:11 pm

      Ronan,
      Thank you for making this point. For the good old feature phones as we knew them 10-ish years back, you are right. The method described in this article require the browser to execute JavaScript. Even if these types of devices are still around in quite a large number, they are almost extinct on the web. Maybe because they can’t read modern html(5) pages? Anyway, WURFL.js will also report a number of newer devices as feature phones. Such as the Nokia Asha series for example. Moreover, what was a smartphone yesterday, might be a feature phone today, like Symbians or BBs.
      If non-JavaScript devices are important, there are a number of Analytics solutions out there, for example InSight from ScientiaMobile (http://scientiamobile.com/insight)

      4
  3. 5

    wurfl.io is real fantastic. Very useful. Thank you. Thank you.

    2
  4. 6

    I noticed in the custom dimension definition for Universal Analytics, that you specified hit-scope. I think session-scope would be a better choice.

    A user’s device cannot change during a session, so the extra granularity of hit-scope isn’t needed.

    Further, as protection against a delay or failure of the lookup to WURFL servers, an asynchronous pattern should be used (as noted in a prior comment). This means there’s no guarantee of a response on every page of a session. With a session-scope custom dimension, a setting only needs to be successful once during a session, and GA applies it to all other hits from that session.

    4
  5. 7

    Jon Arne Sæterås

    September 8, 2014 5:49 pm

    Eric,
    Yes, session would be the better choice. The examples are, well, examples, and we went for the defaults just not to confuse our readers. Anyway, you have a point and thank you for pointing it out.

    0
  6. 8

    Hi there, I’ve started with Google Analytics this year so I’m still learning a lot.

    After I have implemented the new tracking code for my website http://conversionadvantage.com/my GA stopped tracking; telling me I don’t have the code on my website. Can someone give me pointers please as what I could have done wrong? I really want to get it right as I think it is a great feature! My code looks like this:

    (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-xxxxxxxx-x’, ‘auto’);
    ga(‘require’, ‘displayfeatures’);
    ga(‘send’, ‘pageview’, {
    ‘dimension2′: WURFL.complete_device_name,
    ‘dimension4′: WURFL.form_factor,
    ‘dimension3′: WURFL.is_mobile
    });

    I just have different dimensions since nr 1 is taken. The developer also added

    So any thoughts for a newbie?

    -2

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top