Friday, January 18, 2013

My Viewport Sizes

Screen shot of my desktop.
Yes, that is my two monitor set-up — one display at 1,920 × 1,080 (with a browser at whatever size will fit my tabs) and one at 1,024 × 1,280 (with a browser always at 1,024 × 1,024). My browser reports two different screen resolutions depending which display the browser is using.

During the last rebuild of my site at least two years ago I started to track the viewport sizes of my visitors via Google Analytics. Since I don't care much about screen resolution (screen size), I don't bother to track it.

Yesterday I saw a post that tracks screen sizes between technical and not-so-technical visitors to the author's site. While the information is interesting, it doesn't include any viewport data, which happens to be what I care about.

This motivated me to jump into my Google Analytics and pull the viewport data that I have. The chart below represents what I found:

What I've done is grabbed the last 500 visits to my site for which I have data (even bad data) and plotted them in a scatter chart without regard to the frequency of a particular resolution. To be clear, this isn't scrubbed data and it's not from a site targeted at the general web user.

The block of code I use to get this data into Google Analytics does the job. I borrowed the code from the post Measuring browser viewport size with Google Analytics, though I make my viewport(); call at the end of the page, not in the body.

function viewport() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
  //Non-IE
  myWidth = window.innerWidth;
  myHeight = window.innerHeight;
  } else if( document.documentElement &&
 ( document.documentElement.clientWidth
 || document.documentElement.clientHeight ) ) {
  //IE 6+ in 'standards compliant mode'
  myWidth = document.documentElement.clientWidth;
  myHeight = document.documentElement.clientHeight;
  } else if( document.body &&
 ( document.body.clientWidth
 || document.body.clientHeight ) ) {
  //IE 4 compatible
  myWidth = document.body.clientWidth;
  myHeight = document.body.clientHeight;
  }
  _gaq.push(['_trackEvent',
   'Viewport',
   'Size',
   myWidth+'x'+myHeight]);
  _gaq.push(['_trackEvent',
   'Viewport',
   'Width',
   myWidth+'x'+myHeight,
   myWidth]);
  _gaq.push(['_trackEvent',
   'Viewport',
   'Height',
   myWidth+'x'+myHeight,
   myHeight]);
}

Hopefully that's enough to get your started on tracking viewport stats for visitors to your site. If you see ways I can improve it, then please do let me know. I can update this and we can all benefit.

If you are curious why I chose to skip tracking screen size and just focus on viewport size, I refer you to an article I wrote 13 years ago, along with more recent articles from me and others.

Update: February 15, 2013

Welcome, visitors from the below tweet. Please post your own comments or even your own stats. I would love to see them.

Update: November 13, 2013

To quote PPK, screen.width is useless. Devices don't consistently report device pixels or viewports in a consistent way. There is clearly still value in having some numbers, though the quality of those numbers is always suspect.

3 comments:

  1. Hi Adrian, thanks for the should out in the post post.

    I'm always really happy to see posts that focus on viewport size (rather than screensize), and even happier when making use of the method I described to capture and store the data!

    One thing I'd love to be able to do is improve the script to measure the part of the canvas visble on tablet and mobile screens. Viewport size doesn't give the true picture of what the user is seeing on those devices.

    In my reports (such as this one from last year: http://beantin.se/post/32275497175/computer-screens-browser-viewport-2012 ) I exclude mobile devices so I don't skew the data.

    ReplyDelete
    Replies
    1. As I am sure you can see, I've been trying to push viewport size over screen size for well over a decade now. Your script makes it easier for any web developer to add it and report on it now.

      Running comparisons against screen resolution data in Google Analytics is interesting and I'll be comparing and contrasting viewport and screen sizes in a later post. Your more recent post already does a nice job of showing some of that disparity.

      Thanks for writing that GA script. Nice time saver.

      Delete
  2. You're welcome! I also made it into a Wordpress plugin (need to get round to updating that as it currently screws up your bounce rate)

    I'm looking forward to your comparison post! Ping me when you publish it.

    ReplyDelete