Skip to content

Instantly share code, notes, and snippets.

@larsmqller
Created September 6, 2018 22:38
Show Gist options
  • Save larsmqller/9734500097772d2b371e2be28680e764 to your computer and use it in GitHub Desktop.
Save larsmqller/9734500097772d2b371e2be28680e764 to your computer and use it in GitHub Desktop.
fl.videoLog = {
init: function () {
console.log('#asdf');
var self = this;
$("video[data-ga-logging-name]").on("play", function () {
var gaLoggingName = this.dataset.gaLoggingName;
fl.videoLog.vars.trackingStatus = true;
self.logPlayStartToGa(gaLoggingName);
self.setMarkers();
fl.videoLog.vars.currentVideo = this;
function trackProgress () {
fl.videoLog.vars.currentEventLabel = gaLoggingName;
self.videoProgressTracking();
}
if (typeof this.duration === 'number') {
trackProgress();
console.log("are we double tracking?");
} else {
$(this).one('canplay', trackProgress);
}
});
},
vars: {
trackingStatus: false,
markers: false,
currentVideo: false,
currentEventLabel: false
},
logPlayStartToGa: function(gaEventLabel) {
window.ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'Start',
eventLabel: gaEventLabel
});
console.log("Logging play event");
},
setMarkers: function() {
this.vars.markers = [.1, .2, .3, .4, .5, .6, .7, .8, .9, 1];
console.log("set markers");
},
videoProgressTracking: function() {
var videoElement = fl.videoLog.vars.currentVideo;
if (!videoElement) {
console.log('no video, shutting off');
return
}
var currentMarker = fl.videoLog.vars.markers[0];
var gaEventLabel = fl.videoLog.vars.currentEventLabel;
if (fl.videoLog.vars.trackingStatus && videoElement.duration && currentMarker) {
var progress = videoElement.currentTime / videoElement.duration;
if (progress >= currentMarker) {
fl.videoLog.vars.markers.shift(); // Remove first
// calc mark to percentage
var fixedMarker = parseFloat((currentMarker * 100).toFixed());
fixedMarker = fixedMarker + '%';
if (fl.videoLog.vars.trackingStatus > 1) {
fixedMarker = 'complete';
}
window.ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: fixedMarker,
eventLabel: gaEventLabel
});
console.log(fixedMarker);
}
fl.videoLog.vars.trackingStatus = progress < 1; // Are we finished?
if (fl.videoLog.vars.trackingStatus > 1) {
// we are finished!
fl.videoLog.vars.currentVideo = false;
fl.videoLog.vars.currentEventLabel = false;
}
}
window.requestAnimationFrame(fl.videoLog.videoProgressTracking);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment