There’s an ongoing debate in the responsive web design community — do users resize their browser windows or not? During our Build Responsively Workshop in Columbus, Ben mentioned that he would love to have a way to track browser resize events. It seemed simple enough, so I put together this gist as a quick proof of concept:
(function() {
var resizeTimer;
// Assuming we have jQuery present
$( window ).on( "resize", function() {
// Use resizeTimer to throttle the resize handler
clearTimeout( resizeTimer );
resizeTimer = setTimeout(function() {
/* Send the event to Google Analytics
*
* https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiEventTracking
* _trackEvent(category, action, opt_label, opt_value, opt_noninteraction)
*/
var $window = $( window );
_gaq.push( [ "_trackEvent", "User Actions", "Browser Resize", $window.width() + " x " + $window.height() ] );
}, 1000);
});
})();
This creates a handler for the browser resize event in order to fire a Google Analytics call with the browser dimensions. This solution waits for a 1 second pause before making the call to avoid a problem where some browsers would continuously fire the resize event.
Drop this code into your JavaScript, check out “events” within the “content” tab of Google Analytics, and you can see for yourself how many people are resizing your site.
Also, don’t miss Andy’s article on Google Analytics and the Retina Display.
