Track the Browser Size with Google Analytics

Published in: Google Analytics - Web Design

Google Analytics reports the “screen resolution” of the visitor’s computer but skips the other important metric which is the size of the browser window. These two numbers will be approximately similar if the browser window is kept in maximized state but not otherwise.

Take a look at the example below. The screen resolution of the desktop is 1920x1080 (this is the number recorded by Google Analytics) but the actual browser window size (where your website is displayed) is a little over 900x600 pixels.

Browser Size vs Screen Resolution Google Analytics displays the Screen Resolution and not the actual Browser Size of the visitor.

The screen resolution is a less-useful metric and what you really need to know is the actual size (or range) of the browser window of your visitors. This data can be easily gathered through Google Analytics - simply copy-paste the following code snippet just before the closing </body> tag of your website template:

<script type="text/javascript">
 var width  = window.innerWidth  || document.body.clientWidth;
 var height = window.innerHeight || document.body.clientHeight;

 width  = Math.round(width/100)*100;
 height = Math.round(height/100)*100;

 var size = width + "x" + height;
 _gaq.push(['_trackEvent', 'Browser Size', 'Range', size]);

It calculates the actual height and width of the browser window and then rounds off these numbers to the nearest 100. For instance, a browser size of 985x1190 pixels is recorded as 1000x1200 pixels. You can then access this data in Google Analytics through Content -> Events -> Overview and then choose “Browse Size” as the Events Category.

Once you know the popular “ranges,” you can update the site layout and placement accordingly so that visitors can see all the important elements on your pages Above the Fold without having to use the scroll bar.

Also see: Getting Started with Responsive Web Design

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Google Analytics - Web Design

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube