1. 前言

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

2. 目录构造

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

图 2-1 Web JS SDK 的源码目录
各文件介绍如下：
sensorsdata.full.js：原生 JavaScript 语言的 SDK 未压缩源码；
sensorsdata.min.js：原生 JavaScript 语言的 SDK 压缩源码；
sensorsdata.amd.full.js：AMD 模块依赖形式的 SDK 未压缩源码；
sensorsdata.amd.min.js：AMD 模块依赖形式的 SDK 压缩源码；
sensorsdata.es6.full.js：es6 规范形式的 SDK 未压缩源码；
sensorsdata.es6.min.js：es6 规范形式的 SDK 压缩源码；
heatmap.full.js：原生 JavaScript 语言的 SDK 热力求性能未压缩源码，渲染网页热力求和触达图；
heatmap.min.js：原生 JavaScript 语言的 SDK 热力求性能压缩源码，渲染网页热力求和触达图；
vapph5define.min.js：App 内嵌 H5 页面可视化压缩源码；
vtrack.min.js：Web 网页可视化源码。

3. 数据流程

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

图 3-1 数据发送流程
SDK 采集的数据，会默认存储到发送队列中。发送队列会依照先进先出的模式逐条发送数据，保证数据发送的程序。
集成 SDK 的 H5 页面在 App 中，能够通过配置项将 H5 采集的数据上报给 App 端的 SDK（Android SDK 或 iOS SDK）。数据实时通过 WebView 中间层上报给 App 端，App 端能够对立用户标识和其余零碎属性字段。
另外，Web 页面采集常常会呈现切换页面时发送数据的场景。例如：点击某个按钮跳到了新的页面。此时，采集该按钮的点击事件，就波及到页面跳转时对原页面代码容器的销毁，从而可能导致该点击事件未发送或者发送失败。
为了解决这一问题，通过调研测试发现：如果数据间接写入 localstorage 中，即便在切换页面时也能失常保留。因而，开发了批量发送模式：数据对立写入 localstorage 缓存，而后默认定时 6 秒或者数据量达到 6 条时集中发送一次，发送胜利后即从 localstorage 中删除。如果发送失败会持续保留，下次进行发送。

4. 架构解析

4.1 简介

Web JS SDK 致力于高效稳固地采集页面数据，这就须要一个稳固简洁的架构。同时，网页是基于浏览器运行的，浏览器自身并没有多少缓存性能。因而，Web JS SDK 的架构设计中数据默认是采集后立刻发送的，这与 App 端的 SDK 是不同的。

4.2 架构图

Web JS SDK 总体架构如图 4-1 所示：

图 4-1 Web JS SDK 总体架构示意图
上面，咱们对 Web JS SDK 架构进行具体的解释。

4.3 架构详解

4.3.1 配置模块

页面在引入 Web JS SDK 并进行初始化时，须要配置一些次要的配置项。代码示例如下：

