How to Fix HTML5 Video Javascript Tracking Code That is not Working Correctly

[royhenderson]

Sup Everyone.

I have a javascript code I found online that provides stats to google analytics for my HTML5 video. The code however only CORRECTLY displays stats for "video played" and "video paused" but the rest of the information won't display or even calculate. The rest of the info is:

"25% video watched", "50% video watched", "75% video watched", "100% video watched".

How can I get the code below working properly? Also, is google analytics the only way to track these stats or is there another way?

Formality:

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

[jscheuer1]

Yes - there are other tracking methods out there. Many ISP's offer tracking as part of/an option with your host account. And I'm sure there are other third party options. Using server side code and javascript you could work (a lot of work) out a method for logging your own tracking events to disk on the server, or even have reports emailed to you and/or whatever addresses you choose. This later would depend upon what server side options are available, but would still also depend upon (as your code already does) javascript for video event detection.

OK, give this a shot, I could only test the components, so I know it works, but there might be a typo. If there're still problems, I'll need a link to the page. Also, before testing -

Be sure to clear the browser cache and refresh the page.

<script type="text/javascript">
(function(){
	document.addEventListener('DOMContentLoaded', init, false);
	var videoId, videoTitle, dur, quarter, stat;
	
	function init () {
		videoId = document.getElementById('bigvid3');
		videoTitle = 'bigvid3';
		videoId.addEventListener('play', videoPlay, false);
		videoId.addEventListener('pause', videoPause, false);
		videoId.addEventListener('ended', videoEnd, false);
		videoId.addEventListener('timeupdate', videoTimeUpdate, false);
	}
	
	function setKeyFrames (duration) {
		if(dur){return;}
		dur = duration;
		quarter = duration / 4;
	}
	
	function videoTimeUpdate () {
			var curTime = videoId.currentTime;
			if (curTime >= quarter && curTime < quarter * 2 && stat !== 1){
				ga('send', 'event', 'video', '25% video played', videoTitle);
				stat = 1;
			} else if (curTime >= quarter * 2 && curTime < quarter * 3 && stat !== 2){
				ga('send', 'event', 'video', '50% video played', videoTitle);
				stat = 2;
			} else if (curTime >= quarter * 3 && curTime < dur && stat !== 3){
				ga('send', 'event', 'video', '75% video played', videoTitle);
				stat = 3;
			}
	}
	
	function videoPlay () {
		ga('send', 'event', 'video', 'video played', videoTitle);
		setKeyFrames(this.duration);
	}
	
	function videoPause () {
		ga('send', 'event', 'video', 'video paused', videoTitle);
	}
	      
	function videoEnd () {
		stat = 4;
		ga('send', 'event', 'video', '100% video played', videoTitle);
	}
})();
</script>

Oh, and I'm assuming only one video will be using this tag on a given page. Also, I'm not clear if you want it recorded each time the video gets to 25%, 50%, 75% per visit to the page (how it is now), or just the first time each of those milestones is reached for a given page visit. Like, if someone replays the video without leaving the page, it will log each milestone again. I can make it so they would have to refresh or revisit the page for that to happen. All other current logging will be recorded each play regardless of the number of plays per page visit.