Google Analytics Viewport Tracking
Google Analytics has tracked browser viewport sizes for almost four years, but I found it was imprecise. After doing some recent testing I have decided it works well and have started to dump my own tracking as a result.
This post shares some of the history and comparison information.
History
I have argued for years that designing web pages to specific screen sizes is a terrible idea. Not just because too many designers rely on pixel-perfect layouts, but also because designers rarely accounted for browser chrome (such as scrollbars).
When I say I have been arguing for years, I mean since at least 2000 when I wrote Real-World Browser Size Stats, Part I and Real-World Browser Size Stats, Part II (though I was definitely ranting on the evolt.org mailing list before that). In them I provided a script for grabbing and logging viewport sizes, and then compared those numbers across screen sizes.
In 2013 I shared a script on how to capture viewport sizes using Google Analytics in the post My Viewport Sizes. Now it was much easier to compare screen sizes and window sizes, and hopefully to make it easier to fold that into reports that end up in front of or informing designers.
I shared that script about six months after Google released the ability to look at browser sizes (what I call viewport sizes) in Google Analytics. While I had written my script a couple years earlier, I opted not to mention Google’s new offering since it was… inaccurate in my testing.
Currently
As I recently started making some updates to my site, I figured it was time to compare my numbers with what Google Analytics was reporting. I modified my script to use Universal Analytics and got to work capturing data.
From My Own Script
This is data pulled from an updated version (using the Universal Analytics syntax) of my own script.
From Google Analytics
This is generated from the Browser Size data available in Google Analytics.
Exceptions
Out of 500 data points, the following three came back from Google Analytics as not set
. For the chart above I set them to 0 × 0 instead of discarding the data points completely. The following table shows them. It is worth noting that often these data points are not proper user agents, and often correspond to bots.
| My script | Google Analytics | Browser |
|---|---|---|
| 0 × 224 | (not set) | Chrome 55.0.2883.91 on Android 7.1.1 |
| 1024 × 800 | (not set) | UC Browser 8.7.0.218 |
| 0 × 0 | (not set) | Android Webview, Android 6.0.1 |
Combined
In an effort to show how the two sets of data compare, I have plotted them both into one chart using a questionable set of colors. For the most part, the difference is negligible for any use where you do not need pixel precision.
5 Comments
Reply Thanks for this, your posts on analytics + viewport have been very helpful!
Reply would love to see the script though
In response to . Reply Bogdan, it is linked from the third paragraph under the History heading.
Reply Looks like they stole your code! Nice correlation :-)
Also what is 380 as a viewport width for iPhone?
The most common iPhone viewport width is 375, but I see only 380 for width.Where did 380 come from? What do you see in your own reports – or are they long gone? For screen resolution i get 375, but for viewport it’s 380. No idea why.
In response to . Reply Simon, my own script would return 375 as well. When I look for 380 at Viewport Sizes, I get no hits. 375 corresponds with iPhone 6. While the site appears to have nothing past 2015, it at least confirms that iPhone 6 does not come in at 380. So my guess is that Google introduces some rounding errors. Looking at the combined chart above tells me that Google introduces some sort of offset across all devices.
Leave a Comment or Response