slashnode.

Anyone who has used Google Analytics for form-based Goal Tracking has probably been pleasantly surprised by how easy it is to set up. Simply enter the URL of your “Thank You” and click save – done. It even includes the option to match only the first part of a URL, meaning no tricky regular expressions if you need to ignore query string parameters!

But what if you want to track something a little more difficult than a form submission, for example, button clicks? Or what if you have a form without a “Thank You” page (eg: most AJAX forms)? This is slightly more difficult using Goal tracking. You could do something tricky, like dynamically load an invisible IFrame – but isn’t that just a little convoluted to achieve something that should be trivial? Shouldn’t there be an easier way?… There is, and it’s called “Event Tracking”.

Event Tracking allows us to specify when we want a certain behaviour (such as form submission, button press, etc) to be logged via JavaScript. The call is made on a page with your Google Analytics code on it. You use the “pageTracker” object and the “_trackEvent” function, as described below.


_trackEvent(category, action, label, value);


Where:

• category : the name you want to use for a group of events (ie: “Contact form”)
• action : the name of the action you are tracking (ie: “Form submit”)
• label : (optional) string to provide additional information about the particular event instance
• value : (optional) an integer value for the event (default = 1)

We can use this function anywhere we can call it from JavaScript. For example, to track button presses we can use the following:


<button onclick="pageTracker._trackEvent('Button','Press');">Track event</button>


… or to track a form submit:


<form onsubmit="pageTracker._trackEvent('Details form','Form submit'); return true;">
...


… or to do something more complex, possibly even with conditional logic. For example, we could track


<script type="text/javascript">
function validateNumber (inputVar) {
if (!isNaN(inputVar)) {
pageTracker._trackEvent('Data field','data saved');
return true;
}
return false;
}
</script>


Great stuff. You’ll probably notice, however, that your tracked Events don’t appear under the “Goals” heading in Google Analytics. Instead you’ll find your Event Tracking stats under, “Content” and then “Event Tracking” (see image below). Happy tracking!

Event Tracking in Google Analytics

Stop Skewing your Google Analytics Stats

Do you have Google Analytics on your site?

You probably answered “Yes” to this question. If not, you should probably stop reading and do something about it now.

If so, you’re probably familiar with a problem that has plagued just about every project I’ve been involved with to date. So you get your website up and running and start to see traffic trickling in. One day you open up your Analytics dashboard and notice a spike. 10 unique views! Sure, it’s not incredibly substantial – but you’ve only had the website up for 2 weeks and already you’re seeing results.

You call your content writer to spread the good news. He picks up the phone and mirrors your elation:

“That’s great news! I was actually just thinking of the site – I’m was at my friend’s house yesterday showing it to them and…”

But “Wait a minute”, you think to yourself. That would count as a unique page-view, wouldn’t it? Ok, so we’ll correct and say we’ve really had NINE unique visitors… But really, how many different computers has your content writer visited the website on? Now that you mention it, what about that time yesterday when you opened the website at work during your lunch break? These are all unique browsers, with unique cookie caches, right?

That unique visitor count is getting smaller by the minute. So what’s the solution to the problem?

One way would be to set-up IP-based filtering on your Analytics account.

If you work from a static IP address this is perfect. Set up 1 rule in Analytics, hit ‘Save’ and you’re set. No more skewed Analytics statistics as a result of page-views executed from that machine. For most people, however, this is not an option.

Those using a dynamic IP address – that is, an IP address that changes each time your internet session is renewed – would have to add a new IP to the filter list every time they visit the site. Not ideal.

A much better solution is adding a ‘Cookie’ based filter. That way the Analytics script looks for a specific cookie on each machine before counting it as a page view. If the machine HAS the cookie, it isn’t counted – otherwise, it is.

So we can set the cookie in our browser and be done with it, right?… Well, not exactly. What about if we usually use Chrome, but want to check the CSS works in Internet Explorer? What if we do a system clean up which involves clearing our browsing history and temporary internet files? What if want to check on the site while at work, at the library or a friend’s house?

Another solution is to add a page on the website which automatically adds the cookie to the browser upon visiting it, and then take steps to ensure the average user doesn’t stumble upon it. This way, whenever we want to check on the site we just need to navigate to this page, let the code set the cookie and then navigate back to the site. As an added precaution we can request a password from the user prior to setting the cookie – this will REALLY ensure that a normal user won’t inadvertently set the cookie and stop their traffic being measured.

The first step in employing this strategy is to set up the filter on your Analytics account for the website. You can do this from the ‘Analytics Settings’ page by adding a new filter, selecting ‘Exclude’, ‘User Defined’, ‘Case sensitive: No’ and providing the cookie value. See Analytics Help for more details.

The next step is to create the page that will set the cookie. The key aspect of the page is that it must load the Google Analytics script, and it must include the JavaScript directive:

javascript:pageTracker._setVar('test_value');

… where ‘test_value’ is the value of the cookie. The cookie can be any text string, as long as it matches up with the value set in the Google Analytics filter above.

My password-protected version of this code, written in PHP, is supplied below (Note: no warranty, liability or support of any nature supplied for this code.).

<?php
$gaCode = "";
$cookie = "";
$password = "somepassword";
?>
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<?php if (!isset($_POST["p"])) { ?>
<body>
<form method="POST" action="">
<input type="password" name="p" /><br/>
<input type="submit" value=">" /><br/>
</form>
</body>
<?php } else if ($_POST["p"]==$password) { ?>
<body onload="javascript:pageTracker._setVar('<?php echo $cookie; ?>');">

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("<?php echo $gaCode; ?>");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
<?php } ?>
</html>