Back to resources

Custom Event Tracking in Google Analytics (Video)

 

Getting the custom data you need to make actionable decisions about your website can be cumbersome if you don't know where to start. Mike Angstadt makes it easier in this video about custom event tracking in Google Analytics.

 

 

Video Transcription

 

Mike Angstadt here, from Clarity Ventures, and I'm here today to talk to you about custom event tracking and Google Analytics. I'm going to briefly talk about why it's important, how you can do this, and then go over some specific examples that hopefully you can tailor-fit for your individual scenarios.

So why? Every tool has its limit. Whether you're using just Google Analytics out of the box, Clicktale, Mouseflow, there's always going to be gaps in that data that you run into one of [wanna-be] nice scenarios, where there's really information about the users and visitors to your website that you're just not getting that you really wish you could. And really, when it comes to Google Analytics, it's about taking that visitor data that they collect and marrying it with specific URLs they hit, which is great, but you don't get a lot of information about what happens in between. A really great example of this is PDF downloads. There's no real great way, because they don't run Javascript, for that to report to traditional Google Analytics without custom event tracking.

So, how are we going to do this? It's very simple. There's about a line of Javascript you have to add and you push Google Analytics, Track Event, and pass it three variables. Those essentially become your three drill-down levels when you get into your Google Analytics dashboard. And this is really great because things like the keyboard and mouse are monsters at creating data and don't really get captured in Google Analytics. So you can use Javascript events, your friend JQuery and capture things like hover- overs, clicks, mouse down, mouse move, all sorts of awesome interactive stuff that your users are doing on your website that you really don't get that much visibility into.

As a specific example of this, partially filled out forms. You could hook up events so that every time somebody clicks out of a text box, you automatically capture that value, that information. And even if they don't submit the form, you can go back through custom events and maybe get some useful information to be able to follow up on that lead. Another good example, if things aren't clickable, but people click on them, there's no way to capture that information in traditional Google Analytics. You can easily hook up custom events to be able to capture that and have that steer your design enhancements and UX changes for following rounds of improving your website.

All this is great and custom events are very flexible. You essentially just pass it three strings, like I said, that end up becoming your three rounds of drilled down when you get to your dashboard. But you need to stay organized. Take a step back and don't think about one specific experiment or hypothesis you have, but think about your entire site and how you can organize the custom tracking so that it really gives you useful information that you can use to steer your business decisions.

Another great point to this is that Google, when it talks about bounce rate, people think page views, but it also counts as an event happening. So, if you track an event, even if someone doesn't visit another page, it doesn't count as a bounce, which means you're automatically going to decrease your bounce rate and improve your statistics when it comes to ranking signals.

Well, that's all I have for today. If you have any questions, please follow up with us. And, again, look at the examples below and let us know if you need any help. Thanks.

Code Snippets & Examples

 

Get Started with Tracking File Downloads

To track any file downloads where you're not embedding your GA tracking snippet - just add this small piece of javascript to your links onclick event:

<a onclick="_gaq.push(['_trackEvent','Download','PDF',this.href]);" target="”_blank”" href="/my-awesome.pdf" >Download Awesomeness</a>

You can gather a bit more data by including the specific page instead of 'PDF' if that is redundant for you application.

 

Treating Incomplete Forms Like Abandoned Shopping Carts

The mouse and keyboard are data producing MONSTERS that Google Analytics pretty much ignores:

Onkeydown, Onkeyup,Onkeypress, OnBlur, OnFocus, OnHover, OnMouseMove - these are all great events to track!

This snippet with the help of our friend jquery & a helper library to obtain IP address will track user's IP address coupled with any text-based form field in a form with ID “contactForm” in which a user provides a value – even if they never submit!


<script>
<script type="application/javascript" src="http://jsonip.appspot.com/?callback=setEventHooks"></script>
var user_ip;
function setEventHooks(json){ 
	user_ip = json.ip; 
$(“#contactForm input[type=text], #contactForm textarea”).blur(function(){
	var label = $("label[for='"+$(this).attr('id')+"']").val();
	_ gaq.push(['_trackEvent','contact Form',user_ip,label + “:” + $(this).val()]);
});
}</script>

So really the basic setup here is replace first-tier, second-tier, third-tier with whatever you'd like to have as three drill-down levels in your Google Analytics dashboard.

_gaq.push(['_trackEvent',first-tier,second-tier,third-tier]);

You could wrap this up in timers, conditions, inspect user agent, render server-side variables, ALL SORTS of data goodness to literally track ANYTHING up to three drill down levels

 

Track if A Mobile User Tries to Drag Something

- here’s a snippet capture any layout containers a mobile user tries to drag


<script>
Var mouseX = 0;
Var mouseY = 0;
Var dragElement;

Var user_ip;
function setEventHooks(json){ 
user_ip = json.ip; 
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
 	$(document).mousedown(function(event){
		mouseX = event.pageX;
		mouseY = event.pageY;
		dragElement = document.elementFromPoint(mouseX, mouseY);
	});
	$(document).mouseup(function(event){
		If(Math.abs(mouseX – event.pageX > 10) || Math.abs(mouseY – event.pageY > 10)

Find out more

Click here to review options to gather more info.
From resource guides to complimentary expert review... we're here to help!

image description