How to configure Vzaar Video Tracking in Tealium - analytics

Question

I am trying to configure Vzaar video tracking in Tealium. There is very little documentation on how to go about.
here is a link to the documentation
https://community.tealiumiq.com/t5/iQ-Tag-Management/Vzaar-Video-Tracking/ta-p/5934
here is the custom javascript code provided by the documentation mentioned in the above link
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 = "vzvd-1556961";
var player_type = "iframe"; // 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") {
alert('I am here');
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();
}
I start this script off with this snippet I wrote to append to the iframe url, and I also set the custom javascript code extension to the preloader function
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
ifrm.src += '&apiOn=true';
}, false);
I am still not seeing any events being fired when I press play on the video. What do I need to do to this script to start receiving tracking data? I am guessing I need to take out some comment blocks in the script provided by the Tealium Learning Community Docs however, I'm trying and still not seeing results. Any help would be appreciated!

Answer 1

There a couple of things you should check, and due to the lack of processing order context I will assume, so apologies if you already took that into consideration.
The pre loader extension
You are copy/pasting the extension content here, but did you consider the 3rd line where the id needs to be specified?
var player_element_id = "vzvd-1556961";
Im just mentioning because in your custom script you are fetching the element based on TAG type
var ifrm = document.getElementsByTagName('iframe')[0];
On the custom script it would be advisable to check if the query parameter is already there.
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
if (ifrm.src.indexOf("apiOn=true") === -1)
if (ifrm.src.indexOf("?") === -1)
ifrm.src += '?apiOn=true';
else
ifrm.src += '&apiOn=true';
}, false);
Because with Tealium everything is async, there is always the possibility that the "pre-loader" extension runs the code before the iframe is ready on DOM. Therefore to make sure the extension code is only initialized when the document is ready, I would move the extension object initializing instruction to the body of the custom script.
Something like this:
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
if (ifrm.src.indexOf("apiOn=true") === -1)
if (ifrm.src.indexOf("?") === -1)
ifrm.src += '?apiOn=true';
else
ifrm.src += '&apiOn=true';
if (typeof _tealium_VZ.videoPlayer == "undefined") {
_tealium_VZ.init();
}
}, false);
Finally make sure the vzaar client.js script is also loaded on the page as per your refered Tealium document
Here is a snippet to add it dinamically if the dev's didnt add it to the page. You can add it to the top of the "pre-loader" extension code
(function (a, b, c, d) {
a = '//player.vzaar.net/libs/flashtakt/client.js';
b = document;
c = 'script';
d = b.createElement(c);
d.src = a;
d.type = 'text/java' + c;
d.async = true;
a = b.getElementsByTagName(c)[0];
a.parentNode.insertBefore(d, a)
})();
So following your custom code logic, here is a full tracking code snippet for vzaar for a pre-loader extension in Tealium.
(function (a, b, c, d) {
a = '//player.vzaar.net/libs/flashtakt/client.js';
b = document;
c = 'script';
d = b.createElement(c);
d.src = a;
d.type = 'text/java' + c;
d.async = true;
a = b.getElementsByTagName(c)[0];
a.parentNode.insertBefore(d, a)
})();
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 = "iframe"; // Possible values are "iframe" or "html"
var fireEvent = true;
var played = false;
var m1 = false;
var m2 = false;
var m3 = false;
var m4 = false;
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;
var data = {event_type: "video", event_name: "play"};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "resume") {
_tealium_VZ.pause = false;
var data = {event_type: "video", event_name: "resume", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "pause") {
_tealium_VZ.pause = true;
var data = {event_type: "video", event_name: "pause", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "mediaEnded") {
played = false;
//_tealium_VZ.resetMilestones();
var data = {event_type: "video", event_name: "complete", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} 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);
var data = {event_type: "video", event_name: "milestone", video_milestone: "M:" + ms_num + ":" + _tealium_VZ.milestone_percentages[i], video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
}
}
}
},
addEvents: function (a) {
console.log("***** 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 () {
if (typeof vzPlayer != "undefined") {
if (player_type == "iframe") {
vz_player = new vzPlayer(player_element_id)
vz_player.ready(function (e) {
console.log("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS");
_tealium_VZ.player_object = vz_player;
_tealium_VZ.addEvents(player_type)
console.log("****** Events Added ******");
_tealium_VZ.eventsAdded = true;
})
} else {
window.vzaarPlayerReady = function () {
console.log("*********** Video Ready **************");
console.log("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS");
vzPlayer = document.getElementById(player_element_id);
_tealium_VZ.player_object = vzPlayer;
_tealium_VZ.addEvents(player_type)
console.log("****** 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) {
console.log("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);
}
}
}
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
if (ifrm.src.indexOf("apiOn=true") === -1)
if (ifrm.src.indexOf("?") === -1)
ifrm.src += '?apiOn=true';
else
ifrm.src += '&apiOn=true';
player_element_id = ifrm.id;
if (typeof _tealium_VZ.videoPlayer == "undefined") {
_tealium_VZ.init();
}
}, false);
Here is a full working page working with the tracking code from refered Tealium documentation link:
<html>
<head>
<title>vzaar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://player.vzaar.net/libs/flashtakt/client.js" type="text/javascript"></script>
<script>
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 = "iframe"; // Possible values are "iframe" or "html"
var fireEvent = false;
var played = false;
var m1 = false;
var m2 = false;
var m3 = false;
var m4 = false;
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;
var data = {event_type: "video", event_name: "play"};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "resume") {
_tealium_VZ.pause = false;
var data = {event_type: "video", event_name: "resume", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "pause") {
_tealium_VZ.pause = true;
var data = {event_type: "video", event_name: "pause", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} else if (pEvent == "mediaEnded") {
played = false;
//_tealium_VZ.resetMilestones();
var data = {event_type: "video", event_name: "complete", video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
} 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);
var data = {event_type: "video", event_name: "milestone", video_milestone: "M:" + ms_num + ":" + _tealium_VZ.milestone_percentages[i], video_position: pos, video_duration: dur};
if (fireEvent === true) { utag.link(data) };
console.log(JSON.stringify(data));
}
}
}
},
addEvents: function (a) {
console.log("***** 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 () {
if (typeof vzPlayer != "undefined") {
if (player_type == "iframe") {
vz_player = new vzPlayer(player_element_id)
vz_player.ready(function (e) {
console.log("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS");
_tealium_VZ.player_object = vz_player;
_tealium_VZ.addEvents(player_type)
console.log("****** Events Added ******");
_tealium_VZ.eventsAdded = true;
})
} else {
window.vzaarPlayerReady = function () {
console.log("*********** Video Ready **************");
console.log("TEALIUM: Connecting Tealium with Oyala Player - SUCCESS");
vzPlayer = document.getElementById(player_element_id);
_tealium_VZ.player_object = vzPlayer;
_tealium_VZ.addEvents(player_type)
console.log("****** 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) {
console.log("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);
}
}
}
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
if (ifrm.src.indexOf("apiOn=true") === -1)
if (ifrm.src.indexOf("?") === -1)
ifrm.src += '?apiOn=true';
else
ifrm.src += '&apiOn=true';
player_element_id = ifrm.id;
if (typeof _tealium_VZ.videoPlayer == "undefined") {
_tealium_VZ.init();
}
}, false);
</script>
</head>
<body>
<iframe
id="video"
name="video"
title="vzaar video player"
class="vzaar-video-player"
type="text/html"
width="640"
height="480"
frameborder="0"
allowfullscreen=""
allowtransparency="true"
mozallowfullscreen=""
webkitallowfullscreen=""
src="//view.vzaar.com/9036822/player?apiOn=true">
</iframe>
</body>
</html>
Result from that example page: