如何修复HTML5视频Javascript跟踪代码，这是行不通的

Question

我有一些我在网上找到的JavaScript代码，它提供了我的HTML5视频的谷歌分析统计。然而，代码只有正确显示“视频播放”和“视频暂停”的统计信息，但其余信息将不会显示或甚至无法计算。该信息的其余部分是：

“25％的视频观看”， “50％的视频观看”， “75％的视频观看”， “100％的视频观看”。

如何让下面的代码正常工作？另外，谷歌分析是唯一的方式来跟踪这些统计数据还是有另一种方式？

<script type="text/javascript"> 
 
     document.addEventListener('DOMContentLoaded', init, false) 
 
var videoId = document.getElementById('bigvid3') 
 
var videoTitle = videoId.getAttribute('data-description') 
 
var videoTitle = 'bigvid3' 
 

 
function init() { 
 
    videoId.addEventListener('play', videoPlay, false) 
 
\t videoId.addEventListener('pause', videoPause, false) 
 
\t videoId.addEventListener('ended', videoEnd, false) 
 
\t videoId.addEventListener('timeupdate', videoTimeUpdate, false) 
 

 
} 
 

 
function setKeyFrames (duration) { 
 
\t var quarter = (duration/4).toFixed(1) 
 
\t sessionStorage.setItem('one', quarter) 
 
\t sessionStorage.setItem('two', (quarter * 2).toFixed(1)) 
 
\t sessionStorage.setItem('three', (quarter * 3).toFixed(1)) 
 
} 
 

 
function videoTimeUpdate() { 
 
\t \t var curTime = videoId.currentTime.toFixed(1) 
 
\t \t switch (curTime) { 
 
\t \t \t case sessionStorage.getItem('one'): 
 
\t \t \t \t ga('send', 'event', 'video', '25% video played', videoTitle) 
 
\t \t \t \t sessionStorage.setItem('one', null) 
 
\t \t \t case sessionStorage.getItem('two'): 
 
\t \t \t \t ga('send', 'event', 'video', '50% video played', videoTitle) 
 
\t \t \t \t sessionStorage.setItem('two', null) 
 
\t \t \t case sessionStorage.getItem('three'): 
 
\t \t \t \t ga('send', 'event', 'video', '75% video played', videoTitle) 
 
\t \t \t \t sessionStorage.setItem('three', null) 
 
\t \t } 
 
} 
 

 
function videoPlay() { 
 
\t ga('send', 'event', 'video', 'video played', videoTitle) 
 
\t setKeyFrames(this.duration) 
 
} 
 

 
function videoPause() { 
 
\t ga('send', 'event', 'video', 'video paused', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '25% video played', '50% video played', '75% video played', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '25% video played', videoTitle) 
 
} 
 

 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '50% video played', videoTitle) 
 
} 
 
     
 
function videoTimeUpdate() { 
 
\t ga('send', 'event', 'video', '75% video played', videoTitle) 
 
} 
 
     
 
function videoEnd() { 
 
\t ga('send', 'event', 'video', '100% video played', videoTitle) 
 
} 
 
    </script>

Answer 1

只是让你知道，这段代码甚至单独固定韩元”工作。网上有一个非常好的教程，但你似乎找到了错误的教程。我会尽我所能为您简化流程。

首先让我们来修复代码在原题：

<script type="text/javascript"> 
 
     document.addEventListener('DOMContentLoaded', init, false) 
 
var videoId = document.getElementById('bigvid3') 
 
//var videoTitle = videoId.getAttribute('data-description') 
 
