videojs-ga

Google Analytics plugin for video.js

Getting Started

In your web page:

<video id="video" src="movie.mp4" controls></video>
<script src="video.js"></script>
<script src="dist/videojs.ga.min.js"></script>
<script>
videojs('video', {}, function() {
  this.ga(); // "load the plugin, by defaults tracks everything!!"
});
</script>

Please note that the Google Analytics script must be loaded before the ga plugin

Options

You can provide options to the plugin either by passing them in the javascript or in the html.

player.ga({
  'eventsToTrack': ['fullscreen', 'resize'],
  'debug': true
});

<video id="video" src="movie.mp4" controls data-setup='{"ga": {"eventsToTrack": ["error"]}}'></video>

The plugin will take in priority options provided in the javascript, followed by the ones provided in html and finally the defaults.

The following options are supported:

eventCategory

This is the eventCategory sent to GA. If you don't know what it is please check GA's doc default: 'Video'

eventLabel

This is the eventLabel sent to GA. If you don't know what it is please check GA's doc If not set, label will be generated automatically, unless autoLabel option is set to false.

autoLabel

If set to true, eventLabel will be generated automatically using basename of the video path. E.g. if the path is http://s3.amazonaws.com/pouet.mp4 the label would be pouet default: true

eventsToTrack

The events you want to track. Most of this events are videojs events. Some of them might reflects my needs. I'm open to add some more if you care to provide a good use case or a pull request. default: every events [ 'loaded', 'percentsPlayed', 'secondsPlayed', 'start', 'end', 'seek', 'play', 'pause', 'resize', 'volumeChange', 'error', 'fullscreen']

Most of the events are selft explanatory, here's the ones that may need more details:

• percentsPlayed: will send an event every X percents. X being defined by the option percentsPlayedInterval.

percentsPlayedInterval

This option goes with the percentsPlayed event. Every percentsPlayedInterval percents an event will be sent to GA. Set this options to false if you want to use percentsPlayedMoments option and don't want to track every 10 percent of playback. default: 10

percentsPlayedMoments

This option goes with the percentsPlayed event. After each value of percentsPlayedMoments percents of the actual playback an event will be sent. default: []

secondsPlayedInterval

This option goes with the secondsPlayed event. Every secondsPlayedInterval seconds of the actual playback an event will be sent to GA. default: 60

secondsPlayedMoments

This option goes with the secondsPlayed event. After each value of secondsPlayedMoments seconds of the actual playback an event will be sent to GA. default: []

trackFiniteSeconds

If set to true and at least one of secondsPlayedInterval, secondsPlayedMoments options is set, seconds played events will be triggered.

trackReplaySeconds

If set to true, start and secondsPlayed events will be emitted even after video has ended and then has been started again. default: false

sendGaEventDirectly

If set to true, plugin will send events to GA directly. Otherwise you need to listen to gaEvent on the player instance and then send events to GA manually, e.g.

player.on('gaEvent', function(e, gaEvent) {
  ga('send', gaEvent);
});

default: false

debug

If set to false, console logs will be ommited default: false

ga.js and analytics.js

This plugin supports the ga.js and the newer analytics.js Google Analytics libraries. It autodetects the library you use.

See information in google

To view the data on Google, access your account in analytics, in left panel click in Behavior > Events > Top Events.

TODO

• track the engine used (html5/flash) along with the source (ogg, mp4, ...)
• track the time to download the video