iframe嵌入Youtube视频事件跟踪 - 确保跟踪管理器

时间:2016-11-18 13:44:52

标签: javascript video iframe youtube youtube-api

我想跟踪播放视频,暂停视频,开始视频和播放等事件。使用Ensighten for iframe嵌入Youtube视频,在Google Analytics中结束视频?

我已经按照Google推荐的iframe嵌入式Youtube网址参数启用了YoutubejsAPI,即'enablejsapi = 1'。我还尝试使用'event'属性调用他们预定义的onPlayerStateChange()函数。

下面提到的代码片段供参考(礼貌:lunametrics.com)



var tag = document.createElement('script');
 
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
var video = 'PoljF9Zqv3Y';
    video.h = '271'; //video iframe height
    video.w = '640'; //video iframe width
 
function onYouTubeIframeAPIReady() {
  player = new YT.Player('videoFrame', {
    height: video.h,
    width: video.w,
    videoId: video,
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
  switch (event.data) {
    case YT.PlayerState.PLAYING:
      if (cleanTime() === 0) {
        // console.log('started ' + cleanTime());
          ga('send', 'event', 'video', 'started', video);
      } else {
        // console.log('playing ' + cleanTime())
        ga('send', 'event', 'video', 'played', 'v: ' + video + ' | t: ' + cleanTime());
      }
      break;
    case YT.PlayerState.PAUSED:
      if (player.getDuration() - player.getCurrentTime() !== 0) {
        // console.log('paused' + ' @ ' + cleanTime());
        ga('send', 'event', 'video', 'paused', 'v: ' + video + ' | t: ' + cleanTime());
      }
      break;
    case YT.PlayerState.ENDED:
      // console.log('ended ');
      ga('send', 'event', 'video', 'ended', video);
      break;
  }
}

// utility
function cleanTime(){
    return Math.round(player.getCurrentTime());
}




Evenif,它没有在我的实时GA报告中发射任何事件。

由于

1 个答案:

答案 0 :(得分:1)

请查看Komito Analytics的工作原理。请参阅source code中的init_功能。