如何修復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) 

    } 

}