Iframe嵌入Youtube視頻事件跟蹤 - 確保標籤管理器

Question

我想跟蹤播放視頻，暫停視頻，開始視頻等活動&使用Ensighten for iframe嵌入式Youtube視頻的谷歌分析結束視頻？

我已經在iframe嵌入的Youtube URL參數中啓用了YoutubejsAPI，如Google推薦的那樣，即'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報告的任何事件。

感謝

Answer 1

請看看到Komito Analytics怎麼做。在source code中查看init_函數。