For many of my projects I use MediaElementJS. This is an awesome library for HTML5 video with a fallback to Flash or Silverlight. Anyway, I had a client request to add google analytics for all their videos. I found the following code which adds the events to each player in order to start tracking events.   The code is a great start but I needed a deeper dive than simply the play, pause, and completed counts for each video.  I decided to track which parts of the videos were viewed by bucketing the videos into 30 second chunks.

google analytics mediaelementjs example

*I was tweaking the code while working on it so the last three buckets (8,9,10) should be merged with 4,5,6 but you get the idea.

The code is fairly straight forward but I thought I would post it as it may help someone out who needs to accomplish the same task.

$.extend(mejs.MepDefaults, {
    googleAnalyticsTitle: '',
    googleAnalyticsCategory: 'Videos',
    googleAnalyticsEventPlay: 'Play',
    googleAnalyticsEventPause: 'Pause',
    googleAnalyticsEventEnded: 'Ended',
    googleAnalyticsEventTime: 'Time'
});

var formatTime = function (timeInSeconds) {
    var sec_numb = parseInt(timeInSeconds);
    var hours = Math.floor(sec_numb / 3600);
    var minutes = Math.floor((sec_numb - (hours * 3600)) / 60) + hours * 60;
    var seconds = sec_numb - (hours * 3600) - (minutes * 60);

    if (seconds < 10) { seconds = "0" + seconds; }
    return minutes + ':' + seconds;
};

$.extend(MediaElementPlayer.prototype, {
    buildgoogleanalytics: function (player, controls, layers, media) {
        var timeInterval = 30, counter = 1, time, currentInterval = 0;
        media.addEventListener('play', function () {
            if (typeof _gaq != 'undefined') {
                _gaq.push(['_trackEvent',
					player.options.googleAnalyticsCategory,
					player.options.googleAnalyticsEventPlay,
					(player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle,
                    parseInt(player.getCurrentTime())
				]);
            }

            time = parseInt(player.getCurrentTime());
            counter = 1;
            while (timeInterval * counter < time) {
                counter += 1;
            }
        }, false);

        media.addEventListener('pause', function () {
            if (typeof _gaq != 'undefined') {
                _gaq.push(['_trackEvent',
					player.options.googleAnalyticsCategory,
					player.options.googleAnalyticsEventPause,
					(player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle,
                    parseInt(player.getCurrentTime())
				]);
            }
        }, false);

        media.addEventListener('ended', function () {
            if (typeof _gaq != 'undefined') {
                time = parseInt(player.getCurrentTime());
                currentInterval = timeInterval * counter;
                _gaq.push(['_trackEvent',
                        player.options.googleAnalyticsCategory,
                        player.options.googleAnalyticsEventEnded,
                        (player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle,
                        time
                    ]);
                _gaq.push(['_trackEvent',
                    player.options.googleAnalyticsCategory,
                    formatTime(currentInterval - timeInterval) + " - " + formatTime(time),
                    (player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle
                ]);
            }
        }, false);

        media.addEventListener('timeupdate', function () {
            if (typeof _gaq != 'undefined') {
                time = parseInt(player.getCurrentTime());
                currentInterval = timeInterval * counter;
                if (time > currentInterval) {
                    counter += 1;
                    _gaq.push(['_trackEvent',
                        player.options.googleAnalyticsCategory,
                        formatTime(currentInterval - timeInterval) + " - " + formatTime(currentInterval),
                        (player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle
                    ]);
                }
            }
        }, true);
    }
});

3 thoughts on “MediaElementJS with Google Analytics Integration

    • Sorry, I wasn’t notified of you comment. Did you ever get this working? I believe that you need to include it after the plugin and it should work for the most part — as long as the MediaElementJS and Youtube APIs haven’t changed.

  1. This content is very informative but it took me a long time to
    find it in google. I found it on 19 spot, you should focus
    on quality backlinks building, it will help you to rank
    to google top 10. And i know how to help you, just type in google
    - k2 seo tips and tricks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>