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.

Viewport Width × Viewport Height at AdrianRoselli.com for 500 unique data points around February 17, 2017 as reported by my own tracking script.

From Google Analytics

This is generated from the Browser Size data available in Google Analytics.

Viewport Width × Viewport Height at AdrianRoselli.com for 500 unique data points around February 17, 2017 as reported by 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.

Data as reported by my script versus Google Analytics.
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.

Combined Data from My Script (green triangle) and Google Analytics (blue circle).

5 Comments

Reply

Thanks for this, your posts on analytics + viewport have been very helpful!

Tyler; . Permalink
Reply

would love to see the script though

Bogdan; . Permalink
In response to Bogdan. 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 Simon. 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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>