var videoTitle = 'bigvid3' 
 

 
function init() { 
 
\t videoId.addEventListener('ended', videoEnd, false) 
 
\t videoId.addEventListener('timeupdate', videoTimeUpdate, false) 
 
\t videoId.addEventListener('play', videoPlay, false) 
 
\t videoId.addEventListener('pause', videoPause, false) 
 
} 
 

 
function setKeyFrames (duration) { 
 
\t var quarter = (duration/4); 
 
\t sessionStorage.setItem('one', quarter); 
 
\t sessionStorage.setItem('two', (quarter * 2)); 
 
\t sessionStorage.setItem('three', (quarter * 3)); 
 
} 
 

 
function videoTimeUpdate() { 
 
    var curTime = videoId.currentTime.toFixed(1) 
 

 
    if (curTime > sessionStorage.getItem('one') && sessionStorage.getItem('one') != null) { 
 
     ga('send', 'event', 'video', '25% video played', videoTitle) 
 
     sessionStorage.setItem('one', null) 
 
    } else if (curTime > sessionStorage.getItem('two') && sessionStorage.getItem('two') != null) { 
 
      ga('send', 'event', 'video', '50% video played', videoTitle) 
 
      sessionStorage.setItem('two', null) 
 
    } else if (curTime > sessionStorage.getItem('three') && sessionStorage.getItem('three') != null) { 
 
      ga('send', 'event', 'video', '75% video played', videoTitle) 
 
      sessionStorage.setItem('three', null) 
 

 
    } 
 

 

 
function videoEnd() { 
 
\t ga('send', 'event', videoCategory, '100% video played', videoTitle); 
 

 
} 
 

 
function videoPlay() { 
 
\t ga('send', 'event', videoCategory, 'video played', videoTitle); 
 

 
\t setKeyFrames(this.duration); 
 
} 
 

 
function videoPause (video) { 
 
         var pauseCurTime = videoId.currentTime, 
 
         pauseDuration = videoId.duration; 
 
         ga('send', 'event', videoCategory, 'video paused', videoTitle); 
 
} 
 
    </script>

下一步是在视频中发现页面的开放body标签后添加一个谷歌标签管理器标记：

<!-- Google Tag Manager --> 
 
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=emblem" 
 
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 
 
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 
 
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 
 
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 
 
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 
 
})(window,document,'script','dataLayer','emblem');</script> 
 
<!-- End Google Tag Manager -->

一旦你有正确的谷歌标签管理器设置触发/触发事件，请确保用你的页面左上角的实际谷歌标签管理器标志替换世界标志。

最后加入这个标记来获得您正在寻找的功能：

<script> 
 
// Let's wrap everything inside a function so variables are not defined as globals 
 
