Friday, 11 November 2016 16:41

Tracking Kaltura Videos with Google Tag Manager

Written by
Rate this item
(3 votes)

This blog outlines an approach to tracking Kaltura videos and audio with Google Tag Manager.  Before we dive in credit where it is due, I borrowed heavily from Nicky Yuen's post on YouTube tracking (sorry the link is no longer available), which in turn was initially developed by Stéphane Hamel thanks to both for a great starting point.  Kaltura has a very nice API that's vastly simplified the tracking.  With events for each quartile of progress tracking 25%, 50%, 75% and 100% as well as 'play', 'pause' and 'complete' came together quickly.  (The 90% mark was not readily available in the Kaltura API so is not included - it is in the Cardinal Path version.) To follow the template used for the YouTube tracking before, we will create a trigger for when a page contains a Kaltura video (or audio) - this will load the Kaltura tracking JavaScript.  This JavaScript will in turn create a custom event for each tracking event - using a trigger, three dataLayer variables and a Google Analytics Event tag the tracking will be complete! First let's create the following dataLayer variables: dataLayer category, dataLayer action, and dataLayer label. google tag manager kaltura dataLayer Action Variable google tag manager kaltura dataLayer labelgoogle tag manager Kaltura dataLayer Category

Next we need a trigger for when a Kaltura video is on the page - this trigger uses a variable to test if Kaltura is present on the page.  The Variable looks like this:

GoogleTagManager Kaltura Is Present JSVariable 1024x494

The JavaScript is here:

function() {
  if ( typeof kWidget === 'undefined' || kWidget === null ) {
    return false;
  } else {
    return true;
  }
}

This test relies on the presence of the kWidget object - this is the Kaltura object that contains the API so must be present for this tracking to work. The trigger then looks like this:

google tag manager kaltura is present trigger

And then we load in the Kaltura Code in a JavaScript tag loaded when Kaltura video is present: Here is the Code:

<script>
  kWidget.addReadyCallback(function(playerId){
      var kdp=document.getElementById(playerId);
      console.log('Entry name: '+ kdp.evaluate('{mediaProxy.entry.name}') );
      kdp.kBind("firstPlay.fp",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
   eventAction: 'play',
           eventLabel: document.baseURI
        });
kdp.kUnbind('.fp');
});
      kdp.kBind("firstQuartile.1q",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
           eventAction: '25%',
          eventLabel: document.baseURI
        });
kdp.kUnbind('.1q');
});
      kdp.kBind("secondQuartile.2q",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
   eventAction: '50%',
           eventLabel: document.baseURI
        });
kdp.kUnbind('.2q');
});
      kdp.kBind("thirdQuartile.3q",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
   eventAction: '75%',
           eventLabel: document.baseURI
        });
kdp.kUnbind('.3q');
});
      kdp.kBind("playerPlayEnd.pe",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
   eventAction: 'complete',
           eventLabel: document.baseURI
        });
kdp.kUnbind('.pe');
});
      kdp.kBind("playerPaused.pp",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
   eventAction: 'pause',
           eventLabel: document.baseURI
        });
kdp.kUnbind('.pp');
      });
    });
</script>

The code has a few parts - these first few lines:

  kWidget.addReadyCallback(function(playerId){
      var kdp=document.getElementById(playerId);

Setup our function on callback from the kWidget object.  We then create the kdp object from our Player ID.  The remainder of the code binds events to the corresponding kWidget API events - to learn more about the Kaltura Player API.  Here is the first bind function for the play event (the rest work the same way):

      kdp.kBind(""firstPlay.fp"",function(){ 
        dataLayer.push({
           event: 'video',
           eventCategory: 'video',
		   eventAction: 'play',
           eventLabel: document.baseURI
        });
		kdp.kUnbind('.fp');
	});

This code binds a function to the Kaltura 'firstPlay' event - we also give it an internal name .fp so we can unbind it when the function is complete.  The function performs the dataLayer push for the current event with a custom event of 'video', a category of 'video', - so in this example we push the 'play' action - and finally a label of the baseURI. If you would prefer to use the Kaltura media entry name instead of the baseURI you can use this code instead:

eventLabel: kdp.evaluate('{mediaProxy.entry.name}')

OK - so now we are generating our custom events and dataLayer entries - to complete this tracking we will add a Tag that fires off on the 'video' custom event - it looks like this: And our trigger looks like this: Yes - it has 'video' and 'audio' - we use a different player for podcasts (stay tuned for a Media Element post...) And now that this is working!  See the video below showing how to look at the resulting data in the Google Analytics Event reports.

Hope this helps with your video tracking - please reply with any comments and better yet improvements to this code

Read 7203 times Last modified on Tuesday, 05 May 2020 14:12
Jay Murphy

Jay Murphy is a digital analytics expert and founder of Trionia, where he specializes in transforming data into actionable insights for large and mid-sized businesses. With over thirty years of experience and a passion for Google Analytics since its inception, Jay has honed his skills to bridge the gap between technical data analysis and strategic business planning. An educator at heart, he has developed and taught comprehensive digital marketing courses at both the undergraduate level and within organizations, enriching minds with his deep understanding of the digital analytics landscape.

His career, which began in systems analysis for spacecraft guidance, has evolved through roles that blend technical acumen with strategic vision across various sectors, including Fortune 500, Higher Education and Non-Profits. Certified in Google Analytics since 2011, Jay's leadership at Trionia has spearheaded successful online campaigns and innovative marketing strategies, underlining his commitment to leveraging data for growth. Jay's approach goes beyond the numbers; he's a storyteller who uses data to drive business success, making him a pivotal figure in the digital marketing world.

Media

 
Video Events - visualized with the Google Analytics Pivot Table

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.