Track video playback analytics

We recommend using VideoJS as your HTML5 video player because it has extensive functionality and a plugin system.

VideoJS plugins

Example

https://github.com/spodlecki/videojs-event-tracking#positioning
Track Overall Percentile (1st, 2nd, 3rd, and 4th) of Completion. This event triggers each quarter of a video.

player.on('tracking:first-quarter', (e, data) => {
    logVideoEvent(e.type, data, 25);
});
player.on('tracking:second-quarter', (e, data) => {
    logVideoEvent(e.type, data, 50);
});
player.on('tracking:third-quarter', (e, data) => {
    logVideoEvent(e.type, data, 75);
});
player.on('tracking:fourth-quarter', (e, data) => {
    logVideoEvent(e.type, data, 100);
});

function logVideoEvent(eventName, eventData, progress) {
    const mult = 1000000; // turn seconds into microseconds to get rid of decimals
    eventData.meta = {
        progress: progress,
        currentTime: this.player.currentTime() * mult,
        duration: this.player.duration() * mult,
    };
    console.log(eventName, eventData.meta);
    mobilelocker.logEvent('Video', e.type, action, eventData);
}

Generate a report

Use the API to generate a report of video-watching events

Parameter	Required	Description
presentation_id	Yes	The ID of the presentation
device_id	No	ID of the device that generated the event
session_id	No	ID of the session the event was created in.
category	No	String
action	No	String
path	No	String
user_id	No	If present, it will only return events created by this user
page	No	Page number
per_page	No	Events per page. Max is 100.
order_by	No	Default is the device event "id".
order_dir	No	"asc" or "desc". Default is "asc".

const presentationID = 77; // Or whatever your Presentation ID is.
const data = {
    presentation_id: [presentationID],
    category: 'Video',
};
const API_TOKEN = 'Your API token here';
const config = {
  headers: {
      Authorization: `Bearer ${API_TOKEN}`,
  }
};

// Returns JSON
axios.post('https://app.mobilelocker.com/api/device_events/search', data, config)
    .then(response => {
        console.log(response.data);
    });

// Returns CSV
axios.post('https://app.mobilelocker.com/api/device_events/export', data, config)
    .then(response => {
        console.log(response.data);
    });