跟踪脚本，如分析

Question

我想我可以制作类似谷歌分析脚本的东西。他们使用 javascript 来捕获数据并将其发送到给定的 URL。但我希望它不用 ajax 或 REST API。

到目前为止我发现了什么：

<script type="text/javascript">
var statsPage = 'http://www.uw-url.be/process.php';
var stats = {
    page: location.href,
    browser: 'ie',
    ip: '127.0.0.1',
    referral: 'google.com?search=test'
};
var params = $.param(stats);
alert(statsPage+'?'+params);
</script>

警报消息提供了我需要的一切，但问题是如何将这些数据发送到 statsPage URL？我在网上找到了一个小解决方案，但我不知道它是否可以......也许有更好的解决方案可以做到这一点，但我不知道......我在听你们的！

$('<img>', {
    src: statsPage + '?' + params
}).appendTo('body').remove()

还有别的... 如果我查看分析 javascript 代码，这完全是其他脚本。谁能解释一下它是如何工作的？

这里有一个例子：

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-49578310-1', 'auto');
  ga('send', 'pageview');

</script>

这里整件事的意思是每个人都可以在他们的网站上使用它。使用 AJAX 或 REST API 不可能简单地集成它。不是任何人都可以使用它。

对于我第一个发布的脚本，我还使用了 jquery ()。分析脚本不会。

编辑

我已经根据 Peter G 的回答构建了一个新代码。我不需要 jquery。这段代码是否足够安全使用？我为 p var 编写了一个函数：

function ca(c,o,n,t,e,t,u){return p={type:c,userid:o,gender:n}}

ca("pageview", "1", "male");

下面的整个脚本：

<script type="text/javascript">
var statsPage = 'http://www.my-url.com/response.php';

function ca(c,o,n,t,e,t,u){return p={type:c,userid:o,gender:n}}

ca("pageview", "1", "male");


var params = Object.keys(p).map(function(k) {
    return encodeURIComponent(k) + '=' + encodeURIComponent(p[k])
}).join('&')

const req = new XMLHttpRequest();
//req.addEventListener('load' /*callback after req is complete*/);
req.open('GET', statsPage + '?' + params);
req.send();

req.onreadystatechange = function() {
    if (req.readyState == XMLHttpRequest.DONE) {
        alert(req.responseText);
    }
}
</script>

如您所见，我在这里隐藏了 addEventListener。使用 this 和 that 有什么区别？

Answer 1

对 Google Analytics 使用的代码进行了一些检查（使用像 http://unminify.com/ 这样的 unminifier ...代码太长，无法在此处重现）表明大部分代码与确定要发送的内容有关，而不是与如何发送发送它。以下是关于他们如何发送的有趣部分：

// ...
    wd = function(a, b, c) {
        var d = O.XMLHttpRequest;
        if (!d) return !1;
        var e = new d;
        if (!("withCredentials" in e)) return !1;
        e.open("POST", a, !0);
        e.withCredentials = !0;
        e.setRequestHeader("Content-Type", "text/plain");
        e.onreadystatechange = function() {
            4 == e.readyState && (c(), e = null)
        };
        e.send(b);
        return !0
    },
    x = function(a, b, c) {
        return O.navigator.sendBeacon ? O.navigator.sendBeacon(a, b) ? (c(), !0) : !1 : !1
    },
// ...

O 是 window 对象。它们在页面加载时执行XMLHTTPRequest，并在页面关闭时使用navigator.sendBeacon 函数。如果您只想通过 Internet 发送数据，我建议使用 XMLHTTPRequest 方法，因为 navigator.sendBeacon 旨在在页面关闭时发送数据（因此页面在关闭时不会滞后，您将看页面加载没有区别）。如果您只想将数据作为 GET 请求发送，您可以执行以下操作（不过，您应该考虑重构，以便可以使用 POST 请求...）。

const req = new XMLHttpRequest();
req.addEventListener('load', /*callback after req is complete*/);
req.open('GET', statsPage + '?' + params);
req.send();

请注意，如果您不关心调用结果，则实际上不需要 addEventListener 回调。 Read more about XMLHttpRequest() here.

如果您请求的 URL 与您当前使用的 URL 不同并且您使用 addEventHandler 回调，您也可能会遇到 CORS 问题。 Read more on that on this SO page 认为它超出了这个问题的范围。