如何在Tealium中配置Vzaar视频跟踪
我正在尝试在Tealium中配置Vzaar视频跟踪。关于如何进行的文档很少。
这是文档的链接
https://community.tealiumiq.com/t5/iQ-Tag-Management/Vzaar-Video-Tracking/ta-p/5934
这是上面链接中提到的文档提供的自定义javascript代码
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();
}
我从编写此代码段以添加到iframe网址开始，开始该脚本，并且还将自定义javascript代码扩展名设置为preloader函数
window.addEventListener('load', function(){
var ifrm = document.getElementsByTagName('iframe')[0];
ifrm.src += '&apiOn=true';
}, false);
当我按视频上的播放键时，我仍然没有看到任何事件被触发。我需要对此脚本执行什么操作才能开始接收跟踪数据？我猜想我需要在Tealium学习社区文档提供的脚本中删除一些注释框，但是，我正在尝试并且仍然看不到结果。任何帮助将不胜感激！
1 个答案:
答案 0 :(得分：4)
您应该检查几件事，由于缺乏处理订单的上下文，我会假设，如果您已经考虑到这一点，则表示歉意。
- 预加载程序扩展
您要在此处复制/粘贴扩展内容，但是您是否考虑过需要在其中指定ID的第三行？
var player_element_id = "vzvd-1556961";
我刚才提到的原因是，在自定义脚本中，您正在根据TAG类型获取元素
var ifrm = document.getElementsByTagName('iframe')[0];
- 在自定义脚本上，建议检查查询参数是否已经存在。
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);
- 由于Tealium一切都是异步的，因此总是有可能在iframe在DOM上准备就绪之前，“ pre-loader”扩展程序会运行代码。因此，为确保扩展代码仅在文档准备就绪时进行初始化，我将扩展对象初始化指令移至自定义脚本的主体。 像这样：
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);
- 最后，确保vzaar client.js脚本也按照您引用的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)
})();
因此，按照您的自定义代码逻辑，这是Tealium中预加载程序扩展的vzaar的完整跟踪代码段。
(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);
这是一个完整的工作页面，其中包含参考的Tealium文档链接中的跟踪代码：
<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>
该示例页面的结果：
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？