Skip to content

Google Analytics Viewport or Browser Size

Last Updated: May 13, 2022

Viewport or Browser Size Report

One key metric to understand how people use your website is the size of a visitor’s browser.

Browser size, or viewport, is closely related to screen resolution. Let’s begin by understanding the difference between viewport and screen resolution. Screen resolution is the entire amount of width and height that a visitor has available on their screen. However, the address bar and other toolbars in the browser fill up some of the space. On desktop devices, part of the screen is consumed by the start bar. There’s also the scroll bar to consider. Once you factor in all these various elements, you’re left with a smaller part of your screen that visitors can use to load your website. And of course, on desktop, people can resize their browser which makes the viewport or browser size even smaller.

With that in mind, the screen resolution is a measure of the entire screen while the browser or viewport size is a measure of how much of that screen is available for loading your website. Together, these two metrics can help you understand your visitors and how you should design your website. In particular, knowing these two metrics can help you decide where you should position elements to make sure everybody can see everything that they’re supposed to see on your website. It is also important to test your website at specific screen resolution and viewport sizes before making any major design changes.

You can learn more about screen resolution in a separate article but in this article, we’ll focus on the browser size or the viewport and how you can access data about the browser size in Google Analytics.

Bonus tip: Viewport relates to Core Web Vitals and you’ll want to understand your visitor’s viewports when measuring those key metrics.

Browser Size Report in Universal Analytics

To find browser sizes in the original version of Google Analytics (Universal Analytics or GA3):

  • Click to Audience in the sidebar
  • In the Audience section, click on Mobile
  • Under Mobile, click Overview
  • On the Mobile Overview report, add a secondary dimension of Browser Size.

This report shows all the browser sizes for each device type, allowing you to view all the different viewport sizes people use. Here, you can see the total sessions for each size and you can also see behavioral metrics like the bounce rate or pages per session for each browser size. And of course, you can also view conversions or goals per size.

You can use the search within the table to see browser sizes by a specific device type. For example, you could search for “desktop” to see all of the browser sizes for people visiting your website from a desktop or laptop computer.

Browser Size Report in GA4

There is no built-in dimension for browser size in GA4 (as of this writing in April of 2022). However, you can add viewport or browser size as a custom dimension in GA4. Let’s walk through how to create a custom dimension for the viewport using Google Tag Manager and GA4.

Configure Custom Dimension for Browser Size

Step #1: Add variable

To start, we need to add a new variable in Google Tag Manager. We can base this on Analytical42’s Universal Analytics viewport variable.

  • In Google Tag Manager’s sidebar, click “Variables”
  • Under User-Defined Variables, click “New”
  • Call this variable “Viewport Dimensions”
  • Choose a variable type of “JavaScript Variable”
  • In the “Custom JavaScript” field, paste the JavaScript code provided by Analytical42 (see link above to that article)
Viewport Dimension variable in Google Tag Manager
Viewport Dimension variable in Google Tag Manager

Step #2: Add user property

  • Next, we want to attach this variable to our GA4 tracking code.
  • In Google Tag Manager’s sidebar, click “Tags”
  • Click your GA4 configuration tag
  • Under Tag Configuration, click to expand “User Properties”
  • Click “Add Row”
  • Enter “visitor_viewport” as the Property Name
  • For Value, add the Viewport Dimensions variable created in the prior step
Caption: Add viewport as a user property for GA4 in Google Tag Manage
Add viewport as a user property for GA4 in Google Tag Manage

Step #3: Create custom dimension in GA4

Finally, we want to create a custom dimension in GA4.

  • In GA4’s sidebar, click “Configure”
  • On the “Configure” sidebar, click “Custom definitions”
  • Click “Create custom dimensions”
  • Enter “Viewport” as the Dimension Name
  • Select “User” as the scope. Note that viewport would make more sense as a Session-level scope but that is not currently supported in GA4 (but might soon).
  • Enter “visitor_viewport” as the User Property. This should match the name of the property entered in Google Tag Manager in the second step.
Add custom dimension of “Viewport” to an Explore report in GA4
Add a new custom dimension

View Browser Size Report in GA4

After waiting at least 24 hours, you can view the custom dimension in GA4 reports. To view this in reports, you’ll need to create a custom report using GA4’s explore section.

  • In the sidebar, click on Explore and click to create a new Blank exploration.
  • Under Variables, click the “+” icon next to Dimensions to add a new Dimension.
  • Click to Custom dimensions, then click on Viewport.
Add custom dimension of “Viewport” to an Explore report in GA4
Add a custom dimension of “Viewport” to an Explore report in GA4
  • Under metrics, click the “+” and add the metric of “Total Users”. (This custom dimension is scoped to Users.)
  • Drag viewport to Rows and users to Values under Tag Settings. This should then build a table that looks like this:
Viewport or browser size by user in GA4
Viewport or browser size by user in GA4

You can customize this explore report further. For example, you can add dimensions for device category or traffic source. This could help you better understand the visitors who use different browser sizes. You can also add the conversions metric to this exploration report to see conversions by browser size, which can highlight interesting differences.

Test Viewport Sizes

After viewing the viewport data for your visitors, you’ll naturally want to know what your website looks like at those different browser sizes. You can test how your website looks at different viewport sizes by using a tool like Screenfly. A new version of Screenfly is available at https://bluetree.ai/screenfly/. In these tools, you can use the Custom Screen Size tool and enter the various widths and heights of your visitors’ browser sizes. This will resize your website to show you what your website looks like. You can look for issues, where elements are cut off, or where things may need to move a little bit to better support visitors.

Another handy tool to keep in mind is https://browsersize.com/, which shows you your current browser size and also lets you set your browser to various sizes.

Need Help?

If you have other questions about browser size, Google Analytics or GA4, please contact me.

You may also like

Using Log File Analysis To Improve Your SEO Performance

You have to understand how Google’s bots are understanding and crawling through your website. Learn what log files are and how you can start analyzing your website’s log files to improve your SEO performance.

Performing Regular Tech SEO Checks with SE Ranking

Although a Tech SEO Audit can be completed using a variety of tools, in this post, I want to walk through how we can do each of these tasks using SE Ranking’s audit tool.

Server-side Analytics vs Client-side Analytics

What are server-side and client-side analytics? Should you use server-side or client-side analytics to measure your website’s performance? In this article, we’ll review the pros and cons of both types of tracking.