There’s a back story to this one. I once failed to get video progress tracking working with a Flash video player and Big Expensive Analytics Company™ code. It was a real pain in the ass. We missed the deadline, wasted about 8 hours and eventually just dropped the feature. A frustrating experience for all involved.
With that in mind, then, it should come to no surprise that I returned to the problem when exploring the <video> element and related APIs. What was a fruitless 8 hours of hoping the Big Expensive Analytics Company™ code would “just work,” turned out to be about 30 minutes of light hacking to get it up and running with Google Analytics and HTML5.
By the way, between you and me the Big Expensive Analytics Company™ code never “just works,” even though that kind of feature is one of the reasons they get the big bucks for their product. I don’t really like working with Big Expensive Analytics Company™. I’m much happier with GA. It behaves as expected and is a lot easier to “get” right out of the box.
Anyway, here’s what I did. It’s hack-y, but works:
The HTML:
<figure>
<video src="_assets/video/sample.ogv" controls autoplay
width="150%"
id="video-sample"
data-description="unicorns!">
your browser does not support the video tag </video>
<legend>Do Androids Dream of Electric Unicorns?</legend>
</figure>
The JavaScript
//when the DOM is loaded, I run some init code
document.addEventListener("DOMContentLoaded", init, false);
//which basically attaches some events.
function init(){
var video = document.getElementById("video-sample");
//these should be self-explanatory
//which won't stop me from explaining
//the video API has an "ended" event. That's good
//as we want to track when people play the whole thing
video.addEventListener("ended", videoEnd, false);
//this is the event that fires whenever the video timer is updated
//this is how we're tracking progress
video.addEventListener("timeupdate", videoTimeUpdate, false);
//when play is pressed or the video uatoplays
video.addEventListener("play", videoPlay, false);
//and when it's paused
video.addEventListener("pause", videoPause, false);
}
//this next function is a total hack
//and an excuse to use sessionStorage.
//basically, it sets up three stages to track.
function setKeyFrames(duration) {
//duration is passed in. It's from the standard video metadata
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() {
//grab the current time from the video.
var curTime=document.getElementById("video-sample").currentTime.toFixed(1);
//and then just test it against the values stored in sessionStorage
switch (curTime) {
case sessionStorage.getItem("one") :
//and we call the standard event tracker
pageTracker._trackEvent( "video", "1/4 video played",
document.getElementById("video-sample").getAttribute("data-description") );
//and clear out the value so the test fails the next time
sessionStorage.setItem("one", null);
break;
case sessionStorage.getItem("two") :
pageTracker._trackEvent( "video", "2/4 video played",
document.getElementById("video-sample").getAttribute("data-description") );
sessionStorage.setItem("two", null);
break;
case sessionStorage.getItem("three") :
pageTracker._trackEvent( "video", "3/4 video played",
document.getElementById("video-sample").getAttribute("data-description") );
sessionStorage.setItem("three", null);
break;
}
}
//
//these next three simply call the default
// pageTracker._trackEvent with some
//arguments.
function videoEnd() {
pageTracker._trackEvent( "video", "complete video played",
document.getElementById("video-sample").getAttribute("data-description") );
}
function videoPlay() {
pageTracker._trackEvent( "video", "video played",
document.getElementById("video-sample").getAttribute("data-description") );
setKeyFrames(this.duration)
}
function videoPause() {
pageTracker._trackEvent( "video", "video paused",
document.getElementById("video-sample").getAttribute("data-description") );
}
One thought on “HTML5 Demo: Tracking Video Progress With Google Analytics”