Skip to content

drafish/dc-sdk-js

Repository files navigation

dc-sdk-js ——一个基于浏览器环境的数据采集SDK

功能点

  • 设备信息采集
  • 监听页面加载离开
  • 监听hash变化
  • 监听页面点击
  • 监听标签页隐藏显示
  • 轮询发送热力图采集数据
  • 轮询采集页面特定信息(以手机号为例)

以上功能都是精简后的,只作为demo展示,实际使用需要自身的业务场景酌情添加代码。

解决开发痛点

  • 用webpack打包代码,支持模块化开发
  • 用core-js提供pollyfill环境,支持es6语法
  • 用eslint+standard规范代码风格,提升代码可读性和可维护性
  • 提供了完善的测试页面,方便开发调试

浏览器支持

所有现代浏览器 和 IE8+.

技术栈思维导图

avatar

项目结构

.
+-- 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)

参考项目

License

MIT