Google Analytics: One KDP API for HTML5 and Flash

by Michael Dale

A neat feature of developing for the Kaltura platform is being able to write code once and have it work regardless of the underling playback system. In this post I walk you through writing a simple google analytics library using the KDP api. I will show how it works for both html5 and kaltura flash kdp players. If your want to just jump into the code you can check out the kaltura google analytics demo page here. If you would like to download this example its available here

To write this plugin we will touch on:

  • Google analytics is of course the popular web site tracking system. It includes a system for tracking custom events, which we will use to register player events.
  • Kaltura KDP player is the dynamic flash player that has an extensive api for accessing events and notifications in javascript.
  • Kaltura HTML5 player library is an html5 player used in the kaltura platform. In addition to supporting the HTML5 api, the library also supports a good portion of the KDP api.

To start we copy the google analytics setup code:

Then we will want to include the kaltura html5 library loader. To include that we simply add the following:

Then on our client page we wait for the kdp player to be ready via the jsCallbackReady call, then instantiate the kGoogleAnalytics object:

Lets take a look at how the kGoogleAnalytics works. kGoogleAnalytics take a list of eventTrackList and validates that list against the full set of notifications supported by the kdp api. Then it binds the events to the kdp player ( which can be an html5 player or flash player underneath ) like so:

Note: Because the flash player listners call in the global namespace, we do some minor tricks to generate a global function name that can be used with the flash listener. If your library was dependent on jQuery you could avoid the local anonymous function closure call with an outer $.each( loop on the the eventTrackList ).

Once the listeners have been added to the player we will receive all the player notifications in the playerEvent method.

Here we generate a tracking event array and send it off to the google pageTracker. Google has started supporting two modes of sending events, via the pageTracker object or via appending to the global _gaq array. Here we support both. We also provide a convince function to monitor google analytic events we are sending.

One last custom event is the quartiles event, here we send beckons for every 1/4th of the video. This is helpful for analyzing fall-off rates and what percentage of the video has been viewed. Here we make use of playerUpdatePlayhead listener event and the ‘evaluate’ function of the kaltura api to get the clip duration. Here you can see how we get at the duration in the getQuartilesStatus function:

Pulling it all together we have the following page, that sends the same google analytic events regardless of if the player is in ‘flash’ or html5 mode.

 

Tags:

7 Responses to “Google Analytics: One KDP API for HTML5 and Flash”

  1. Hi! I really like this solution, however I can’t get it to work. First of all, the demo page seems to have been removed. Also, when running the downloadable example on my local computer, no events are being listed. When trying to implement this feature on my own project, jsCallbackReady are only called from the Flash-version of the player, and not when running in html5-mode. Any ideas?

  2. Thanks for this Post
    What do I get with these analytics? Does this show bandwidth usage and partner activity usage too? I just want bandwidth usage and partner activity usage report? Will it work? By default I am unable to get bandwidth_usage reports in kaltura’s analytics tab. Please tell
    Thanks in advance
    Cheers

  3. Hello
    I checked the source of the demo example, there is no
    Is the library loader replaced by the mwEmbedLoader.php now or I’m misunderstanding something?

  4. Trackbacks

Leave a Reply