Tracking Browser Window Size with Google Analytics

published:

2009.02.02

topics:

javascript

tools

When it comes to picking a width for my web designs, what I really want to know are the common browser window dimensions for a visitor. Google Analytics tracks screen resolution, but this is increasingly meaningless with the rising popularity of super high resolution wide screen monitors. Most websites these days are 1024 pixels wide or less, thus my browser window is generally about 1000 pixels wide. Every so often I visit a website that is setup for a 1280 pixel wide screen, and even though my widescreen monitor is much higher resolution than this, it really annoys me to resize my browser window. I don't want to hassle my visitors by being the only website they visit that forces them to resize. I will show you how to track the browser window dimensions (actually, the inner window viewport dimensions) for your visitors in Google Analytics. Update: Thanks to Paul for giving me a kick in the rear to fix a bug with listening to resize events.

Perhaps the best thing about Analytics being Javascript based is that it allows web developers to track events and user interaction with their web pages in realtime using a JavaScript API. Custom reporting through this API includes:

• _trackPageview(content) — This allows web developers to log custom data in the Content reports.
• _trackEvent(category, action, optional_label, optional_value) — Google is adding this API call for event tracking. This is a Beta feature, and not all Analytics accounts have it yet.
• _setVar(value) — This allows you to set a single flag per visitor that ends up in the User Defined section of the Visitors reports.

The new BETA _trackEvent method allows us to set both custom text and numerical values for better reporting, it is more configurable, and it does not inflate your Visitors or Content reports. You might argue that the dimensions of a visitor's browser window doesn't quite sound like an event, however you could think of the visitor initially loading your page (with a certain browser window size) as an event. And, you could certainly think of the user resizing their browser window while they are on your site as an event.

With jQuery the job of finding the browser viewport size is incredibly easy, as is watching out for a window resizing event. We will want to log the browser dimensions once on page load, and again whenever the visitor resizes their browser window. Our category can be 'Browser Dimensions', and our action can be 'load' or 'resize'. We will store a string representation of the dimensions such as '1000x500' as the optional_label, and I've chosen to store the numerical viewport width as the optional_value for better reporting on width specifically.

Update: One catch here is that the resize event fires in series as the user resizes their window in some browsers. We really only want to capture the final size that the user settled with, so we need to put the tracking on a delay. I've arbitrarily chosen 500ms.

Here is what my code looks like (assumes you are already using Google Analytics):

$(document).ready(function () {
    if (typeof pageTracker != 'undefined') {
        pageTracker._trackEvent(
            'Browser Dimensions',
            'load',
            $(window).width()
                + 'x'
                + $(window).height(),
            $(window).width()
        );

        $(window).resize(function () {
            if ($(this).data('gatimer')) {
                clearTimeout($(this).data('gatimer'));
                $(this).data('gatimer', null);
            }

            $(this).data(
                'gatimer',
                setTimeout(function () {
                    pageTracker._trackEvent(
                        'Browser Dimensions',
                        'resize',
                        $(window).width()
                            + 'x'
                            + $(window).height(),
                        $(window).width()
                        );
                    },
                    500
                )
            );
        });
    }
});

Once you've included this code in your page, the browser size info will start showing up in the Event Tracking reports found in the Content section of Google Analytics. I just added the code to my site, and I've already collected some data:

I'm very happy to see that Analytics distinguishes the unique instances of a browser size. Also, with the integer optional_value field I get an automatic average browser width. And of course, simple trick, if you've got your report list sorted by browser dimensions, and you have say 50 items in your list, then item number 25 is basically your median browser size. That's always good to compare to the average.

We can go even further with Analytics using the Dimensions menu to do cross tabs of our recorded browser viewport sizes against both screen resolution and operating system. Again, Avg. Value here represents the average browser width:

This small data set begins to suggest that wide screen visitors do not have their browser windows maximized, whereas conventional 1280x1024 screen visitors do maximize their windows. We can also see that Windows users are much more likely to have wider browser windows.

Well, there you have it. I find the information very interesting, but perhaps I'll only choose to gather this data in the few months leading up to a redesign rather than all the time. In general, the idea of being able to size my browser window to the dimensions of my average visitor, so I experience my web site just as they do, is pretty fascinating. It makes me want to track height separately, too.

19 Comments…