javascript - 像分析一样的跟踪脚本

Question

我发现我可以制作类似 Google 分析脚本的东西。他们使用 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。使用这个和不使用那个有什么区别？

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 函数。如果您只想通过互联网发送数据，我建议使用 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看来这超出了这个问题的范围。