前言
是否还在为无法获取用户信息，无法收集设备信息而不停的码码码呢？现成的脚手架来了，地址：https://github.com/LiuLingyang/collector，食用方式请阅读README.md。
思路介绍
俗话说的好，最珍贵的不是代码本身，而是它的实现思路（不知道是谁说的）。总之先上图再说话。
image
依步骤解析：
1.用户访问合作站点页面；
2.页面打开时，会加载xxx.js文件；
3.xxx.js文件在客户端生成一个隐藏的iframe；
4.iframe与宿主机通讯，获取宿主机的基本信息，以及帆布指纹信息；
5.iframe将获取的信息传入自己的服务器。
*这里的xxx.js就是项目中的collector.bundle.js。
*引入iframe主要是为了解决跨应用之间的数据收集，如果你只是单应用，collector.bundle.js就已经够了（但这需要你手动去修改一些代码，兼容性做的不好）。
信息获取流程
同一用户同一设备的再次访问，我们自然不希望重新去获取这些重复的信息。第一次访问后我们会要求后台返回一个uuid给前端，而我们将其存入localStorage中。同一用户的后续访问我们只关注其变化的部分。完善的信息获取流程如下图所示：
image
*本项目只做了localStorage的判断，如果有需求，可以自行fork。
*帆布指纹和userAgent的解析都已经集成，无需做多余的工作。但应用信息的获取需要在客户端页面自行埋入节点，获取方式也可以多种多样。本项目是通过dom操作拿的（简单粗暴有木有）。
结尾
本项目目前还是一个很龊的版本，后台api也没写（本人前端小白一枚，还写不了后台，惭愧），获取的信息也很有限。
目前能获取的信息：
|
帆布指纹
|
FingerPrint
|
|
UserAgent
|
UserAgent
|
|
设备平台
|
DevicePLA
|
|
设备类型
|
Device
|
|
设备型号
|
DeviceVER
|
|
操作系统
|
OS
|
|
操作系统版本
|
OSVersion
|
| | |
|
浏览器名称
|
Browser
|
|
浏览器版本
|
BrowserVER
|
| | |
|
应用ID
|
APPID
|
|
应用名称
|
APPName
|
|
应用版本
|
APPVER
|
| | |
|
URL
|
URL
|
|
站点ID
|
SiteID
|
|
站点名称
|
SiteName
|
|
页面ID
|
PageID
|
|
页面名称
|
PageName
|
| | |
|
首次访问时间
|
CreateTime
|
|
最近访问时间
|
LastTime
|
|
本次访问时间
|
Time
|
计划后续支持微信端信息获取：
|
经度
|
Longitude
|
|
纬度
|
Latitude
|
|
微信号
| |
|
用户名
|
Username
|
|
性别
|
Sex
|
|
信号
|
NetType（WIFI，4G）
|
|
…
|
…
|
网友评论