使用 jQuery 跟踪 GA 事件(通用)

Question

我正在尝试在我的Wordpress网站上使用jQuery跟踪播放和暂停，该站点正在使用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

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

1. 由于 Wordpress.org CMS的奇怪之处，我必须在每次查找我的网站上使用jQuery()而不是$()- 不仅在代码开头，而且每次我需要在我的代码中进行查找时。使代码有点臃肿，但它有效！

2. 我的脚本没有对 MediaElement 执行任何操作.js最初是因为它是在创建任何 MEJS 元素之前加载的，因此，在我的 JS 代码被触发时它们不存在。为了解决这个问题，我找到了这个延迟技巧，它允许我将<script>元素排在行尾。很简单，我必须使用<script defer="defer">调用标头中的脚本。

3. 一旦我将基本脚本运行并触发结果输入我的控制台，我就使用一个简单的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>

我希望这有助于其他人跟踪他们的播放和暂停。