Question

我仔细阅读了所有类似的问题，但找不到答案。所以我真的很感谢你的帮助:)。

我的网站上有两个嵌入的YouTube视频（将来会有更多的视频），我需要跟踪每个视频的开始/播放，暂停和观看直到结束。跟踪观看进度（25％，50％，75％）也很棒，但我的JS技能只允许我实现以下脚本（仅适用于一个视频）

 // This code loads the IFrame Player API code asynchronously
 var tag = document.createElement('script');
 tag.src = "http://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


 // This code is called by the YouTube API to create the player object
 function onYouTubeIframeAPIReady(event) {
     player = new YT.Player('player', {
       events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
       }
     });
   }
   // This code is called by the YouTube API to create the player object

 function onYouTubeIframeAPIReady(event) {
   player2 = new YT.Player('player2', {
     events: {
       'onReady': onPlayerReady,
       'onStateChange': onPlayerStateChange
     }
   });
 }

 var pauseFlag = false;

 function onPlayerReady(event) {
   // do nothing, no tracking needed
 }

 function onPlayerStateChange(event) {
   // track when user clicks to Play
   if (event.data == YT.PlayerState.PLAYING) {
     ga('send', 'event', 'Video', 'Start', event.target.getVideoUrl());
     pauseFlag = true;
   }
   // track when user clicks to Pause
   if (event.data == YT.PlayerState.PAUSED && pauseFlag) {
     ga('send', 'event', 'Video', 'Pause', event.target.getVideoUrl());
     pauseFlag = false;
   }
   // track when video ends
   if (event.data == YT.PlayerState.ENDED) {
     ga('send', 'event', 'Video', 'Complete', event.target.getVideoUrl());
   }
 }

这些是视频iframe：

播放器

<iframe id="player" width="414" height="233" class="bnr-01" src="https://www.youtube.com/embed/VideoID?enablejsapi=1&origin=http://my.site.com" frameborder="0" allowfullscreen="" name="player"> </iframe>

玩家2

<iframe id="player2" width="414" height="233" class="bnr-02" src="https://www.youtube.com/embed/VideoID?enablejsapi=1&origin=http://my.site.com" frameborder="0" allowfullscreen="" name="player2"> </iframe>

仅为Player2成功发送事件。可能是什么问题？我们使用新的谷歌分析（通用）

提前谢谢！

Answer 1

这是我提出的一个脚本，可用于页面上任意数量的嵌入式Youtube视频。我很抱歉这会使用jQuery，但我的想法是：循环遍历每个Youtube嵌入并根据其索引将其指定为播放器。我也非常肯定这也可以进行优化。

它使用类12:00:00AM循环遍历每个嵌入。

youtubeplayer

希望至少让你朝着正确的方向前进！

如何在Google Analytics（分析）中跟踪多个YouTube视频

1 个答案: