如何使用 Google Analytics 跟踪 mediaelement.js 上的事件答案

【问题标题】：How to track events on mediaelement.js with Google Analytics如何使用 Google Analytics 跟踪 mediaelement.js 上的事件
【发布时间】：2014-04-09 15:44:26
【问题描述】：

我正在为我的音频播放器使用 mediaelement.js，并且我已经尝试在 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>

这是分析插件的 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.$);

任何想法我可能做错了什么？

【问题讨论】：

您正在混合使用经典分析和通用分析。您的网站使用 Universal Analytics 跟踪代码。 Analytics.js developers.google.com/analytics/devguides/collection/…

标签： javascript google-analytics mediaelement.js

【解决方案1】：

看起来mep-feature-googleanalytics.js 包含 Google Analytics Classic 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);

【讨论】：

抱歉，忘记包含 JavaScript。更新了我原来的帖子。我确实以这种方式设置了代码，但它仍然无法正常工作。
您使用的是gaq.push 语法而不是ga。再看看我的例子。