网页埋点相关知识

埋点的需求：一个网站上线,开发者除了保证网站功能正常,体验优好之外,还有一项重要的工作是数据收集,通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求,导流方式是否有效,新功能上线后是否效果是否达到设计初衷,根据数据指引有效优化产品体验以及发现新的产品方向是产品经理的必备技能,而如何采集准确并且足够的网站数据则应该是开发者的责任.在大数据处理能力越来越强下,以及机器学习等依赖数据哺育的工具进化下,采集足够多的数据往往是网站向着良性方向进化的必备条件

埋点方案

ajax
img(优势：不占用ajax请求，天然支持跨域，执行无阻塞。)
script

常见工具

网站的数据采集有很多现成的工具,如google Analytics, 百度统计, 友盟+等,往往通过在页面上接入js SDK代码。

而在实际采集过程中,数据是如何传递过去的呢,,我们随便打开一个埋有百度统计的网站, 打开chrome的开发者工具,勾选Preserve log, 可以发现在页面点击一个链接或者做一些其他操作,在Networking tab下可以看到hm.gif的网络请求, 这里由于统计的数据发送涉及到第三方网址,涉及跨域问题,而图片请求天然是跨域的,所以业界的通用做法是构造一个空的gif用于向第三方网站, 而真正需要统计的参数往往是通过url进行传递。

数据采集(生成图片Url参数挂在?上)

基本的发送函数，创建Img发送统计请求导数据采集后台。

function sendUrl(url) {
    let img = new Image();  // 创建一个img对象
    let key = 'project_log_' // 为本次数据请求创建一个唯一id
        + Math.floor(Math.random() * 2147483648).toString(36); 
 
    window[key] = img;   // 用一个数组维护img对象
 
    img.onload = img.onerror = img.onabort = function () {
        img.onload = img.onerror = img.onabort = null;  // 清除img元素
        window[key] = null;
        img = null;  
    };
    img.src = url;  // img对象赋值url后自动发送请求,无需插入到页面元素中去
}

数据格式约定

1 2	数据格式规则,如:1.gif?q=xxx&fr=xxx&refer=xxx&p=xxxx&xxxxx q表示页面搜索词; fr表示页面的上游页面时什么, refer是指从来源页面, p表示事件类型等;

访问时长的计算

var st = new Date().getTime();  // 在页面加载运行js时记录当前时间

$(window).on('beforeunload', function () {
    var et = new Date().getTime();
    var stayTime = et - st;
    
}); // 在页面要unload触发'beforeunload'事件时进行时间差计算得到访问时长

// 需要用户在页面有过任何操作才会出现提示。每次都是打开接着就关闭进行测试，所以以为没用
window.onbeforeunload = function(){
    return "onbeforeunload is work";
}

关键指标

PV pageview

传统意义上每次页面刷新代表着一次新的pv, 也就是每次统计js执行时都+1, 而现在页面很多都用到了ajax技术来进行无刷新获取展现页面来替代翻页,如瀑布流页面通过下来加载新的页面,这时候页面不重新刷新,因此可以在ajax请求接口处进行埋点进行pv累加;

单项PV

页面上部分元素有单独统计pv的需要,有些页面元素不是页面展现都展现,或者需要统计类似于某一广告的展现次数,这种需要需要在url里单独定义参数来标识;

聚焦时间

与访问时长不同,由于页面可以通过tab切换导致虽然页面没有unload但实际处于失去焦点状态, 因此需要订阅focusIn与focusOut两个事件,在focusIn时开始计时, 在focusOut时停止计时,在页面unload时将focus时间进行累加得到聚焦时间;