使用 jQuery 跟踪 GA 事件（通用）

Question

我正在尝试在 my Wordpress site 上使用 jQuery 跟踪播放和暂停，该 my Wordpress site 使用 mediaElement.js 来处理音频播放器。我研究了这个并找到了我认为的答案，但我仍然无法触发 ga() 函数！

我的代码如下：

jQuery(document).ready(function($) {
   //Tracking MediaElement Plays
   $('body').on('click', '.mejs-play', function() {
     ga('send', 'event', 'Audio', 'Play', 'Audio Played');
   });
});

单击分配了此 class 的元素时，我没有从 GA 实时报告中收到任何响应。

知道我做错了什么吗？

Answer 1

您的 jQuery 实施有问题。当我在控制台中输入类似 $(window) 的内容时，我看到一个错误：

TypeError: $ is not a function

Answer 2

好的，我想我自己解决了这个问题。有几个因素是造成这种特殊情况的关键：

由于 Wordpress.org CMS 的古怪之处，我必须使用 jQuery() 而不是 $() 来进行我网站上的每次查找 — 而不仅仅是在代码的开头，但每次我需要在我的代码中进行查找时。生成了一些臃肿的代码，但它确实有效！
我的脚本最初对 MediaElement.js 没有做任何事情，因为它是在创建任何 MEJS 元素之前加载的，因此，它们在我创建时不存在JS 代码被触发。为了解决这个问题，我发现 this defer trick 允许我在行尾 queue 增加我的 <script> 元素。很简单，我必须使用 <script defer="defer">.
一旦我的基本脚本运行并在我的控制台中触发结果，我使用一个简单的 if () {} else {} 语句结合 .hasClass() 来区分播放和暂停。

插入我网站 header 的最终结果效果非常好！在这里：

<script defer="defer">
//Tracking MediaElement Plays and Pauses
jQuery(window).load(function() {
  jQuery('.mejs-playpause-button').click(function() {
    if (jQuery(this).hasClass('mejs-play')) {
      ga('send', 'event', 'audio', 'play audio', 'audio played');
    } else {
      ga('send', 'event', 'audio', 'pause audio', 'audio paused');
    }
  });
});
</script>

我希望这可以帮助其他人跟踪他们的播放和暂停。

使用 jQuery 跟踪 GA 事件（通用）

Using jQuery to track GA Events (universal)

javascript

wordpress

jquery

google-analytics

event-tracking