如何使用 Javascript 跟踪出站点击答案

【问题标题】：How To Track Outbound Clicks Using Javascript如何使用 Javascript 跟踪出站点击
【发布时间】：2017-10-20 15:02:04
【问题描述】：

我正在尝试使用此处提供的代码：Make a ping to a url without redirecting。 OP 已要求在不打开多个窗口的情况下 ping 一个 url。我想这样做，但我想实际访问第二个网址，以便在我的服务器分析中跟踪出站点击。

这是我正在尝试制作的代码：

<a href="javascript:;" onclick="visitPageX()">link</a>

function visitPageX() {
  // send Ajax request to the track URL
  setTimeout(function() {
    location.href = 'http://{pageXURL}';
  }, 300);
}

但是，我不明白应该将“跟踪网址”放在哪里。这是我的尝试：

<a href="javascript:;" onclick="visitPageX()"><a href="http://externalsite.com/">anchor text</a></a>

function visitPageX() {
  // send Ajax request to the track URL
  setTimeout(function() {
    location.href = 'http://externalsite.com/';
  }, 300);
}

我被困在哪里放

http://examplemysite.com/tracking.php?123

这样我就可以计算出站点击次数。如果您能帮助我使此代码正常工作或提供更好的解决方案来跟踪出站点击而不使用 Google Analytics，我将不胜感激。

非常感谢您的支持。

【问题讨论】：

标签： javascript php html ajax redirect

【解决方案1】：

为了简洁起见，此示例使用 jQuery。它也可以使用 vanilla javascript 编写。

这里我获取了跟踪 url 并将其作为数据属性添加到锚标记，以便各种链接可以轻松地具有不同的跟踪 url。我已经给锚定了一个 trackme 类，这是 javascript 知道如何将跟踪功能分配给特定的 <a> 标记的方式。

javascript默认会阻止加载href，直到ajax调用成功或失败，才会加载href。

<html>
<head>
<script src='https://code.jquery.com/jquery-3.2.1.js'></script>
<script type='text/javascript'>
$(document).on("click", ".trackme", function (e) {
    e.preventDefault(); // stop browser from going to href right away
    var finalURL = this.href;
    $.ajax({
        url: $(this).data("tracking-url"),
        success: function () {
            location.href = finalURL;
        },
        error: function () {
            location.href = finalURL;
        }
    });
});
</script>
</head>
<body>
<a href="http://google.com" data-tracking-url="http://examplemysite.com/tracking.php?123" class="trackme">anchor text</a>
<a href="http://yahoo.com" data-tracking-url="http://examplemysite.com/tracking.php?124" class="trackme">anchor text</a>
</body>
</html>

【讨论】：

我完全理解您的逻辑，并认为这将是一个很好的解决方案。我只是在使代码正常工作时遇到了一些麻烦。我将它放在我的标题中并将函数包装在<script type="text/javascript">function code</script> 中，对吗？
我应该把("tracking-url")改成("data-tracking-url")
我修复了 ajax url 中的一个错误，并将处理程序修改为在文档的 <head> 中感到满意
啊，非常感谢詹姆斯！它正在工作:-)我非常感谢你。将在第二天左右接受您的正确答案。希望很多人会同意这是一个很好的解决方案。如果有什么我能做的，请告诉我:-)
它也适用于1.12.4，需要在加载处理函数之前加载jquery，这就是我能想到的。还是你弄明白了？