数据统计之代码埋点

悠悠 2022-03-24 17:38 452阅读 0赞

# 一  引言 #

数据统计平台，一般由数据采集，数据处理，数据存储，数据可视化，数据分析等部分组成，其中数据采集与处理是重中之重，只有及时，高效，准确的获取数据信息，才能正确的了解一个网站，一个软件的使用情况，做出可靠决策。

数据采集，因各个公司需求不同，其实现亦有所差异，不过，大体上可分为三种方案：

1、代码埋点——即在目标页面或事件中添加一小段js代码，向后端脚本异步发出伪请求，以实现基础信息统计。该方案简洁方便，能实现基本需求，而且在市场上也有百度统计，友盟这样方便的三方服务商，是绝大多数公司采用方案。

2、可视化埋点——即通过可视化工具配置采集节点，在前端自动解析配置并上报埋点数据，从而实现所谓的“无痕埋点”， 代表方案是已经开源的Mixpanel；

3、无埋点——它并不是真正的不需要埋点，而是前端自动采集全部事件并上报埋点数据，在后端数据计算时过滤出有用数据，代表方案是国内的GrowingIO

数据处理，是指针对公司业务，指定需要存储的数据和对应数据格式，以实现数据有效，直观，易于分析。

数据存储，由于统计数据存储量大，不宜采用常规数据库来存储，可采用hadoop实现。

数据可视化，换个名词，报表系统，更易于理解，可采用echart等三方实现。

数据分析，运维人员需要注意的事了，为公司战略指向提供可靠数据支持。

# 二、代码埋点 #

## 2.1 基于百度统计 ##

第一步、注册或登录百度统计，并创建应用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70][]

第二步、获取代码，织入项目中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 3][]

第三步、检测代码是否安装成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 4][]

第四步、查看数据分析

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 5][]

## 2.2 自实现 ##

**步骤：**

1、通过浏览器内置javascript对象收集信息，如页面title（通过document.title）、referrer（上一跳url，通过document.referrer）【referrer 属性可返回载入当前文档的文档的 URL】、用户显示器分辨率（通过windows.screen）、cookie信息（通过document.cookie）以及一些公司需求信息(如用户信息，商品信息，访问接口等)。  
           2、创建一个最基本的发送统计的发送函数，用于创建img(实现跨域)，发送统计请求到数据采集平台（后台）。

3、解析http请求参数的信息，从服务器（WebServer）中获取一些客户端（前端）无法获取的信息，如访客ip等。然后将信息按格式写入log。最后生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif（可能需要在响应头中通过Set-cookie设置一些cookie信息）。

**代码：**

**1、js埋点代码**

**2、统计函数**

## ##

###      ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70]: /images/20220323/74293c84dd6e421f80a02def6c9bc144.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 1]: /images/20220323/36a1793cb2324c27b69f73e8d968e01e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 2]: /images/20220323/40bdf945ad3a453d8bac59f6188b4f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 3]: /images/20220323/e21cd1d85d794c098b8536ce35142e26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 4]: /images/20220323/2f18ec45f5404d54bb6242a920e6b1c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1ODEzNjUz_size_16_color_FFFFFF_t_70 5]: /images/20220323/4e48020a3db44381bcd5191ab407d505.png