我将mediaelement.js用于我的音频播放器,而且我一直试图在Google Analytics中跟踪事件数周,但无济于事。我知道它带有一个用于分析的插件,但我还没有能够让它工作。
这是我的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>
以下是Google Analytics插件的JavaScript
(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.$);
任何想法我可能做错了什么?
答案 0 :(得分:2)
看起来mep-feature-googleanalytics.js
包含Google Analytics经典分析(ga.js)代码,而您的Google Analytics代码是Universal Analytics(analytics.js)。
您需要在mep-feature-googleanalytics.js
中执行的操作是更新事件语法。我将举例说明如何为play
事件执行此操作:
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);