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:
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
0 Comments: