Google Analytics Viewport or Browser Size

– [Matthew Edgar] In this video, we’re going to look at the size of a visitor’s browser. This is also referred to as the viewport. Now, in a previous video we
discussed screen resolution and screen resolution is a
way of looking at the size of the screen visitors use, not their browser. You can click the link to
the right of the screen or in the description
below to view that video. So I think the first question
we need to figure out here is what’s the difference between viewport and screen resolution? Say this box represents
the screen resolution. This is the entire amount
of width and height that a visitor has
available on their screen. However, part of that
screen includes things like the start bar and within the
browser there’s also things like an address bar or other tool bars which fill up some of the space. There’s also the scroll
bar over to the side and that takes up even more space so after all of that, you’re left with a much
smaller part of your screen that visitors can use
to load your website. And of course, people
can resize their browser which makes the viewport or
browser size even smaller. So the screen resolution is a
measure of the entire screen and the viewport is a measure
of how much of that screen is available for loading your website. But together, these two
metrics can help you understand your visitors and how you
should design your website. In particular, knowing
these two things 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. Let’s hop over to Google
Analytics and talk about where exactly you find this report. Once in Google Analytics, go to the left sidebar, click on Audience, Mobile, and Overview. This will load a report telling you all the devices people use. To find viewport size, we want to add a secondary
dimension of browser size. This report will tell
us all the browser sizes for each different device type. You can scroll through and look at all the different sizes people use. Within 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 device. Now one thing you may want to do is look at browser sizes
for certain device types. Say you want to see all
of the browser sizes for people visiting your
website from a desktop or laptop computer. For that, we can search
for the word desktop. Once we search for that, we can see all the
browser sizes people used from a desktop or laptop computer. Similar to screen resolutions, the question becomes, “what does the browser
size actually mean”? “What does it look like?” And like with screen resolution, we can use a tool called Screenfly to picture our site at that size. There’s a link to Screenfly
down in the description. Now one of our top browser
sizes in Google Analytics was 1370 x 660. We can go up to the
Custom Screen Size tool and enter those dimensions in. This then lets us see what
our website looks like for people who are visiting at 1370 wide and 660 tall and from here,
we can start to ask ourselves questions about what kind of
changes we might want to make or what kind of problems exist. So in this example, things like the Signup
box are getting cutoff so maybe we need to bring
that up a little bit more to really support people
who are visiting our website at this size. If you have other questions
about Google Analytics or other aspects of measuring
your website’s performance, please contact us or visit


Leave a Reply

Your email address will not be published. Required fields are marked *