Video Tracking Using GA Event Tracking
I'm trying to setup GA Event Tracking on my site for an IFRAME Vimeo Video embed. However, I can't figure out where/how the tracking object should be placed in my IFRAME code.
Here's my IFRAME embed code:
<iframe src="http://player.vimeo.com/video/51447433" width="500"
height="281"frameborder="0" webkitAllowFullScreen
mozallowfullscreen allowFullScreen></iframe>
Here's what I think the GA Event Tracking code should look like:
<a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a>
Where does this go in my embed code? Can somebody show me how this should look/work?
Answer
You need to use the player API because you can't inject code inside an iframe on a third party domain like that.
Based on the docs provided for the player API t should look something like this.
<html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXX-1']);
_gaq.push(['_trackPageview']);
(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>
<script>
var f = document.getElementsByTagName('iframe')[0],
url = f.src.split('?')[0];
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
case 'ready':
onReady();
break;
case 'play':
onPlay();
break;
case 'finish':
onFinish();
break;
}
}
// Helper function for sending a message to the player
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f.contentWindow.postMessage(JSON.stringify(data), url);
}
function onReady() {
post('addEventListener', 'finish');
post('addEventListener', 'play');
}
function onFinish() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'finish', url]);
}
function onPlay() {
_gaq.push(['_trackEvent', 'Vimeo Video', 'play', url]);
}
</script>
</head>
<body>
<iframe src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</body>
</html>
The code above can be simplified a by using the Vimeo Mogaloop api that abstracts the Message Passing API for you, at the cost of loading the Javascript with the library.
Plugins Ready to use
Note that the above code will only work as an example and if you have multiple videos on a page it can be harder to get it right. Alternatively you can also use the GAS (I'm the main developer there) library that has a plugin for tracking Vimeo Video.
Warning about compatibility
Note the Warning about compatibility, I guess if you insert the player using the flash method you can get a wider range of browsers supported but kill the player completely for iOS devices:
With the Universal Embed Code, the only way to interact with the player is by using window.postMessage. postMessage is a relatively new development, so it’s only available in Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, and Opera 9+.