如何在重定向时使用jQuery跟踪链接并将其发布到服务器而不会取消?

时间:2018-10-21 07:18:34

标签: javascript ajax analytics

我们正在构建跟踪工具,并且希望在我们的网站上跟踪CTA。

这是代码:

<script type="text/javascript">
   var $ = jQuery;         
   $("a").click(function () {
            var link = $(this);
            var href = link.attr('href');
            var noProtocol = href.replace(/http[s]?:\/\//, '');
            $.ajax({
                type: 'GET',
                url: 'https://ipinfo.io/json?token=369f3980fa1a62',
                success: function (response) {
                    $.ajax({
                        type: 'POST',
                        url: 'https://myserver.com/api/events',
                        headers: {},
                        crossDomain: true,
                        data: JSON.stringify({
                            'distinct_id': '',
                            'name': 'button_clicked',
                            'page': noProtocol,
                            'domain': document.domain,
                            'referrer': document.referrer,
                            'ip_address': response.ip,
                            'region': response.region,
                            'postal': response.postal,
                            'location': response.loc,
                            'country': response.country,
                            'city': response.city

                        }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            //do nothing
                            console.log(msg);
                        }
                    });
                }
            });
        });

</script>

当某人单击该链接时,它开始发布到我们的服务器,但是由于标签重定向页面,因此该请求被取消。如何避免此请求被取消?

1 个答案:

答案 0 :(得分:1)

您可以做的一件事是劫持所有链接并以某种方式重写它们,从而必须调用一个最终进行重定向的函数。

<a href="/dashboard">Dashboard</a>

成为类似

<a href="#" data-href="/dashboard">Dashboard</a>

</body>之前的所有HTML元素之后添加脚本

(function() {
    // Do your element manipulation here
})();

然后,您可以使用a为所有data-href标签创建一个onClick事件,您可以在其中跟踪然后最终重定向。

var elements = document.querySelectorAll(a[data-href]);

elements.forEach(function(elemement) {
    elemement.addEventListener("click", function(e) {
        // Do something cool here
    });
});