View Viewport or Browser Size in GA4

By Matthew Edgar · Last Updated: October 02, 2023

Viewport or Browser Size Report

To optimize conversions and engagement on your website, it is important to understand what browser size visitors use.

Browser size, or viewport size, is closely related to 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. On mobile devices, the system bar consumes some space. 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.

In short, 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 decide how to position elements to make sure everybody can see everything that they’re supposed to see on your website. As well, viewport size is important when evaluating Largest Contentful Paint, which measures the speed of the largest item in the viewport.

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

Measure Viewport Size in GA4

There is no built-in dimension for browser size in GA4 (as of this writing in October 2023). However, you can add viewport size as a custom dimension in GA4.

Configure Custom Dimension for Browser Size

Step #1: Add custom variable

To start, we need to add a new variable in Google Tag Manager.

• 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 following JavaScript code

function getViewportSize() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
return width + 'x' + height;
}

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 visitor_viewport. Then click “Import”.

• 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 the Settings column. The Settings column should look like this:

• At the bottom of the Setting column, add a new filter to remove any viewports that contain “(not set)”. This will keep the data cleaner.

• The end result 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 viewport size or GA4, please contact me.