Can't see any tracking

[Maddy1984]

Hello Mickey,

I've been trying to apply your plugin without success. Could you have a look at the code below and tell me if you see anything wrong with it?

This is the html defining the video element:

 <video id="xxx" class="video-js vjs-default-skin" controls preload="none" width="576" height="324" poster="img/cover-video-1.jpg" data-setup='{"ga": {"eventLabel": "The xxx Video", "gaLibrary": "analytics.js"}}'>
       <source src="http://xxx.mp4" type="video/mp4" />
       <source src="http://xxx.webm" type="video/webm" />
       <source src="http://xxx.ogv" type="video/ogg" />
 </video>

And this is the JavaScript at the bottom of the file:

 <script src="js/video-js/video.js"></script>
 <script src="js/video-js/videojs.ga.min.js"></script>
 <script>
       videojs('xxx', {}, function() {
       this.ga({'eventsToTrack': ['loaded', 'start', 'end', 'play', 'pause', 'fullscreen', 'resize', 'error']});
       });
 </script>

The video plays alright, and I've made sure all the scripts are in the right directories. Any clue why the events are not being tracked? Thank you very much in advance,

Maddy

[mickey]

Hey @Maddy1984, It doesn't work because you set options in both the HTML and the JS and you only set "gaLibrary": "analytics.js" in the HTML. But as stated in the README (up to version 0.3.0) the JS options are selected before the HTML ones.

To make it easier, I removed the option gaLibrary and I now autodetect which library you're using. I just released the 0.3.1, so it should work with the following code:

 <video id="xxx" class="video-js vjs-default-skin" controls preload="none" width="576" height="324" poster="img/cover-video-1.jpg">
  <source src="http://xxx.mp4" type="video/mp4" />
  <source src="http://xxx.webm" type="video/webm" />
  <source src="http://xxx.ogv" type="video/ogg" />
 </video>

videojs('xxx', {}, function() {
  this.ga({'eventsToTrack': ['loaded', 'start', 'end', 'play', 'pause', 'fullscreen', 'resize', 'error']});
});

Let me know if this works out.

[Maddy1984]

Hi Mickey,

Thank you for your help. I've updated videojs-ga.js to the latest version and changed the code as you suggested, but I can only see 'start' events being reported. 'fullscreen' and 'pause', for instance, are being ignored by Google Analytics.

I'm not sure what else to do. Any idea would be much appreciated,

Maddy

[mickey]

Hey @Maddy1984, There was indeed a bug. I wasn't waiting for the ready event, before registering my events handlers.

Again, this should be fixed with the new 0.4.0 version. Sorry for the hassle and thanks a lot for the feedback.

[Maddy1984]

That's better!

I can still see no fullscreen events, though. Are you sure the following code from videos-ga.js is working?

fullscreen = function() {
    var currentTime;
    currentTime = Math.round(this.currentTime());
    if (this.isFullscreen()) {
        sendbeacon('enter fullscreen', false, currentTime);
    } else {
        sendbeacon('exit fullscreen', false, currentTime);
    }
};

[mickey]

Hey @Maddy1984, It works for me. Which version of video.js are you using? Do you have any errors in your JS console? which browser are you testing with?

[Maddy1984]

Hello Mickey,

I'm using v4.5.1 and testing with Chrome. No JavaScript errors appearing in the console.

I actually don't need the rest of the events anymore, so no worries, but it would be great if everything worked in the future.

Thank you for all your help, Maddy

[mickey]

Hey @Maddy1984, Sorry about that it seemed I broke the fullscreen event with #11 on older versions of video.js. It should be fixed now. Cheers

[Maddy1984]

Hello Mickey,

I updated to v0.4.1 and it all works fine. Thank you for your help and for writing the plugin :)

Maddy

[mickey]

great! Thanks again for the feedback

Mike