This website uses cookies to enhance your browsing experience. By continuing to use this website, you agree to our use of cookies. Click here to learn more, including how you can manage your cookie preferences.


Google Analytics: One KDP API for HTML5 and Flash

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:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

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

<script src="" type="text/javascript">

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

function jsCallbackReady( playerId ){
    new kGoogleAnalytics({
        // List of kaltura events to track
        // Full list of notifications available here:
        // For default list of events do not set this property
        'eventTrackList' : null,
        // The player object to add bindings too:
        'playerElement' : document.getElementById(playerId),
        // pageTracker object ( if set to null async tracking is used via _gaq.push calls )
        'googlePageTracker': null,
        // An optional event callback to be used to monitor what events are being sent to google via _trackEvent calls
        'trackEventMonitor' : null

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:

addPlayerBindings: function(){
     var _this = this;
     for(var i = 0 ; i < this.eventTrackList.length; i++){
         var eventName = this.eventTrackList[i];
         var globalCBName = 'kga_' + eventName +;
         // Add a global callback: ( add a closer context so the for loop context does not override.
         (function( eventName,  globalCBName ) {
             window[ globalCBName ] = function( data ) {
                 _this.playerEvent( eventName, data);
             // add the event to the player ( assuming the jsListener is ready:
             _this.waitForAddJsListener( function(){
                    _this.playerElement.addJsListener( _this.getEventNameBinding( eventName ), globalCBName);
          })(eventName, globalCBName );

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.

playerEvent: function( methodName, data ){
    var trackingArgs = this.getTrackingEvent( methodName, data );
    // Don't track false events:
    if( !trackingArgs )
         return ;
    // Send the google event:
    if( this.googlePageTracker ){
       this.googlePageTracker._trackEvent.apply( trackingArgs );
    } else {
       var gaqAry = trackingArgs.slice(0);
       gaqAry.unshift( "_trackEvent" );
       window._gaq.push( gaqAry );
    // Send the event to the monitor ( if set in the initial options )
    if( typeof this.trackEventMonitor == 'function'){
       this.trackEventMonitor.apply( this, trackingArgs );

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:

getQuartilesStatus: function( currentTime ) {
	var entryDuration = this.playerElement.evaluate('{mediaProxy.entry.duration}');
	// Set the seek and time percent:
	var percent = currentTime / entryDuration ;
 	// Send updates based on percentage complete
	if( !_this._p25Once && percent >= .25 )
		_this._p25Once = true;
		return '25';

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.


Let's Get Going