Integrating Video.js with Google Analytics

Question

I'm wondering if anybody has gotten the Video.js module/library to play nicely with Google Analytics? I'm trying to do some integration via this plugin (https://github.com/mickey/videojs-ga), but am hitting a roadblock. I've added the script into my theme as second-to-last in the execution order, followed by another script consisting of the inline code noted in the example (as the final script on my page):

<script>
videojs('video', {}, function() {
  this.ga(); // "load the plugin, by defaults tracks everything!!"
});
</script>

At this point I think it's almost working, but chrome is throwing "Uncaught TypeError: The element or ID supplied is not valid." I've also tried replacing "video" on the above code with the ID of the video on the page that I am testing, and I'm getting the same error. I feel like I'm close, but I'm not sure what needs to be tweaked to get it working. Any ideas?

Right now I'm testing on http://mattweinercreates.com/video-js-testing, i you want to check out my environment.

Answer 1

I think I answered this after I posted. I was trying to use the ID on the <video> itself, but I instead tried using the ID of the div that contained the video, and that worked without issue. I still need to figure out how to update the code dynamically on a per-page basis so that the correct video is tracked, but it's at least working now.

EDIT: I was able to modify the "inline" code file from above to automatically pick up any videos on a page that the script is loaded on.

(function ($) { $('.video-js').each(function() { videojs(this.id, {}, function() { this.ga(); // "load the plugin, by defaults tracks everything!!" }); }) })(jQuery);