background image

MediaElementJS with Google Analytics Integration

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 views shared on this article. Join in...

  1. Matt says:

    I can’t seem to get this to work. Can you tell me the load order or any configuration details? Thanks.

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

  2. Dewayne says:

    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 *

Comment

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