使用 analytics.js 跟踪按钮的事件答案

【问题标题】：Event tracking a button with analytics.js使用 analytics.js 跟踪按钮的事件
【发布时间】：2014-06-23 14:48:19
【问题描述】：

我正在使用新的 GA analytics.js 来跟踪我的网站，触发效果很好。我正在尝试跟踪按钮的点击次数（链接到外部网站），确保它在新窗口中打开，以便我们有时间进行跟踪。

<button class="knapp" id="b2" onclick="window.open('https://site.com');" 
target="_blank" type="button">Text</button>

根据googles guidelines,，我现在可以用JS来追踪了。

因此，我更新了代码以匹配我的按钮 ID 和事件，然后将其放在我的标题中。

<script type="text/javascript">
var downloadLink = document.getElementById('b2');
addListener(downloadLink, 'click', function() {
ga('send', 'event', 'External_link', 'click', 'KL-FB');
});

function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>

但是，它根本不会触发。我在正常链接上有一个“正常”事件跟踪器，可以很好地触发，但从我在控制台中看到的情况来看，这甚至没有尝试。

【问题讨论】：

标签： google-analytics event-tracking analytics.js

【解决方案1】：

您的代码存在一些问题：

<head> 中的 addListener 函数在渲染元素 b2 之前运行。有几个选项可以解决这个问题：将脚本放在页面底部，在加载时调用附加代码，或者将其包装在 jQuery document.ready 中。上面有一个很好的stackoverflow post。
按钮上的内联onclick 事件在事件发送之前被触发。使用google analyticshitCallback 函数将用户发送到下一页 ga 收到事件。

看起来像这样：

<script type="text/javascript">
    var downloadLink = document.getElementById('b2');
    addListener(downloadLink, 'click', function() {
        ga('send', 'event', 'External_link', 'click', 'KL-FB', {
            'hitCallback': function(){
                document.location = 'https://site.com';
            }
        });
    });

function addListener(element, type, callback) {
 if (element.addEventListener) element.addEventListener(type, callback);
 else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>

【讨论】：

完美！非常感谢，也很抱歉没有考虑事情的顺序。