Web Video Analytics for YouTube, Vimeo & BrightCove channels

Videos are undoubtedly the most powerful type of media and the most engaging form of content till date. Leveraging web video analytics is important to analyze video performance which helps in understanding behavioral pattern of intended audience and maximizing video engagement. Metrics like Unique Viewers, Total Video Views, Audience Size during a Time Span, Play Duration with Demographic options like Audience Age, Geography, Device & Browser and ratios on these metrics can really help optimizing the viewing experience & video engagement.

Most of good brand video channels like YouTube, Vimeo, BrightCove provides APIs that helps in tracking events (like video load, start, stop & pause) & setting up appropriate variables (like Page name, Video name)  that can help us in tracking videos and their engagements. We can use these APIs irrespective of our preferred Analytics tool like Google Analytics, Site Catalyst etc.

VideoAnalytics

Below are code snippets that can help us do Video tracking on various brand channels:

YouTube

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

BightCove

// 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.

brightcove-enableapi

Vimeo

$(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>
(Visited 230 times, 1 visits today)