Videos are among the most engaging forms of content, making it crucial to analyze their performance to understand audience behavior and maximize engagement. Leveraging web video analytics allows you to track key metrics such as unique viewers, total views, audience size over time, play duration, and demographic details like age, geography, device, and browser. These insights enable you to optimize the viewing experience and enhance video engagement.
Leading video platforms like YouTube, Vimeo, and Brightcove offer APIs that facilitate tracking events (e.g., video load, start, pause, stop) and setting variables (e.g., page name, video name). These APIs can be integrated with analytics tools such as Google Analytics or Adobe Analytics to monitor video performance effectively.
Below are code snippets that can help us do Video tracking on various brand channels:
YouTube Video Tracking
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
$(document).ready(function() {
$('iframe').each(function(i) {
if ($(this).attr('src').indexOf('www.youtube.') != -1) {
$(this).load(function() {
player = new YT.Player(this, {
events: {
'onStateChange': onPlayerStateChange
}
});
});
} else
return false;
});
});
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.UNSTARTED) {
pauseFlag = true;
var VideoName = event.target.getVideoData().title;
//Place your Analytics tracking code here
}
}
To enable the JavaScript API for a player, add the URL parameter enablejsapi=1
to the player’s URL. For example:
https://www.youtube.com/v/VIDEO_ID?enablejsapi=1
Brightcove Video Tracking
// Brightcove Learning namespace
var BCL = {};
//template loaded event handler
BCL.onTemplateLoad = function (experienceID) {
// get references to the player and API Modules and Events
BCL.player = brightcove.api.getExperience(experienceID);
BCL.APIModules = brightcove.api.modules.APIModules;
};
// template ready event handler
BCL.onTemplateReady = function (evt) {
BCL.videoPlayer = BCL.player.getModule(BCL.APIModules.VIDEO_PLAYER);
BCL.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onVideoBegin);
BCL.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, onVideoPlay);
BCL.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.STOP, onVideoPause);
BCL.videoPlayer.addEventListener(brightcove.api.events.MediaEvent.COMPLETE, onVideoComplete);
};
function onVideoComplete(evt)
{
console.log(' video with id '+evt.media.id +" has been completed");
//Place your Analytics tracking code here
}
function onVideoPlay(evt)
{
console.log(' video with id '+evt.media.id +" has been played");
//Place your Analytics tracking code here
}
function onVideoPause(evt)
{
console.log(' video with id '+evt.media.id +" has been paused");
//Place your Analytics tracking code here
}
function onVideoBegin(evt)
{
console.log(' video with id '+evt.media.id +" has been started");
//Place your Analytics tracking code here
}To make this work, your must explicitly enable Enable ActionScript/JavaScript APIs for respective BrightCove player. You can find this setting under Web Settings option.
Vimeo Video Tracking
$(function() {
function getVimeoId(url) {
var m = url.match(/^.+vimeo.com\/(.*\/)?([^#\?]*)/);
return m ? m[2] || m[1] : null;
}
//Vid is object id of iFrame containing Vimeo Player
var iframe = $('#Vid')[0];
var player = $f(iframe);
var playcount = 0;
var playcount25 = 0,
playcount50 = 0,
playcount75 = 0,
finished = false;
var VideoID = getVimeoId(iframe.src);
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
player.addEvent('finish', function() {
if (playcount25++ == 0) {
console.log('Video played - 25%');
//Place tracking code here
}
if (playcount50++ == 0) {
console.log('Video played - 50%');
//Place tracking code here
}
if (playcount75++ == 0) {
console.log('Video played - 75%');
//Place tracking code here
}
console.log('Video finished');
//Place tracking code here
});
player.addEvent('playProgress', function(data) {
playcount++;
if (playcount == 1) {
console.log('Video Started.');
//Place tracking code here
}
var cent = data.percent * 100;
if (Math.floor(cent) == 25) {
if (playcount25++ == 0) {
console.log('25% played');
//Place tracking code here
}
} else if (Math.floor(cent) == 50) {
if (playcount25++ == 0) {
console.log('25% played');
//Place tracking code here
}
if (playcount50++ == 0) {
console.log('50% played');
//Place tracking code here
}
} else if (Math.floor(cent) == 75) {
if (playcount25++ == 0) {
console.log('25% played');
//Place tracking code here
}
if (playcount50++ == 0) {
console.log('50% played');
//Place tracking code here
}
if (playcount75++ == 0) {
console.log('75% played');
//Place tracking code here
}
} else if (Math.floor(cent) == 100) {
finished = true;
console.log('Video finished: '+finished);
//Place tracking code here
}
});
});
});To turn the API on, add api=1 to the URL of the iframe, like this:
http://player.vimeo.com/video/VIDEO_ID?api=1 http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=VimeoPlayer
Further, you’ll need to be running on a web server instead of opening the file directly in your browser. Flash and JS security restrictions will prevent Vimeo API from working when run locally.
You would need to make sure you’re including the jQuery library for these code snippets.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>Conclusion
By integrating these tracking methods, you can gain comprehensive insights into your video content’s performance across YouTube, Vimeo, and Brightcove. Utilizing the provided APIs and embedding appropriate tracking codes will enable you to monitor viewer engagement effectively, allowing for data-driven decisions to enhance your video strategies.
