Player Events & Analytics

Tracking player events advanced.

Open Console in your desktop browser's Developer Tools (F12) to see how events are tracked.

The Videojs Events plugin was designed specifically to work with Video.js and Nuevo plugin. The plugin fires most important player events, and counts some statistical data. The plugin includes the basic implementation for Google and Matomo (formerly Piwik) analytics platforms that you can enable optionally.
Events fired by the plugin are: loaded, buffering, first play, pause, resume, mute, seeking, rate, time progress (10%, 25%, 50%, 75%, 90%), Fullscreen change, ended, rewind, forward, resolution change. Each event data includes video id and title, if defined.

Using the plugin is simple:

Code snippet

<script src="//www.domain.com/videojs/video.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.min.js"></script>
<script src="//www.domain.com/videojs/plugins/videojs.events.js"></script>

var player = videojs("myPlayer");
player.nuevo({title:"video title", id:"video id"});
player.events();

To enable one of available analytics methods just enable appropriate option:

Code snippet

player.events({ analytics:true })

This is essential to set unique title and/or unique id for each video that events you want to track. You can do it in 2 ways, by settings title and video_id as video element parameters:

Code snippet

<video class="video-js vjs-fluid" title="This is video title" video_id="This is video Id" controls preload playsinline poster="//path-to-poster.jpg">

Or you can set appropriate options of the Nuevo plugin:

Code snippet

player.nuevo({ title:"This is video title", video_id:"This is video Id" });

To catch single event (e.g. ended event), javascript code looks like:

Code snippet

player.on('track', (e, data) => {
if (data.event === 'ended') {
var video_id = data.playerId;
var video_title = data.playerTitle;
var duration = data.duration;
// do something ...
}
});

Below you will find a javascript function to track multiple events (all available events) within one track function.

Code snippet

player.on('track', (e, data) => {
switch(data.event) {

case 'loaded':
var video_id = data.playerId;
var video_title = data.playerTitle;
var loadTime = data.initialLoadTime; //always 0 for live video
break;

case 'firstPlay':
break;

case 'pause':
var pauseCount = data.pauseCount;
break;

case 'resume':
var resumeCount = data.resumeCount;
break;

case 'buffered':
var bufferTime = data.bufferTime;
break;

case 'seek':
var seekTo = data.seekTo;
break;

case '10%':
var currentTime = data.currentTime;
break;

case '25%':
var currentTime = data.currentTime;
break;

case '50%':
var currentTime = data.currentTime;
break;

case '75%':
var currentTime = data.currentTime;
break;

case '90%':
var currentTime = data.currentTime;
break;

case 'mute':
break;

case 'unmute':
break;

case 'rateChange':
var current_rate = data.rate;
break;

case 'enterFullscreen':
break;

case 'exitFullscreen':
break;

case 'resolutionChange':
var current_resolution = data.res;
break;

case 'summary':
var pauseCount = data.pauseCount;
var resumeCount = data.resumeCount;
var bufferCount = data.bufferCount;
var videoDuration = data.totalDuration;
var total_bufferingDuration = data.bufferDuration;
var real_watch_time = data.watchedDuration;
break;

case 'default':
break;
}
});

* summary event is fired in multiple possible scenarios: when video is ended, when the video is disposed, when the document and its resources are about to be unloaded.

The plugin from Nuevodevel.com includes the code to track events in Google Analytics and Matomo (formerly Piwik). The plugin detects tracking platform automatically and sends data through gtag, _ga, _gaq (Google) or _paq (Matomo) functions. Tracked events for analytics are: Play, 10%, 25%, 50%, 75%, Fullscreen, Completed and real Watch Time value. For the live video time progress events and completed events are not sent for obvious reason. But still play event and total Watch Time event are sent.

While GoogleAnalytics is a really great tool for tracking general website traffic such as SEO, Google Ads, visits, and more, it's not necessarily so great to track online video events. Additionally, in Google Analytics 4 that will definitely replace Universal Analytics in June 2023, you will no longer find the built-in Event Category/Action/Label taxonomy. Video events in Matomo reports are presented little bit better. You can analyze videos grouped by events, categories and labels. Events values are more accurate (Google accepts only integer values).

* Events and analytics functions implemented in the videojs plugin from nuevodevel.com work well with single and multiple videos on the same page. It also works with playlist media items.

* It can take up to 24 hours for the events to appear in Google Analytics or Matomo reports.