View Screen Resolution Report in GA4

By Matthew Edgar · Last Updated: May 13, 2022

Screen resolution data in Google Analytics (GA4) can be really helpful to review as you decide how to design your website, or if you’re trying to decide where to place key elements on a page. Reviewing screen resolution reports can also help you improve engagement and conversion rates. Screen resolution data helps you decide where to place elements on a page so that you make sure visitors can see whatever it is they’re supposed to see when they visit your website.

Screen Resolution Report in GA4

There is a built-in report for Screen Resolutions in the new version of Google Analytics (GA4). To access this report:

• Click on Reports
• In the Reports sidebar, expand Tech
• Under Tech, click on “Tech Overview”
• On the Tech Overview report, you will see a bar chart of users by screen resolution

From the overview report, you can click “View Screen Resolutions” to be taken to a detailed table. Similar to Universal Analytics, this table will show you total users, engagement, and (if configured) conversions by screen resolution.

One helpful way of viewing screen resolution data is by device. In GA4, this can be done using the comparison tool.

• Click the “Add Comparison +” button above the graph. This will show the “Build Comparison” tool.
• Under Build Comparison, include the Dimension of Device Category. Set the dimension value to the device you wish to view (for example, mobile).
• Click Apply.
• On the “Edit Comparison” screen, you can remove the “All Users” comparison to simplify the report.

Once you’ve added the comparison, this will reload the screen resolution report viewing only the devices selected in the comparison. In the example screenshot below, this is showing screen resolutions for mobile devices.

Test Screen Resolution

After finding the most common screen resolutions, you want to test how your website looks at these different sizes. What do people see on your site when viewing at a particular screen resolution? What are they missing? What’s getting cut off? Most importantly, what changes do you need to make to your website given how things appear?

One of the better tools to test screen resolution sizes is Screenfly, as shown in this video embedded above. There is also a new version of this tool available at https://bluetree.ai/screenfly/.

Either in the new or old version of Screenfly, we can select “custom screen size” and enter in a particular screen resolution we wish to test. For example, if one of the top screen resolutions is 1366 by 768, we can enter that custom size, and then the tool will adjust to show us the page as seen by a visitor using that screen resolution. With this, we can device what changes to make the experience of our website better at that screen resolution.

If you want to know what your screen resolution is, you can use WhatIsMyScreenResolution.

Final Thoughts

Remember that screen resolution is related to browser size. Be sure to watch my video on browser size too to understand how these two pieces of information work together.

If you have other questions about GA4 or other aspects of bettering your website’s performance, please contact me.