网页端数据采集的设计思路和规范

---

使用方法

先安装nodejs，可以到 这里。

git clone git@git.dev.yoho.cn:web/yas-jssdk.git
npm install spm -g
cd YAS-jssdk
spm install
spm build
cd dist/yas-jssdk/1.0.0
ls -l

注意如果需要设置采集系统的域名：/src/config.js修改。

module.exports =
{
  version :'1.0',
  yasPath : '/',
  yasDomain : document.domain,//采集系统域名
  yasImgDomain :'http://127.0.0.1:8080'//采集系统1px gif图片的域名
};

页面嵌码方式：

(
  function(w,d,s,j,f)
  {
     w['YohoAcquisitionObject'] = f;
     w[f] = function()
     {
       w[f].p = arguments;
     };
     var a=d.createElement(s);
     var m=d.getElementsByTagName(s)[0];
     a.async=1;
     a.src=j;
     m.parentNode.insertBefore(a,m);
  }
 )(window,document,'script','//cdn.yoho.cn/yas-jssdk/1.0.8/yas.js','_yas');//第一个参数是版本，第二个参数是appkey，第三个是用户ID，第四个是是否获取地理位置。
_yas(1*new Date(),'1.0','yohocn_web','21323231','geo');

appkey对应表

---

app_key	域名	备注
yohocn_web	www.yoho.cn	yoho!-集团官网-PCweb端
yohocn_m	www.yoho.cn	yoho!-集团官网-手机web端
yohocnold_web	www.yoho.cn/old	yoho!-潮流分享社区-Pcweb端
yohocnold_m	www.yoho.cn/old	yoho!-潮流分享社区-手机web端
yohobuy_web	www.yohobuy.com	yoho!有货-电商平台-PCweb端
yohobuy_m	m.yohobuy.com	yoho!有货-电商平台-手机web端
yohoboys_web	www.yohoboys.com	yoho!boys-男生潮流-PCweb端
yohoboys_m	www.yohoboys.com	yoho!boys-男生潮流-手机web端
yohogirls_web	www.yohogirls.com	yoho!boys-女生潮流-PCweb端
yohogirls_m	www.yohogirls.com	yoho!boys-女生潮流-手机web端
yohoshow_web	app.yohoshow.com	yoho!show-物趣分享-PCweb端
yohoshow_m	app.yohoshow.com/mobile.html	yoho!show-物趣分享-手机web端
yohood_web	www.yohood.cn	yohood-潮流嘉年华-Pcweb端
yohood_m	www.yohood.cn	yohood-潮流嘉年华-手机web端
yohoblk_web	www.yohoblk.com	yohoblk-高端有货-PCweb端
yohoblk_m	m.yohoblk.com	yohoblk-高端有货-手机app端

里面有两个js，一个是压缩过的，一个是没有压缩的debug版本

项目命名

YAS (YOHO! Acquisition System) YOHO!采集系统的前端js的开发包，用于在网页端采集信息（应用信息，用户信息，用户行为信息，浏览器及其系统信息）。

概述

浏览器端的数据采集的嵌码，主要是两种：一种是通过JS生成cookies作为访客唯一标示，通过JS的能力获取网页端的一些数据，定时发起Ajax请求或者img图片，异步发送数据到服务端，在一些不支持JS的客户端采用嵌入一个透明1像素图片，在打开图片时被动的发起获取图片的HTTP请求（中间可以加一些http的传参）。

第一种方式：可以通过JS采集的内容和频次较为丰富和灵活。

第二种方式：只能通过图片的请求在服务端进行对HTTP的解析获取有限的内容。

使用场景

这两种的使用场景:分别是浏览器和不解析JS的邮件客户端。

关于嵌入图片

图片采集方式：客户端实现较为简单，只需要嵌入一个 <img src="http://a.yoho.cn/a.gif"/> 即可,不在本项目重点实现的内容，需要服务端获取get请求的自定义参数以及http headers，按照一定格式存储即可。

JS嵌码部分，百度和谷歌传参规范

百度：http://hm.baidu.com/hm.gif?cc=1&ck=1&cl=24-bit&ds=1920x1080&ep=55400151%2C12430&et=3&fl=16.0&ja=1&ln=zh-CN&lo=0&lt=1421118345&nv=0&rnd=110278964&si=c816cea5705c8a8d992e813549e4780f&st=4&v=1.0.75&lv=2&u=http%3A%2F%2Fwww.yohoboys.com%2Fwhatever-cn-zh-hk-web.html

cc:1

ck:1//是否支持cookies

cl:24-bit //色彩深度

ds:1920x1080 //屏幕尺寸

ep:55400151,12430 //页面载入时长

et:3

fl:16.0//flash版本

ja:1

ln:zh-CN //语言

lo:0

lt:1421118345//首次访问时间

nv:0

rnd:110278964//随机数

si:c816cea5705c8a8d992e813549e4780f//统计ID

st:4

v:1.0.75//监控代码版本

lv:2

u:http://www.yohoboys.com/whatever-cn-zh-hk-web.html//url

GA：http://www.google-analytics.com/r/collect?v=1&v=j32&a=842371998&t=pageview&_s=1&dl=http%3A%2F%2Fwww.yohoboys.com%2Fwhatever-cn-zh-hk-web.html&ul=zh-cn&de=UTF-8&dt=Yoho!Boys%20%7C%20We%20love%20to%20Play%20%26%20Learn&sd=24-bit&sr=1920x1080&vp=1903x955&je=1&fl=16.0%20r0&u=MACAAEQBI~&jid=2128925385&cid=1603005881.1414387412&tid=UA-52595809-1&_r=1&z=1237056998

