如何使用Google Analytics跟踪mediaelement.js上的活动 [英] How to track events on mediaelement.js with Google Analytics
问题描述
我为我的音频播放器使用mediaelement.js，并且我一直试图在Google Analytics中跟踪几周的事件，但无济于事。我知道它附带Google Analytics插件，但我一直无法实现它。
这是我的html
<！DOCTYPE html>
< html>
< head>
< link type =text / csshref =http://icd10monitor.com/js/mediaelementplayer.min.css =stylesheet/>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js>< / script>
< script type =text / javascriptsrc =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>
< script>
$（'audio'）。mediaelementplayer（{
特性：['playpause'，'progress'，'current'，'duration'，'tracks'，'volume'，'fullscreen'，' googleanalytics']
}）;
< / script>
< script type =text / javascriptsrc =mep-feature-googleanalytics.js>< / script>
< / body>
< / html>
以下是Analytics插件的JavaScript
< pre $ （函数（$）{
$ .extend（mejs.MepDefaults，{
googleAnalyticsTitle：'Podcast'，
googleAnalyticsCategory： 'Audio'，
googleAnalyticsEventPlay：'播放'，
googleAnalyticsEventPause：'暂停'，
googleAnalyticsEventEnded：'已结束'，
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）;
$ b 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 $ b $））;
}
}，true）;
}
}）;
}）（mejs。$）;
任何想法我可能做错了什么？
它看起来像 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）;
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?
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);
这篇关于如何使用Google Analytics跟踪mediaelement.js上的活动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
