解析Google Analytics机制

前几天准备在这个博客上装一个Google Analytics插件,虽然我知道这里其实没有人访问的(人艰不拆)。然后我就非常好奇GA的原理,因为WebSocket才出来没多久,以前的异步信息到底是怎么传递的呢?按照我一贯的小猫钓鱼风格,我决定来一探究竟。
首先还是去找了Google Urchin的代码看,对Javascript的语法不太习惯,看得有点云里雾里。不过还是看出来一点端倪,就是Image。简单来说,在客户端JavaScript中new一个Image对象,然后指定它的src属性,可以引起浏览器对图片的动态加载。聪明的工程师们就是利用了这样一个特性(URL中包含的信息)最终实现的客户端信息的动态传递。听起来也是挺简单的,何不尝试做一个demo呢?
前面学过一点三脚猫水平的node.js,这里就选择用它了,毕竟几行代码就可以搞定。首先还是要做一个web页面,代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Advertise</title>

<script language = "JavaScript">
    var count = 0;
    function preloader()
    {
        var img = new Image();
        img.src = "beautiful.jpg";
        console.log("in preloader()");
    }
    function realtimeloader() {

        var img1 = new Image();
        img1.onload = printlog;
        img1.src = "http://127.0.0.1:3001/"+"compass.jpg" + "?" + "count=" + count;
        console.log("start loading image!")
        showtime();
        count += 1;
    }
    function printlog() {
        console.log("finish loading image!")
        showtime();
    }
    function showtime() {
        var myDate = new Date();  

        var minutes = myDate.getMinutes();     //获取当前分钟数(0-59)  
        var seconds = myDate.getSeconds();     //获取当前秒数(0-59)  
        var millseconds = myDate.getMilliseconds();    //获取当前毫秒数(0-999)  
        console.log(minutes + "分" + seconds + "秒" + millseconds + "毫秒");
    }
</script>
</head>
<body onLoad = "javascript:preloader()">
<h1>image cache</h1>
<h2>Imageshow<span id="latency"></span></h2>
    <a href="#" onMouseOver="javascript:realtimeloader() ">
    <img name="image" src = "ugly.jpg">
</body>
</html>

在页面的body中定义了一个超链接,当鼠标移动到这个超链接上时,就会触发执行realtimeloader()函数。在这个事件函数中,我们会新建一个Image并指定它的src,注意这里的count是为了避开浏览器缓存。没有count的话,浏览器就不会多次发送Get请求了。"http://127.0.0.1:3001/"是我们图片服务器的地址端口,相当于GA系统中的Google服务器。客户网站的服务器工作在3000端口,相当于嵌入GA代码的客户网站。服务器的代码如下(用express,简直不要太简单):

var express = require('express')
    , http = require('http')
    , path = require('path')

var app = express();

app.use(express.static('public'));

var server = http.createServer(app) 

server.listen(3000);

然后就是图片服务器(虽然图片不是我们的重点,在GA系统中图片也只是一个傀儡)的代码,如下:

var express = require('express')
    , http = require('http')
    , path = require('path')

var app = express();

app.use(function (req, res, next) {
    console.log(req.url);
    next();
});

app.use("/",express.static('public'));


var server = http.createServer(app) 

server.listen(3001);

在图片服务器这里,我们会把Get请求的URL打印出来,我们并没有对页面动态信息(count的值)进行进一步的分析和使用。然后就是测试和实验了。首先是访问服务器1(客户网站)的效果图:
server1
然后是服务器2(图片服务器)的日志输出:
server2

仅有1条评论 发表评论

  1. 荔乡根子GenZi.Win /

    统计系统也是用这方法。

发表评论