(function(){ 
 
    // This is gonna our percent buckets (25%-75%) 
 
    //Change the variable "divisor" to create different multiples to track smaller %'s like 10% etc. 
 
    var divisor = 25; 
 
    // We're going to save our players status on this object. 
 
    var videos_status = {}; 
 
    // This is the funcion that is gonna handle the event sent by the player listeners 
 
    function eventHandler(e){ 
 
     switch(e.type) { 
 
      // This event type is sent everytime the player updated it's current time, 
 
      // We're using for the % of the video played.  
 
     case 'timeupdate':  
 
      // Let's set the save the current player's video time in our status object    
 
      videos_status[e.target.id].current = Math.round(e.target.currentTime);  
 
      // We just want to send the percent events once  
 
      var pct = Math.floor(100 * videos_status[e.target.id].current/e.target.duration);    
 
      for (var j in videos_status[e.target.id]._progress_markers) { 
 
      if (pct >= j && j > videos_status[e.target.id].greatest_marker) { 
 
    \t \t \t videos_status[e.target.id].greatest_marker = j; 
 
      } 
 
      } 
 
     // current bucket hasn't been already sent to GA?, let's push it to GTM 
 
     if (videos_status[e.target.id].greatest_marker && !videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker]) { 
 
      videos_status[e.target.id]._progress_markers[videos_status[e.target.id].greatest_marker] = true; 
 
      dataLayer.push({ 
 
       'event': 'gaEvent', 
 
       'gaEventCategory': 'HTML5 Video', 
 
       'gaEventAction': 'Progress_' + videos_status[e.target.id].greatest_marker + '%', 
 
       // We are using sanitizing the current video src string, and getting just the video name part 
 
       'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
      }); 
 
     } 
 

 
    break; 
 
    // This event is fired when user's click on the play button 
 
    case 'play': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Play', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
     }); 
 

 
     break; 
 
     // This event is fied when user's click on the pause button 
 
    case 'pause': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Pause', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]), 
 
      'gaEventValue': videos_status[e.target.id].current 
 
     }); 
 
     break; 
 
     // If the user ends playing the video, an Finish video will be pushed (This equals to % played = 100) 
 
    case 'ended': 
 
     dataLayer.push({ 
 
      'event': 'gaEvent', 
 
      'gaEventCategory': 'HTML5 Video', 
 
      'gaEventAction': 'Finished', 
 
      'gaEventLabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]) 
 
     }); 
 
     break; 
 
    default: 
 
     break; 
 
     } 
 

 
    } 
 
     // We need to configure the listeners 
 
     // Let's grab all the the "video" objects on the current page  
 
     var videos = document.getElementsByTagName('video'); 
 
     for (var i = 0; i < videos.length; i++) { 
 
      // In order to have some id to reference in our status object, we are adding an id to the video objects 
 
      // that don't have an id attribute. 
 
      var videoTagId; 
 
      if (!videos[i].getAttribute('id')) { 
 
       // Generate a random alphanumeric string to use is as the id 
 
       videoTagId = 'html5_video_' + Math.random().toString(36).slice(2); 
 
       videos[i].setAttribute('id', videoTagId); 
 
      } 
 
      // Current video has alredy a id attribute, then let's use it :) 
 
      else { 
 
       videoTagId = videos[i].getAttribute('id'); 
 
      } 
 

 
      // Video Status Object declaration 
 
      videos_status[videoTagId] = {}; 
 
      // We'll save the highest percent mark played by the user in the current video. 
 
      videos_status[videoTagId].greatest_marker = 0; 
 
      // Let's set the progress markers, so we can know afterwards which ones have been already sent. 
 
      videos_status[videoTagId]._progress_markers = {}; 
 

 
      for (j = 0; j < 100; j++) { 
 
       videos_status[videoTagId].progress_point = divisor * Math.floor(j/divisor); 
 
       videos_status[videoTagId]._progress_markers[videos_status[videoTagId].progress_point] = false; 
 
      } 
 
      // On page DOM, all players currentTime is 0  
 
      videos_status[videoTagId].current = 0;  
 
      // Now we're setting the event listeners.  
 
      videos[i].addEventListener("play", eventHandler, false);  
 
      videos[i].addEventListener("pause", eventHandler, false);  
 
      videos[i].addEventListener("ended", eventHandler, false);  
 
      videos[i].addEventListener("timeupdate", eventHandler, false);  
 
      videos[i].addEventListener("ended", eventHandler, false); 
 
     } 
 
})(); 
 
</script>

您需要将这些标记添加到谷歌标签管理器没有在视频中找到的页面并设置参数。

这是this tutorial的简化版本。如果你做得对，你会得到你所需要的。

最后一件事。我认为videoEnd绝对没有错。它应该工作。确保你的视频没有设置为LOOP，否则它永远不会结束，并且不会注册。除此之外，我不能看到其他任何不会注册的可能性。

Answer 2

的问题是，你可能得到CURTIME不会，你已经在你的session变量设置的值完全匹配。你想这样做（清除它们之前）什么是看是否值比你检查什么更大的......是这样的：

function videoTimeUpdate() { 
    var curTime = videoId.currentTime.toFixed(1) 

    if (curTime > sessionStorage.getItem('one') && sessionStorage.getItem('one') != null) { 
     ga('send', 'event', 'video', '25% video played', videoTitle) 
     sessionStorage.setItem('one', null) 
    } else if (curTime > sessionStorage.getItem('two') && sessionStorage.getItem('two') != null) { 
      ga('send', 'event', 'video', '50% video played', videoTitle) 
      sessionStorage.setItem('two', null) 
    } else if (curTime > sessionStorage.getItem('three') && sessionStorage.getItem('three') != null) { 
      ga('send', 'event', 'video', '75% video played', videoTitle) 
      sessionStorage.setItem('three', null) 

    } 

}