技术篇:前端数据之美如何展示?

  • 首次点击时间:同上,但是只统计用户的第一次点击,如果该时间偏大,是否就表明页面很卡导致用户长时间不能点击呢?
  • 点击热力图:根据用户点击的位置,我们可以画出整个页面的点击热力图,可以很直观的了解到页面的热点区域
  • 4、异常

    这里的异常是指 JS 的异常,用户的浏览器上报 JS 的 bug,这会极大地降低用户体验,对于浏览器型号、版本满天飞的今天,再 NB 的程序员也难免会有擦枪走火的时候,当然 QA 能够覆盖到大部分的 bug,但肯定也会有一些 bug 在线上出现。JS 的异常捕获只有两种方式:window.onerror、try/catch,关于我们是如何做的将在后续的文章中有详细的描述,这里只列出捕获到异常时,一般需要采集哪些信息(主要用来 debug 异常):

    • 异常的提示信息:这是识别一个异常的最重要依据,如:’e.src’ 为空或不是对象
    • JS 文件名
    • 异常所在行
    • 发生异常的浏览器
    • 堆栈信息:必要的时候需要函数调用的堆栈信息,但是注意堆栈信息可能会比较大,需要截取

    5、其他

    除了上面提到的 4 类基本的数据统计需求,我们当然还可以根据实际情况来定义一些其他的统计需求,如用户浏览器对 canvas 的支持程度,再比如比较特殊的 — 用户进行轮播图翻页的次数,这些数据统计需求都是前端能够满足的,每一项统计的结果都体现了前端数据的价值。

    如何采集?

    在前端,通过注入 JS 脚本,使用一些 JS API(如:!!window.localStorage 就可以检验浏览器是否支持 localStorage)或者监听一些事件(如:click、window.onerror、onload 等)就可以得到数据。捕获到这些数据之后,需要将数据发送回服务器端,一般都是采用访问一个固定的 url,把数据作为该 url 的 query string,如:http://www.baidu.com/u.gif?data1=hello&data2=hi

    在实践的过程中我们抽离了一套用于前端统计的框架alog,方便开发者书写自己的统计脚本,具体的使用方法和 API 见github。下面就使用 alog 来简单说明如何进行前端数据的采集:

    例如:你需要统计页面的 PV,顺便加上页面来源(refer)

     

    // 加载 alog,alog 是支持异步的void function(e,t,n,a,o,i,m){e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l||+new Date,i=t.