Geek Answers Handbook

Video Tracking with GA Event Tracking

I'm trying to set up Google event tracking on my site to embed IFRAME Vimeo Video. However, I cannot figure out where / how the tracking object should be placed in my IFRAME code.

Here is my IFRAME embed code:

 <iframe src="http://player.vimeo.com/video/51447433" width="500" height="281"frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

Here is what I think Google event tracking should look like this:

 <a href="#" onClick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Title']);">Play</a>

Where does this happen in my embed code? Can someone show me how this should look / work?

+6
source share
2 answers

You need to use the player's API because you cannot enter code inside an iframe in a third-party domain.

According to the docs provided for the playerโ€™s API, t should look something like this.

Working example

 <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 above code can be simplified a using the Vimeo Mogaloop api, which abstracts the message passing API for you by loading Javascript into the library.

Plugins Ready to Use

Please note that the code above will only work as an example, and if you have several videos on a page, it can be more difficult to do it right. Alternatively, you can also use GAS (Iโ€™m the main developer there), which has a plug-in for tracking Vimeo Video .

Compatibility warning

Pay attention to the compatibility warning, I think if you insert the player using the flash method, you can get a wider range of supported browsers, but completely destroy the player for iOS devices:

When using the Universal Embed Code, the only way to interact with the player is using window.postMessage. postMessage is relatively new so it is only available in Internet Explorer 8+, Firefox 3+, Safari 4+, Chrome, and Opera 9+.

+6
source

Google Analytics on Steroids has a Vimeo tracking feature. Worth checking out

+1
source

More articles:


All Articles