View Viewport or Browser Size in GA4

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 a custom variable in Google Tag Manager

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 must 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”. (You could select Views or Sessions instead.)
• 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.

Getting (not set) instead of dimensions: Addressing Cardinality

The method discussed above may not work for all websites. If you have a lot of visitors, you may see (not set) appear in the reports instead of the viewport size. This happens because GA4 limits how many values can be assigned to a dimension. According to Google’s support documentation, “high-cardinality dimensions are dimensions with more than 500 unique values in one day”.

The solution is to bucket viewport sizes instead of sending the exact viewport size. That way, instead of hundreds of values, we are only sending a small number of values. It is still useful to understand how visitors use your website. With the width information, you can understand where to place breakpoints and with the height information, you can determine where the first scroll is for your visitors.

For example, we can bucket our viewport sizes as small, medium, large, and extra large. This would store values like “Large (1025px-1440px) / Tall (901px-1080px)”. With this configuration, there would be a total of 16 possible values for the viewport dimension (Small, Medium, Large, X-Large for Width and Small, Medium, Large, X-Large for Height).

To configure this, you will follow all the same steps above except for the JavaScript code used for the Google Tag Manager variable in the first step. Use this JavaScript code instead to define the variable:

function getViewportSize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    var widthCategory;
    if (width <= 480) {
        widthCategory = "Small (≤480px)";
    } else if (width <= 1024) {
        widthCategory = "Medium (481px-1024px)";
    } else if (width <= 1440) {
        widthCategory = "Large (1025px-1440px)";
    } else {
        widthCategory = "X-Large (≥1441px)";
    }
    var heightCategory;
    if (height <= 700) {
        heightCategory = "Short (≤700px)";
    } else if (height <= 900) {
        heightCategory = "Medium (701px-900px)";
    } else if (height <= 1080) {
        heightCategory = "Tall (901px-1080px)";
    } else {
        heightCategory = "X-Tall (>1080px)";
    }
    return widthCategory + " / " + heightCategory;
}

You can create a custom exploration following the same steps outlined above. However, instead of seeing individual viewport sizes, you will see the total views for each of the size categories that are tracked.

Test Viewport Sizes: Chrome DevTools

After viewing the viewport data for your visitors, you’ll naturally want to know what your website looks like at those different browser sizes. The easiest way to do this is with Chrome DevTools.

1. Start by loading a page as normal. Once loaded, either right click and select “Inspect” from the menu. Or, press F12.
2. Once DevTools is opened, hit Crtl + Shift + M. This will resize the screen to a mobile view.
3. Above the mobile view, you will see a dropdown arrow. Click this and change to “Responsive” instead of one of the preset options.
4. After choosing Responsive, you can define a new width and height that corresponds to the dimensions you see in the GA4 report.

Need Help?

Do you need help configuring this report? Or do you need help configuring other reports in GA4? I can help! Please contact me and let me know what questions you have.