Google Analytics Viewport or Browser Size

By Matthew Edgar · 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)

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

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.

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.

• 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:

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.