How to track events on mediaelement.js with Google Analytics

问题

I'm using mediaelement.js for my audio player and I've been trying to track events in Analytics for weeks now to no avail. I know it comes with a plugin for Analytics but I haven't been able to get it to work.

Here's my html

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://icd10monitor.com/js/mediaelementplayer.min.css"     rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://icd10monitor.com/js/mediaelement-and-player.min.js"></script>
<style type="text/css">
#article-index,.pagenavcounter {display:none;}
</style>
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-32808206-2', 'icd10monitor.com');
    ga('send', 'pageview');
</script>
</head>
<body>

    <audio width="300" height="32" src="podcasts-ttt/TTT-03-25-14.mp3" type="audio/mp3"  controls="controls"></audio>
    <script>
        $('audio').mediaelementplayer({
            features:   ['playpause','progress','current','duration','tracks','volume','fullscreen','googleanalytics']
        });
    </script>
    <script type="text/javascript" src="mep-feature-googleanalytics.js"></script>
</body>
</html>

Here is the JavaScript for the Analytics plugin

(function($) {

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


$.extend(MediaElementPlayer.prototype, {
buildgoogleanalytics: function(player, controls, layers, media) {

    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
            ]);
        }
    }, 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
            ]);
        }
    }, false);  

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


    media.addEventListener('timeupdate', function() {
        if (typeof _gaq != 'undefined') {
            _gaq.push(['_trackEvent', 
                player.options.googleAnalyticsCategory, 
                player.options.googleAnalyticsEventEnded, 
                player.options.googleAnalyticsTime,
                (player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle,
                player.currentTime
            ]);
        }
    }, true);

}
});

})(mejs.$);

Any ideas what I might be doing wrong?

回答1:

It looks like mep-feature-googleanalytics.js contains the Google Analytics Classic Analytics (ga.js) code, and your Google Analytics code is Universal Analytics (analytics.js).

What you need to do in the mep-feature-googleanalytics.js is update the event syntax. I'll give you an example of how to do it for the play event:

media.addEventListener('play', function() {
    if (typeof ga != 'undefined') {
        ga('send', 'event', 
            player.options.googleAnalyticsCategory, 
            player.options.googleAnalyticsEventPlay, 
            (player.options.googleAnalyticsTitle === '') ? player.currentSrc : player.options.googleAnalyticsTitle
        );
    }
}, false);

来源：https://stackoverflow.com/questions/22967620/how-to-track-events-on-mediaelement-js-with-google-analytics

标签

javascript

google-analytics

mediaelement.js