README.md



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


使用方法

先安装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端


里面有两个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


配置参数

主要参数有：定时采集频次，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（页面滚动）


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


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