fe / YAS-jssdk

Go to a project
Y

YAS-jssdk

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

Star
1
HTTP
ed95226b Merge branch 'feature/hide-xianyu-download-bar' into 'master' · by shuaiguo

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

使用方法

先安装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. 当用户关闭浏览器，在浏览器端记录持久化，下次打开页面一并发送