Wordpress plugin: Measuring browser viewport size
Previously I’ve written about the importance of browser viewport size, and also explained how you can measure the browser viewport of your visitors and store the result in Google Analytics as events.
Given the 25 million sites out there running WordPress, I decided to invest a bit of time into creating a WordPress plugin to track viewport size. It uses exactly the same technique as described in my earlier post but conveniently wrapped up as an easy to install WordPress plugin.
Download the plugin
You can download the Measure Viewport Size plugin from the WordPress plugin directory. Or you can install it directly from your WordPress site by searching for “Measure Viewport Size” from the “add plugin” page.
There are a few prerequisites; you will need to have Google Analytics installed on your site (the asynchronous “_gaq” version). I’ve tested the plugin with Google Analytics for WordPress and it works fine. You will also need to make sure that your theme supports the body_class trigger. The body tag in header.php wthin your active theme should look something like the following:
<body <?php body_class(); ?>>
How does it work?
The plugin uses a javascript function to obtain the width and height of the viewport of the browser window your website visitor is using to view your site. It then sends three “events” to your Google Analytics account. One for the width, one for the height, and one with a text label containing the full dimensions.
You can then view the events that have been recorded as people visit your site in Google Analytics under Content -> Event Tracking. It can take a day or so for the events to be processed and to appear in your GA reports, so be patient!
Why bother?
Monitoring and analysing the browser viewport size is a crucial part of designing and maintaining a successful website.
50 pixels fewer in available height for content could be the difference between your call to action being visible or disappearing below the fold. That could have a noticeable impact on your conversions and goals.
The browser viewport is the window in to your world. Your visitor sees everything through it. So why drive blind when you can quite easily gather and analyse a bit of data?