<script>(function(para) {var p = para.sdk_url, n = para.name, w = window, d = document, s = ‘script’,x = null,y = null; w[‘sensorsDataAnalytic201505’] = n; w[n] = w[n] || function(a) {return function() {(w[n]._q = w[n]._q || []).push([a, arguments]);}}; var ifs = [‘track’,’quick’,’register’,’registerPage’,’registerOnce’,’clearAllRegister’,’trackSignup’, ‘trackAbtest’, ‘setProfile’,’setOnceProfile’,’appendProfile’, ‘incrementProfile’, ‘deleteProfile’, ‘unsetProfile’,’identify’,’login’,’logout’,’trackLink’]; for (var i = 0; i < ifs.length; i++) {wn] = w[n].call(null, ifs[i]); } if (!w[n]._t) {x = d.createElement(s), y = d.getElementsByTagName(s)[0]; x.async = 1; x.src = p; w[n].para = para; y.parentNode.insertBefore(x, y); }})({/ 配置项局部 / sdk_url: ‘ 在 github 下载新版本的 sensorsdata.min.js ‘, name: ‘sensors’, server_url:’ 数据接管地址 ’, heatmap: {// 是否开启点击图，default 示意开启，主动采集 $WebClick 事件，能够设置 ‘not_collect’ 示意敞开。clickmap:’default’, // 是否开启触达注意力图，not_collect 示意敞开，不会主动采集 $WebStay 事件，能够设置 ‘default’ 示意开启。scroll_notice_map:’not_collect’} / 配置项局部 /});sensors.quick(‘autoTrack’);</script>

简要介绍以上这些次要配置项：
sdk_url：配置 SDK 源码获取地址，举荐从 GitHub 下载源码到本地，该地址即可配置指向本地文件。或者应用 SDK 公布的 CDN 地址，例如：https://cdn.jsdelivr.net/npm/…；
name：SDK 初始化时，创立的 SDK 对象名。初始化后，即可应用该对象名，调用 SDK 的 API；
server_url：数据接管地址。即 SDK 采集的数据最终发往的地址；
heatmap：全埋点点击事件和页面停留事件是否采集的配置。通常点击事件开启采集，页面停留事件在须要剖析触达图时开启采集。

4.3.2 数据采集模块

数据采集模块提供主动和手动的形式来采集用户在 H5 页面上的行为数据，包含相干页面的预置属性，为最终的用户行为剖析和用户画像提供原始数据。具体而言，可分为以下几种形式：
代码埋点：在 SDK 初始化之后，对须要采集的行为数据，调用 track 接口埋点采集；
全埋点：无需开发工程师编写代码即可主动收集用户的行为数据，包含页面浏览事件、元素点击事件和页面停留事件；
可视化全埋点：通过可视化的形式，对网页上的可埋点元素创立新的埋点，并标识显示名或事件名。当用户在点击这些已标记的元素时，会主动采集标识的事件；
预置属性：埋点 SDK 主动采集的一些任何事件都须要携带的最根本的属性（例如屏幕宽高、页面地址、页面题目、前向地址等）。

4.3.3 数据存储模块

数据存储模块提供了对采集的数据进行缓存的性能。Web JS SDK 提供了以下几种数据存储模式：
队列模式：进入页面时，为了不影响失常页面的渲染和执行，通常举荐异步引入 SDK。而异步引入可能导致 SDK 尚未加载就须要采集数据，此时触发的数据就会进入页面队列中缓存。当初始化实现，会依照先进先出的模式从队列中将数据按程序发送。队列模式提供了两个性能：第一是缓存数据，第二是使数据能够依照失常的程序入库；
localstorage 模式：页面采集的数据，会先顺次存入 localstorage 中。localstorage 依照默认的每 6 秒或者数据每达到 6 条即集中发送一次数据。当数据发送失败时，并不会将 localstorage 中的数据删除，会再次发送，从而无效防止失落数据；
cookie：会在以后域名下存储一些用户标识数据、首日首次数据和公共属性等。默认存储在根域名的 cookie 下；
session：相干 sessionStorage 对于页面变量和属性的存储应用较少，目前常常应用的是 cookie。

4.3.4 数据发送模块

数据发送模块是将 Web JS SDK 采集的数据依照指定的形式发送到服务端。次要有以下几种发送形式：
队列发送：默认的发送形式，数据依照采集的程序顺次依据配置的数据接管地址发送到服务端。从技术上，能够抉择以下三种申请形式来发送：
image：图片发送也是默认的发送形式，创立一个 image 标签，将数据放在申请的 URL 中发送；
ajax：通过 ajax 异步 POST 申请将数据发送进来；
sendBeacon：这是一种较为高级的数据发送形式，次要用来解决敞开页面发送数据失落的问题，目前仅反对较新的浏览器版本。

发送给 App SDK：配置 App 与 H5 的买通模式，买通验证通过后，H5 页面 Web JS SDK 采集的数据会传递给 App SDK。而后，依照 App SDK 的数据发送形式，将数据发送到服务端；
localstorage 缓存发送：localstorage 缓存中存储了多条数据，通过 ajax 异步形式，将多条数据集中发送到服务端。

4.3.5 工具模块

因为 Web JS SDK 兼容性的要求很高，应用了 JavaScript 原生语法编写，所以须要创立工具模块。这里形象了很多工具办法来辅助整个 SDK 工作，包含：extend 办法、trim 办法、hashcode 办法、formatDate 办法等。工具办法除了实现必要的逻辑，次要还有一些不同浏览器以及不同浏览器版本的兼容解决和异样捕捉。工具模块是 Web JS SDK 的底层和根底，所有的数据采集和传输逻辑，都是由这些工具办法来帮忙实现的。

4.3.6 日志模块

集成 Web JS SDK 后，SDK 默认主动开启日志输入性能不便调试，能够在控制台看到以下日志示例：

每个数据采集详情，都会顺次通过日志模块打印在控制台中。调试的时候能够通过控制台日志，监控和调试每个数据采集的准确性。日志能够通过 show_log : false 配置来敞开，如果是线上正式环境，倡议敞开日志模块。日志模块能够无效地检测和验证埋点数据的正确性，尤其在集成埋点阶段，对照神策分析师设计的埋点计划，能够逐个进行比照每个埋点的具体数据采集状况，极大地提高了埋点工作的效率。

4.3.7 渲染模块

渲染模块包含点击图和触达图的渲染，这些性能集中在 heatmap.js 中。次要是将元素点击数据和页面停留事件，通过计算后将成果渲染在页面上，达到直观剖析数据后果的目标：
点击图：是将页面中访客的点击数据直观地渲染到页面上，能够间接看到页面中哪些元素被访客点击并且点击的比例是多少，以及点击都集中在哪些地位；
触达图：是页面有垂直滚动条时，来渲染访客浏览页面的深度数据。默认首屏页面展现的是 100%，页面越深，个别触达的访客占比也越小。

5. 总结

本文简要介绍了以后 Web JS SDK 的次要架构，后续还会对架构中的每个模块进行独自地剖析和阐明。
另外，随着客户需要的减少和技术的更新，Web JS SDK 的架构也会进行调整和优化。目前，打算将 Web JS SDK 中不同性能拆分成独立的组件，这样能够基于不同客户的需要，提供最精简的、组件化的 SDK。

文章起源：神策技术社区