如何修复HTML5视频Javascript跟踪代码不正常工作

Question

我在网上找到一些JavaScript代码，为我的HTML5视频提供谷歌分析的统计数据。然而，代码只有正确显示"视频播放"one_answers"视频暂停"的统计数据，但其余的信息不会显示甚至计算。其余信息如下:

"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)
	videoId.addEventListener('pause', videoPause, false)
	videoId.addEventListener('ended', videoEnd, false)
	videoId.addEventListener('timeupdate', videoTimeUpdate, false)
}
function setKeyFrames (duration) {
	var quarter = (duration / 4).toFixed(1)
	sessionStorage.setItem('one', quarter)
	sessionStorage.setItem('two', (quarter * 2).toFixed(1))
	sessionStorage.setItem('three', (quarter * 3).toFixed(1))
}
function videoTimeUpdate () {
		var curTime = videoId.currentTime.toFixed(1)
		switch (curTime) {
			case sessionStorage.getItem('one'):
				ga('send', 'event', 'video', '25% video played', videoTitle)
				sessionStorage.setItem('one', null)
			case sessionStorage.getItem('two'):
				ga('send', 'event', 'video', '50% video played', videoTitle)
				sessionStorage.setItem('two', null)
			case sessionStorage.getItem('three'):
				ga('send', 'event', 'video', '75% video played', videoTitle)
				sessionStorage.setItem('three', null)
		}
}
function videoPlay () {
	ga('send', 'event', 'video', 'video played', videoTitle)
	setKeyFrames(this.duration)
}
function videoPause () {
	ga('send', 'event', 'video', 'video paused', videoTitle)
}
      
function videoTimeUpdate () {
	ga('send', 'event', 'video', '25% video played', '50% video played', '75% video played', videoTitle)
}
      
function videoTimeUpdate () {
	ga('send', 'event', 'video', '25% video played', videoTitle)
}
function videoTimeUpdate () {
	ga('send', 'event', 'video', '50% video played', videoTitle)
}
      
function videoTimeUpdate () {
	ga('send', 'event', 'video', '75% video played', videoTitle)
}
      
function videoEnd () {
	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 () {
	videoId.addEventListener('ended', videoEnd, false)
	videoId.addEventListener('timeupdate', videoTimeUpdate, false)
	videoId.addEventListener('play', videoPlay, false)
	videoId.addEventListener('pause', videoPause, false)
}
function setKeyFrames (duration) {
	var quarter = (duration / 4);
	sessionStorage.setItem('one', quarter);
	sessionStorage.setItem('two', (quarter * 2));
	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 () {
	ga('send', 'event', videoCategory, '100% video played', videoTitle);
}
function videoPlay () {
	ga('send', 'event', videoCategory, 'video played', videoTitle);
	setKeyFrames(this.duration);
}
function videoPause (video) {
                        var pauseCurTime = videoId.currentTime,
                        pauseDuration = videoId.duration;
                       ga('send', 'event', videoCategory, 'video paused', videoTitle);
}
    </script>

下一步是在找到视频的页面的开始正文标签之后添加一个google标签管理器标记:

<!-- 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) {
    			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>

您需要将此标记添加到google标签管理器中，而不是找到视频并设置参数的页面。

这是本教程的简化版本。如果你做得对，你就会得到你需要的。

最后一点。我完全看不出videoEnd有什么问题。这应该行得通。确保你的视频没有设置为LOOP，否则它永远不会结束，也不会注册。除此之外，我看不出它不注册的任何其他可能性。

Answer 2

问题是您获得的curTime可能与您在会话变量中设置的值不完全匹配。你要做的(在清除它们之前)是看看值是否大于你正在检查的…比如:

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)
    }
}