Question

我们的网页上有一个链接，我们要跟踪其使用情况。目前，它并不是真正的链接。它是一个<div>标记，其数据属性包含目标和绑定到它的点击处理程序。

点击后，我们会将数据发送到Google Analytics，然后在短暂延迟后使用window.location = url触发页面加载，这样我们就可以确定数据已经过了。

这种方法有效，但它有一个主要缺陷：可点击元素实际上不是一个链接，并且只是部分行为。例如，我无法使用鼠标滚轮单击它并在单独的选项卡中打开链接（正如您所期望的那样），或者我无法右键单击它并获得与上下文相关的菜单链接（因为它不是链接）。

有没有办法使用<a>代码并获取真实链接的行为，拦截点击事件，与Google Analytics互动，然后在一小段延迟后正常关注链接（以确保数据通过），而不必重定向自己，而不必失去功能？

Answer 1

您可以使用event.preventDefault()来阻止关注该链接：

$('a').click(function(e){ 
    e.preventDefault();
    var href = this.href;
    setTimeout(function(){
        window.location = href;
    }, 2000)
});

Answer 2

使用new HTML5 standards，您无法将<div>包裹在<a>标记中吗？然后你可以这样做：

内联：

<a href="yourawesomewebsite.com" id="gaEvent" target="_blank" onclick="_gaq.push(['_set', 'hitCallback', function(){window.location = this.href;}]); _gaq.push(['_trackEvent','category','action','label']);">
    <div id ="blah"></div>
</a>

jQuery的：

$('gaEvent').on('click', function(){
    _gaq.push(['_set', 'hitCallback', function(){
        window.location = url; // you'll still have to define this somewhere
    }]);

    _gaq.push(['_trackEvent','category','action','label']);
});

我完全引用了这篇SO帖子 - Track event in google analytics upon clicking form submit

单击链接时执行异步AJAX调用，然后执行链接

2 个答案: