Question

我正在尝试使用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');
   });
});

当我点击分配了此类的元素时，我没有收到GA实时报告的任何回复。

知道我做错了吗？

Answer 1

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

TypeError: $ is not a function

Answer 2

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

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

插入我网站标题的最终结果非常有效！这是：

<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事件（通用）

2 个答案: