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

Executing an asynchronous AJAX call when a link is clicked, and then following the link

本文关键字：链接 然后 调用 跟随 AJAX 执行 异步 单击      更新时间：2023-11-20

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

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

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

有没有一种方法可以使用<a>标签来获取真实链接的行为，拦截点击事件，与谷歌分析交互，然后在一小段延迟后正常关注链接（以确保数据通过），而不必重定向自己，也不必失去功能？

您可以使用event.preventDefault()来防止链接被跟踪：

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

使用新的HTML5标准，难道不能将<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帖子-点击表单提交后在谷歌分析中跟踪事件

相关文章：