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。使用或不使用它有什么区别？

Answer 1

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

// ...
    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

如果您请求的网址与您所在的网址不同，并且您使用addEventHandler回调，则可能会遇到CORS问题。 Read more on that on this SO page看到它超出了这个问题的范围。

跟踪脚本，如分析

1 个答案: