iframe 嵌入式 Youtube 视频事件跟踪 - Ensighten 跟踪代码管理器

Question

我想使用 Ensighten for iframe Embeded Youtube Videos 在 Google Analytics 中跟踪播放视频、暂停视频、开始视频和结束视频等事件？

我已经按照 Google 的建议在 iframe 嵌入的 Youtube URL 参数中启用了 YoutubejsAPI，即“enablejsapi=1”。我还尝试按照建议使用“事件”属性调用他们预定义的 onPlayerStateChange() 函数。

下面提到的代码sn-p供参考（礼貌：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());
}

即使，它也没有在我的实时 GA 报告中触发任何事件。

谢谢

Answer 1

请看看Komito Analytics 是怎么做的。请参阅source code 中的init_ 函数。