Web JS SDK 架构解析 | 数据采集

一、前言

神策分析 Web JS SDK[1]，是一款轻量级用于 Web 端和 H5 端的数据采集埋点 SDK，包含代码埋点、全埋点、可视化全埋点、点击图、触达图、跨域用户打通和弹窗推送等功能。基于 JavaScript 原生语言编写，兼容 Chrome、Firefox、IE(IE6 +)等所有主流浏览器，并提供不同模式的源码，包括 AMD 模块依赖的 amd.js 源码文件和 ES6 标准的 es6.js 源码文件。

二、目录结构

Web JS SDK 的源码是独立的 JS 文件，目录如图 2-1 所示：

图 2-1 Web JS SDK 的源码目录

各文件介绍如下：

1. sensorsdata.full.js：原生 JavaScript 语言的 SDK 未压缩源码；

2. sensorsdata.min.js：原生 JavaScript 语言的 SDK 压缩源码；

3. sensorsdata.amd.full.js：AMD 模块依赖方式的 SDK 未压缩源码；

4. sensorsdata.amd.min.js：AMD 模块依赖方式的 SDK 压缩源码；

5. sensorsdata.es6.full.js：es6 标准方式的 SDK 未压缩源码；

6. sensorsdata.es6.min.js：es6 标准方式的 SDK 压缩源码；

7. heatmap.full.js：原生 JavaScript 语言的 SDK 热力图功能未压缩源码，渲染网页热力图和触达图；

8. heatmap.min.js：原生 JavaScript 语言的 SDK 热力图功能压缩源码，渲染网页热力图和触达图；

9. vapph5define.min.js：App 内嵌 H5 页面可视化压缩源码；

10. vtrack.min.js：Web 网页可视化源码。

三、数据流程

Web JS SDK 主要是采集页面的数据，并持续稳定地将数据发送到神策分析服务端。主要的数据发送流程如图 3-1 所示：

图 3-1 数据发送流程

SDK 采集的数据，会默认存储到发送队列中。发送队列会按照先进先出的模式逐条发送数据，保证数据发送的顺序。

集成 SDK 的 H5 页面在 App 中，可以通过配置