* This post assumes you are familiar with Google Analytics. It also assumes you are familiar with HTML and Javascript.

Introduction

Google Analytics is super powerful and the fact it is free is amazing. If you don’t know what it is and you work in Web Development it is a must that you introduce yourself to it (or some other form of analytic strategy). Check it out at http://www.google.com/analytics/. If you are here because you want to add Browser Size (as opposed to Screen Resolution) tracking to your Google Analytics account(s) then you’ve come to the right place. Enjoy.

Step 1 – Download resizeTracker.js

First you need to download resizeTracker.js.

Step 2 – Update resizeTracker.js with your Google Analytics Tracking ID

Next you need to open the downloaded resizeTracker.js file and update it. To update it simply do a Find and Replace for “YOUR_TRACKING_ID” and replace it with your actual Google Analytics tracking id. Simple.

Step 3 – Upload resizeTracker.js and Update your HTML page(s) 

Next you need to add the following script tags just under your <title> element of your HTML page(s). Like so…

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://YOUR_WEBSITE.com/YOUR_PATH_TO_RESIZETRACKER.JS/resizeTracker.js"></script>

Line 1 is important because resizeTracker.js uses jQuery and this line ensures it is loaded in the page. Line 2 is responsible for ensuring resizeTracker.js gets loaded in the page.

* Make sure your correctly set up the src attribute on Line 2 to reflect where you’ve actually uploaded your resizeTracker.js copy. In other words make sure you replace the strings YOUR_WEBSITE and YOUR_PATH_TO_RESIZETRACKER with their respective string values.

Finally you drop the following script after your closing </body> tag of your HTML page(s). This checkInitialSize() call is what tracks the Browser Content Window size when the page first loads. Any subsequent resizes will be tracked via resizeTracker.js. Here is the script example.

<script>
	//initial check call
	$(function()
	{
		checkInitialSize();
	});
</script>

That’s it. Simple eh? In part 2 I will show you how to access the results in Google Analytics.