前端埋点原理3

步骤一安装埋点js

hm.js部分源码如下：

window._hmt = {

　　id: c.id,

　　cmd: {},

　　push: function() {

　　for (var a = window._hmt, b = 0; b < arguments.length; b++) {

　　　　var d = arguments[b];

　　　　e.d(d, "Array") && (a.cmd[a.id].push(d),

　　　　"_setAccount" === d[0] && (1 < d.length && /^[0-9a-f]{31,32}$/.test(d[1])) && (d = d[1],

　　　　a.id = d,

　　　　a.cmd[d] = a.cmd[d] || []))

　　}

}

},

window._hmt.cmd[c.id] = [],

window._hmt.push.apply(window._hmt,a)                    
window._hmt.push.apply(window._hmt, a)

手动埋点代码如下：

_hmt.push(['_trackEvent', '系统设置-公车管理', '公车列表-点击删除车辆', '删除车辆']);

结合手动埋点的方法可以知道_hmt中保存的用户行为数据

步骤二收集用户行为数据，部分代码如下：

b.push("r=" + encodeURIComponent(document.referrer));

 

 document.addEventListener("DOMContentLoaded", g, x),

 window.addEventListener("load", a, x);

步骤三即将用户行为数据发送给后端服务

从上图可以分析出，有个图片请求，地址为hm.baidu.com/hm.gif，js源码中很容易就知道这是在将用户行为数据伪造成图片在给后端发请求

源码如下：

  
h.t = {
    gc: "http://tongji.baidu.com/hm-web/welcome/ico",
    Ja: "hm.baidu.com/hm.gif"
}

var d = mt.ob
    , t = h.ga
    , k = h.t
    
j: function(a) {
    if (this.Za) {
        var b = this;
        b.b.rnd = Math.round(Math.random() * k.Z);
        b.b.r = g.orientation;
        b.b.ww = g.rb;
        y.L("stag-b");
        var e = k.ma + "//" + k.Ja + "?" + b.mb();
        y.L("stag-d");
        b.vb(e);
        d.log(e, function(d) {
            b.jb(d);
            f.d(a, "Function") && a.call(b)
        })
    }
},

mt.ob.log = function(a, b) {
    var d = new Image
      , e = "mini_tangram_log_" + Math.floor(2147483648 * Math.random()).toString(36);
    window[e] = d;
    d.onload = function() {
        d.onload = w;
        d = window[e] = w;
        b && b(a)
    }
    ;
    d.src = a
}

参考：https://blog.csdn.net/lucky541788/article/details/03795942