用户信息及设备信息采集器

前言

是否还在为无法获取用户信息，无法收集设备信息而不停的码码码呢？现成的脚手架来了，地址：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

|
|

设备平台

DevicePLA

|
|

设备类型

Device

|
|

设备型号

DeviceVER

|
|

操作系统

|
|

操作系统版本

OSVersion

|
| | |
|

浏览器名称

Browser

|
|

浏览器版本

BrowserVER

|
| | |
|

应用ID

APPID

|
|

应用名称

APPName

|
|

应用版本

APPVER

|
| | |
|

URL

|
|

站点ID

SiteID

|
|

站点名称

SiteName

|
|

页面ID

PageID

|
|

页面名称

PageName

|
| | |
|

首次访问时间

CreateTime

|
|

用户信息及设备信息采集器