View Demo » Download Demo ↓

Ever wonder how many of users watched an embedded YouTube video all the way through? How about how many simply pause the video halfway through out of boredom? This is all possible thanks to YouTube's Javascript API (JSAPI).

The Setup

First and foremost in order to do JavaScript callbacks from the video a few parameters need to be added to the embed code. Specifically enablejsapi=1. Also there's another parameter which will need to match the ID of the OBJECT element playerapiid=video1.

<object data="http://www.youtube.com/v/L4H8vvGVoS0&enablejsapi=1&playerapiid=L4H8vvGVoS0" id="L4H8vvGVoS0" type="application/x-shockwave-flash" height="344" width="425"> <param value="http://www.youtube.com/v/L4H8vvGVoS0&enablejsapi=1&playerapiid=L4H8vvGVoS0" name="movie"></param> <param value="always" name="allowscriptaccess"></param> </object>

One thing to note: In order to get Internet Explorer to play nice, the default YouTube embed code didn't work for me. I needed to modify it to the above to successfully track my video in ALL browsers. I suspect this is related to Non-IE browsers using the EMBED element and IE using OBJECT. My above example uses OBJECT without any extra elements needed. For more on this see my article titled Embedding Flash Without Click To Activate Using Valid HTML

Pseudo Code

Since the Javascript required to accomplish this is about 60 lines long, I'll only explain a top level view of the code. When an action occurs on the YouTube video it will call the onYouTubePlayerReady function along with the ID of the OBJECT element. The details of each video are then stored in an anonymous function (correct me if I've got the wrong terminology on this) using youTubePlayerLoggers[id].

//Global variables //Function that is called automatically by the embedding videos function onYouTubePlayerReady(id) { //Define video level variables //Setup video state constants //Store information specific to each video youTubePlayerLoggers[id] = function(state) { //Check video state, log action }; //Bind events to video }

View Demo » Download Demo ↓

Viewing The Data In Google Analytics

Below are the reports that will be generated in Google Analytics. The data can be accessed in the Event Tracking report which is found under the Content category.

Categories Report Actions Report

Further Reading