如何在Tealium中配置Vzaar视频跟踪

Question

我正在尝试在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 url中，并且我还将自定义javascript代码扩展设置为预加载器函数。

window.addEventListener('load', function(){
    var ifrm = document.getElementsByTagName('iframe')[0];
    ifrm.src += '&apiOn=true';
}, false);

当我在视频上按下播放时，我仍然没有看到任何事件被触发。我需要对此脚本执行什么操作才能开始接收跟踪数据？我猜我需要去掉Tealium Learning Community Docs提供的脚本中的一些注释块，然而，我正在尝试，仍然没有看到结果。任何帮助都将不胜感激！

Answer 1

有几件事情你应该检查，由于缺乏处理顺序上下文，我将假设，所以如果你已经考虑到这一点，很抱歉。

预加载器扩展

您在这里复制/粘贴扩展内容，但是您是否考虑了需要指定id的第三行？

var player_element_id = "vzvd-1556961";

我只是提一下，因为在您的自定义脚本中，您将根据标记类型获取元素

var ifrm = document.getElementsByTagName('iframe')[0];

1. 在自定义脚本上，建议检查查询参数是否已经存在。

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);

1. 是因为使用Tealium时一切都是异步的，总是有可能“预加载器”扩展在DOM上的iframe就绪之前运行代码。因此，为了确保只有在文档准备就绪时才初始化扩展代码，我将把扩展对象初始化指令移到自定义脚本的主体中。如下所示：

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);

1. 最后确保vzaar client.js脚本也按照您所引用的Tealium document

加载到页面上

​

​

如果开发人员没有将它添加到页面中，这里有一个片段可以动态地添加它。您可以将其添加到"pre-loader“扩展代码的顶部

(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>

该示例页面结果如下：

​

​