Direct Performance - Inteligência Otimizando Resultados

How to track embedded YouTube videos with Google Analytics

If you have posted videos on YouTube already you know that it is possible to analyze statistics and metrics of your video masterpiece through YouTube Insights. For those not familiar is a spectacular feature of YouTube that provides source data, demographic data and viewing-time data of your videos.

However, if you like to embed videos on your page or blog, you should have passed the frustration of not knowing how your video is viewed by your visitors, or at least how many people get through to the end of the video.

But in Google Analytics you can’t measure it?

Well, by default it’s a hard work, because a embedded YouTube video is a flash player which can not be edited. But we love challenges, whatever they are and we don’t give up!

Javascript is the most widely used language on web sites and web apps. Unfortunately it’s been always hard to debug, since Javascript must work in all browsers and OSs out there. Every browser has it’s own Javascript engine and they don’t always behave the same (yes IE I’m looking at you). Even if you test and debug your code in all major browser you never know if the user is using something different or a nasty mobile browser.

Currently the most interesting options are unity test using tools like FireUnity. John Resig (a well known Javascript ninja) has been working in a interesting project called TestSwarm. Each has it’s own advantages but I propose a different track.

Even with the test tools above you never knows what happens when your code is free in the wild. Someone can update the code and forget to run a few tests. When you see it your shopping cart may be broken for 2 weeks. And those users are not getting any more happy.

You can use Google Analytics to log Javascript errors when they happen for your users. Once you identified the error you can hurry and fix it. Of course you could log those errors anywhere else, the advantage of using Google Analytics is that it already provide you with browser and OS metrics that you can combine with javascript errors, this information will prove useful when you’re trying to squash that bug.

Clicking in the error you can drilldown to exactly the error message that was attached to that exception.

Clicking again you’ll have a report showing the pages where that error was triggered.

You can go further and measure impact on conversions and user engagement caused by those Javascript errors, and plan witch bug you’re gonna squash first. As time goes you’ll see how valuable it is to have this info integrated with you Analytics tools.

It’s easy to implement this error tracking. All you have to do is add the function track_error_event() to your tracking snippet and then call it when a Javascript Exception raises.
eg:

<!-- GA Code Start -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(
	['_setAccount','UA-XXXXX-X'],
	['_trackPageview']
);
function track_error_event (exception) {
	_gaq.push(['_trackEvent',
		'Exception ' + (exception.name || 'Error'), //event category
		exception.message || exception, //event action
		document.location.href //event label
	]);
}
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<!-- GA Code End -->

<script type="text/javascript">
try{
	//Javascript Code goes here
	//Raises Division by zero exception
	var i = 1/0;
}
catch(e){
	track_error_event(e);
}
</script>