- TLC Home Home
- Discussions & Ideas Discussions & Ideas
- Product Guides Product Guides
- Knowledge Base Knowledge Base
- Developer Docs Developer Docs
- Education Education
- Blog TLC Blog
- Support Desk Support Desk
This article shows how to set up video tracking in Tealium iQ for Vzaar videos.
In this article:
There are currently two ways of implementing the Vzaar Video Player:
<iframe allowFullScreen allowTransparency="true" class="vzaar-video-player" frameborder="0" height="240" id="vzvd-1556961" mozallowfullscreen name="vzvd-1556961" src="http://view.vzaar.com/1556961/player?apiOn=true" title="vzaar video player" type="text/html" webkitAllowFullScreen width="448"></iframe>
<div id='video-container'> <div class='vzaar_media_player'> <object data='http://view.vzaar.com/1080935/flashplayer' height='324' id='video' type='application/x-shockwave-flash' width='576'> <param name='allowFullScreen' value='true' /> <param name='allowScriptAccess' value='always' /> <param name='wmode' value='transparent' /> <param name='movie' value='http://view.vzaar.com/1080935/flashplayer' /> <param name='flashvars' value='apiOn=true&colourSet=grey&colourBg=#ffffff&border=none&socialSharing=0,0,0' /> <video controls='' height='324' id='vzvid' onclick='this.play();' poster='http://view.vzaar.com/1080935/image' preload='none' src='http://view.vzaar.com/1080935/video' width='576'></video> </object> </div> <div id='vid-info' style="font-family: Courier, monospace; font-size: 13px;"> <a href='#' id='addBookmark'>Add Bookmark</a> <a href='#' id='resetBookmark'>Reset Bookmark</a> </div> </div>
Both methods require the JavaScript API to be loaded. This is the script for the client.js file from Vzaar:
<script src="http://player.vzaar.net/libs/flashtakt/client.js" type="text/javascript"></script>
The Vzaar client.js content needs to load before the event listener code (below) is added to Tealium iQ. The best practice method for loading this file would be to have the script load directly on the page before the utag.js file. Otherwise it can be added via JS Code Extension scoped to Pre Loader or in a Tealium Custom Container Tag.
Attached is a block of code that you can copy and paste into a JavaScript Code Extension. This extension should be scoped to Pre Loader. Once pasted into the JavaScript code extension there are four configuration fields at the very top of the code that you can customize:
The attached script will work for both the html and iframe embed methods. This code needs to load as soon as possible so that the PlayerReady function is defined before the video is loaded. Once the video is loaded it will call the PlayerReady function, and the extension is not loaded before the video the tracking WILL NOT work.
If using the iframe embed code there is one nuance specific to this method. Notice in the above sample iframe embed script that the "src" of the iframe has a parameter at the end of it that enables the tracking API for the event listeners:
src="http://view.vzaar.com/1556961/player?apiOn=true"
Thus, 'apiOn=true' must be appended to the end of the "src" to enable Vzaar video tracking.
This code will output a set of data sources that you can add in the UI and then use to send data to your tag vendors. The variables are as follows:
Attached is a csv file with these variables and descriptions for easy uploading into the Data Sources tab of the Tealium UI.
This code will call utag.link, but there are lines that are commented out that will support the Media Module for Adobe Analytics. The thought behind calling utag.link is then you'll have another extension that will determine when to call the Media Module functions so this extension is more "plug and play" with less customizations.
var video_events = ["playState","progress","interaction"]; // Possible values are "playState", "progress" and/or "integration" var milestone_percentages = ["10","20","30","40","90"]; // These must be rounded to the nearest 10 var player_element_id = "video"; var player_type = "html"; // Possible values are "iframe" or "html" var played = false; var m1 = false; var m2 = false; var m3 = false; var m4 = false; // Call utag.link in Vzaar event listeners window._tealium_VZ = { name : "Vzaar", init_tries : 0, eventsAdded : false, events : video_events, milestone_percentages : milestone_percentages, mediaEventHandler : function (pEvent) { pos = _tealium_VZ.player_object.getTime(); dur = _tealium_VZ.player_object.getTotalTime(); if (pEvent=="mediaStarted" || pEvent=="started") { played = true; utag.DB("**** video started ****"); utag.link({event_type:"video",event_name:"play"}) ////s.Media.open(video_name, video_duration, video_player); ////s.Media.play(video_name, 0); //s.Media.track(video_name); } else if(pEvent=="resume"){ //s.Media.play(video_name, 0); //s.Media.track(video_name); _tealium_VZ.pause = false; utag.link({event_type:"video",event_name:"resume",video_position:pos,video_duration:dur}) utag.DB("**** video resumed ****"); }else if(pEvent=="pause"){ //s.Media.stop(video_name, video_position); //s.Media.track(video_name); _tealium_VZ.pause = true; utag.link({event_type:"video",event_name:"pause",video_position:pos,video_duration:dur}) utag.DB("**** video paused****"); utag.DB("**** Position: " + pos); utag.DB("**** Total Duration: " + dur); }else if(pEvent=="mediaEnded"){ //s.Media.complete(video_name, video_position); //s.Media.stop(video_name, video_position); //s.Media.track(video_name); played = false; //_tealium_VZ.resetMilestones(); utag.link({event_type:"video",event_name:"complete",video_position:pos,video_duration:dur}) utag.DB("**** video complete****"); }else{ var ms = pEvent.replace(/[^0-9]/g, "") for(var i=0;i<_tealium_VZ.milestone_percentages.length;i++){ if(ms==_tealium_VZ.milestone_percentages[i]){ var ms_num =(i+1); utag.link({event_type:"video",event_name:"milestone",video_milestone:"M:"+ms_num+":"+_tealium_VZ.milestone_percentages[i],video_position:pos,video_duration:dur}) utag.DB("**** "+_tealium_VZ.milestone_percentages[i]+"% viwed****"); } } } }, // Attaching Event Listeners for Begin, Play, Stop, and Video Completion // Each Event Handler has a callback function attached to it (mediaEventHandler) which will be called when the event occurs addEvents : function(a){ utag.DB("***** Adding Events ******"); if(a=="iframe"){ for(var i=0;i<video_events.length;i++){ _tealium_VZ.player_object.addEventListener(_tealium_VZ.events[i],_tealium_VZ.mediaEventHandler); } }else{ for(var i=0;i<video_events.length;i++){ _tealium_VZ.player_object.addEventListener(_tealium_VZ.events[i],"_tealium_VZ.mediaEventHandler"); } } }, init : function(){ //utag.DB("Connecting Tealium with Vzaar object"); if(typeof vzPlayer!="undefined"){ if(player_type=="iframe"){ vz_player = new vzPlayer(player_element_id) vz_player.ready(function(e){ utag.DB("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS"); _tealium_VZ.player_object = vz_player; _tealium_VZ.addEvents(player_type) utag.DB("****** Events Added ******"); _tealium_VZ.eventsAdded = true; }) }else{ window.vzaarPlayerReady = function() { utag.DB("*********** Video Ready **************"); utag.DB("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS"); vzPlayer = document.getElementById(player_element_id); _tealium_VZ.player_object = vzPlayer; _tealium_VZ.addEvents(player_type) utag.DB("****** Events Added ******"); _tealium_VZ.eventsAdded = true; _tealium_VZ.readyFunction = true; } } }else if(!_tealium_VZ.eventsAdded){ // If Vzaar object is not defined we will increment the number of tries by 1 _tealium_VZ.init_tries += 1; //Stop trying to connect to the Video Player if tried 100 times if(_tealium_VZ.init_tries>100){ utag.DB("TEALIUM: Cannot connect to Vzaar Video"); return; } // Calls init function repeatedly either 100 times or Vzaar Object is defined setTimeout(function(){_tealium_VZ.init()}, 100); } } } if(typeof _tealium_VZ.videoPlayer == "undefined"){ _tealium_VZ.init(); }
Copyright All Rights Reserved © 2008-2021