dc-sdk-js ——一个基于浏览器环境的数据采集SDK
功能点
- 设备信息采集
- 监听页面加载离开
- 监听hash变化
- 监听页面点击
- 监听标签页隐藏显示
- 轮询发送热力图采集数据
- 轮询采集页面特定信息（以手机号为例）
以上功能都是精简后的，只作为demo展示，实际使用需要自身的业务场景酌情添加代码。
解决开发痛点
- 用webpack打包代码，支持模块化开发
- 用core-js提供pollyfill环境，支持es6语法
- 用eslint+standard规范代码风格，提升代码可读性和可维护性
- 提供了完善的测试页面，方便开发调试
浏览器支持
所有现代浏览器 和 IE8+.
技术栈思维导图
项目结构
.
+-- server //服务端测试demo
+-- spa-angular //angular测试demo
+-- spa-react //react测试demo
+-- spa-vue //vue测试demo
+-- config //webpack配置
+-- src //项目源码
| +-- common //通用模块
| +-- config //配置模块
| +-- core //核心模块，业务代码都在这个目录下
| +-- interval //轮询相关业务代码
| +-- listener //监听相关业务代码
| +-- index.js //入口文件
| +-- params.js //封装了对请求参数的相关操作
| +-- sender.js //封装了ajax和websocket请求
+-- test //单元测试
+-- package.json
接入方式
(function() {
var collect = document.createElement('script');
collect.type = 'text/javascript';
collect.async = true;
collect.src = '/index.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(collect, s);
})();
var _XT = [];
_XT.push(['token','custom token']);
_XT.push(['channelCode','custom channelCode']);
_XT.push(['serverUrl', 'http://localhost:8081/api'])
_XT.push(['wsUrl', 'ws://localhost:8081'])配置说明
| 字段名称 | 类型 | 说明 |
|---|---|---|
| serverUrl | string | http服务端地址 |
| wsUrl | string | websocket服务端地址 |
| token | string | 用于服务端鉴权 |
| channelCode | string | 用于区分不同的业务方 |
| heatmapUrls | array | 热力图采集页面配置 |
| heatMapDelay | string | 热力图采集数据发送时间间隔 |
| phoneListDelay | string | 手机号轮询采集时间间隔 |
| iframe | string | iframe地址，用于跨域共享数据 |
采集字段说明
| 字段名称 | 类型 | 说明 |
|---|---|---|
| deviceType | string | 设备类型 |
| language | string | 浏览器语言类型 |
| screenHigh | string | 屏幕高度 |
| screenWide | string | 屏幕宽度 |
| type | string | 采集事件类型 |
| currentTime | number | 当前时间戳 |
| title | string | 当前页面标题 |
| url | string | 当前页面URL |
| referrer | string | 来源页URL |
| data | object | 采集事件的额外信息 |
| channelCode | string | 用于区分不同的业务方 |
| token | string | 用于服务端鉴权 |
| deviceId | string | 设备ID |
| userId | string | 用户ID |
安装依赖
npm install开发环境启动
npm run dev生产环境构建
npm run build
服务端启动
npm run server
单页应用构建
## angular
cd spa-angular
npm run build
## react
cd spa-react
npm run build
## vue
cd spa-vue
npm run build服务端测试demo
为方便开发环境调试，我用node写了一个简易的服务端项目，其中实现了以下功能点：
- http服务
- websocket服务
- 服务端渲染测试demo
- 单页应用测试demo（包括vue、react、angular）
参考项目
- https://github.com/bailinlin/web-sdk
- https://github.com/534591395/smart_web_data_sdk
- https://github.com/sensorsdata/sa-sdk-javascript