Javascript 跟踪脚本式分析

我想我可以做一些像谷歌分析脚本的东西。他们使用javascript捕获数据并将其发送到给定的URL。但我希望它不需要ajax或RESTAPI

到目前为止，我发现：

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

全文如下：

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

var statsPage=http://www.my-url.com/response.php';
函数ca（c，o，n，t，e，t，u）{返回p={type:c，userid:o，gender:n}
ca（“页面浏览”、“1”、“男性”）；
var params=Object.keys（p）.map（函数（k）{
返回encodeURIComponent（k）+'='+encodeURIComponent（p[k]）
}).join（“&”）
const req=new XMLHttpRequest（）；
//req.addEventListener（'load'/*req完成后的回调*/）；
请求打开（'GET'，statsPage+'？'+参数）；
请求发送（）；
req.onreadystatechange=函数（）{
if（req.readyState==XMLHttpRequest.DONE）{
警报（请求响应文本）；
}
}

---

如你所见，我已将addEventListener隐藏在这里。使用这个和不使用这个有什么区别？

对谷歌分析所用代码的一些检查（使用类似于……代码太长，无法在这里复制）表明，大多数代码都与确定发送什么有关，而不是与如何发送有关。以下是他们如何发送邮件的有趣部分：

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

是

窗口

对象。加载页面时，它们执行

XMLHTTPRequest

，关闭页面时，它们使用

navigator.sendBeacon

功能。如果您只想通过internet发送数据，我建议使用

XMLHTTPRequest

方法，就像

navigator一样。sendBeacon

用于在页面关闭时发送数据（因此页面关闭时不会延迟，您将不会看到页面加载上的差异）。如果您想做的是将数据作为GET请求发送，您可以执行以下操作（虽然，您应该考虑重构，这样您就可以使用POST请求代替…） 请注意，如果您不关心调用的结果，那么实际上并不需要

addEventListener

回调

---

如果您请求的URL与您所在的URL不同，并且您使用

addEventHandler

回调，那么您也可能会遇到CORS问题。因为它超出了这个问题的范围。

也只是一个提示，因为您似乎是新来的，如果这有助于您不要忘记单击绿色复选标记接受它。这样做你会得到一些分数（2）。如果我在开始时使用const req的最后一个代码，我想我必须使用jquery.param来序列化参数？或者可以在没有jquery的情况下获取/发布参数数组吗？可以在没有jquery的情况下序列化参数。序列化只是将它们转换为URL格式，如“example.com/page.html？param1=value1¶m2=value2”（在“？”后面的部分是URL格式的）。使用encodeURIComponent（字符串）获取此格式。抱歉，我花了一些时间才返回到此。您的

params

字符串不正确，我认为不正确。我用{lol:5，la:1}测试它，得到'lol=undefined&la=undefined'。另一件需要注意的事情是，在

函数ca（c，o，n，t，e，t，u）

中，第二个

t

不会做任何事情。如果使用

addEventListener

，它将触发回调，让您知道请求是否成功返回。你可能不需要这个来进行分析。同样，将来如果你有更多的问题，正确的做法是发布另一个问题（假设它不会重复）。这也有助于您获得更多的可见性。

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>

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

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