Skip to content

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;
}

Viewport function in Custom JavaScript 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 visitor_viewport. Then click “Import”.
Add the custom dimension of visitor_viewport to the Exploration.
  • 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:
GA4 Exploration Settings column for viewport by users report.
  • 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.
GA4 Exploration filter to remove not set viewports.
  • The end result should then build a table that looks like this:
Example GA4 exploration for custom viewport dimension

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.

You may also like

Best Chrome Extensions to Help Improve Technical SEO Tasks

What are the best Google Chrome extensions to make your technical SEO work easier? In this post, Matthew reviews the 10 most helpful Chrome extensions.

Measuring Speed: WebPageTest

WebPageTest offers many different features and is one of the most helpful tools for measuring website speed. This guide walks through some of the most helpful reports to use.

Measure Speed in GA4

How do you measure speed in GA4? In this article, learn how to setup custom events to monitor Core Web Vitals and other important speed metrics.