v:1

_v:j32

a:842371998

t:pageview//跟踪类型

_s:

dl:http://www.yohoboys.com/whatever-cn-zh-hk-web.html//url

ul:zh-cn//语言

de:UTF-8 //编码

dt:Yoho!Boys | We love to Play & Learn //title

sd:24-bit //屏幕色彩深度

sr:1920x1080 //屏幕尺寸

vp:1903x955 //实际可视尺寸

je:1

fl:16.0 r0//flash版本

_u:MACAAEQBI~

jid:2128925385

cid:1603005881.1414387412//统计访客ID

tid:UA-52595809-1//跟踪ID

_r:1

z:1237056998

根据现有数据分析嵌码，我们需要实现什么？

这个SDK主要用于web页面的浏览器或客户端的数据采集，包含应用信息，用户信息，浏览器及其系统信息

应用数据（Appliaction Info）可以采集的项：

---

名称	说明	缩写
appKey	应用key	ak
vid	访问ID	vd
cookie flag	是否是新访客	ckf
host	主机名	h
port	端口	p
url	链接	u
loadFinishTime	加载时长	ft
firstScreenTime	首屏加载时长	fst
abtest	abtest的字段	ab

用户信息（Customer Info）可以采集的项：

---

名称	说明	缩写
client_id	访客唯一标示	cd
uid	会员ID	ud
referer	来源	rf
lasttime	上次访问时间（暂不实现）	lt
mousePosition	鼠标位置（暂不实现）	mp
event	用户页面事件 （暂不实现）	op
scrollTop	页面滚动 （暂不实现）	st
timestamp	事件时间戳（暂不实现）	ts

浏览器信息（Browser Info）

---

名称	说明	缩写
screenWidthxscreenHeight	屏幕宽度x屏幕高度	sr
windowWidthxwindowHeight	窗口宽度x窗口高度	wr
screenDepth	屏幕色深	sd
language	语言	ln
systemversion	操作系统版本	sv
cookiesEnabled	cookies是否启用	ce
flashVersion	flash版本	fv
long	经度	lo
lat	维度	la

自定义跟踪

主要有两种方式：自定义调用方法和自定义页面元素标志属性

自定义调用方法传参列表<a href='aa' onclick="_yas.add('event/page','type/url','action','label','value')" > index </a>。

---

参数名	说明	范例
trackType	跟踪类型；event页面事件，page页面点击	event
input	输入类型，如果是event，设置类型，如果是page则是点击的链接或者标示输入	nav
action	动作	click
label	设置标签，统计维度	show
value	标签数值，统计值	prize

自定义用户信息跟踪

发送用户订制信息, 此方法提供给用户调用, 本方法不对参数合法性进行检查, 调用者自己保证。

主要有两种方式：自定义调用方法和自定义页面元素标志属性

自定义调用方法传参列表<a href='aa' onclick="_yas.sendCustomInfo(json, true)" > index </a>。

---

参数名	说明	范例
json	用户事件执行后, 页面是否停留当前页, 是可选参数, 默认是页面跳转	{pd: productId,fa: favorite}
flag	用户事件执行后, 页面是否停留当前页, 是可选参数, true表示停留，false表示跳转, 默认值是false, 取值是false时, 记录cookie, 待进入新页面后通过send方法将cookie中的事件记录发送并清空	false

用户鼠标信息跟踪

发送用户鼠标事件的位置, 此方法提供给用户调用, 本方法不对参数合法性进行检查, 调用者自己保证。

usage:

var button = document.getElementById('button'); button.onclick = function(e){ _yas.sendMouseEvent(e); }

---

参数名	说明	范例
e	用户事件执行后, 页面是否停留当前页, 是可选参数, 默认是页面跳转	event
flag	用户事件执行后, 页面是否停留当前页, 是可选参数, 默认是页面跳转, true表示停留，false表示跳转, 默认值是false, 取值是false时, 记录cookie, 待进入新页面后通过send方法将cookie中的事件记录发送并清空	false

配置参数

主要参数有：定时采集频次，SDK版本信息，采集应用跟踪编码

(
  function(w,d,s,j,f)
  {
     w['YohoAcquisitionObject'] = f;
     w[f] = function()
     {
       w[f].p=arguments;
     };
     var a=d.createElement(s);
     var m=d.getElementsByTagName(s)[0];
     a.async=1;
     a.src=j;
     m.parentNode.insertBefore(a,m);
  }
 )(window,document,'script','//127.0.0.1:8000/dist/yas-jssdk/1.0.8/yas.js','_yas');

_yas('1.0.8','ds6das2kkj','21323231');

发送采集数据的方式：

Ajax方式和img标签方式，Ajax主要用于用户行为数据收集，img方式的第一次记录应用信息，访客标示，浏览器信息。

一次性发送信息：浏览器信息（Browser Info），应用数据（Appliaction Info）， 部分用户信息

• viewId（当次访问页面的ID）
• client_id（访客唯一标示）
• uid（会员ID）
• referer（来源）
• lasttime（上次访问时间）

定时发送信息：(后续实现)

自定义跟踪信息,部分用户信息

• viewId（当次访问页面的ID）
• mousePosition（鼠标位置）(后续实现)
• event（用户页面事件）
• scrollTop（页面滚动）

定时采集频次 (后续实现)

1. 默认30s发送一次用户数据
2. 当用户打开页面发送一次请求，同时记录用户数据
3. 当用户关闭浏览器，在浏览器端记录持久化，下次打开页面一并发送