fe / YAS-jssdk · Commits

Go to a project

Authored by 周奇琪
Commit 0c9e995e122266a5aa18e572d97d03a760b9215d 1 parent 50b41b3e

add some vid content

Inline Side-by-side
Showing 1 changed file with 231 additions and 224 deletions
网页端数据采集的设计思路和规范
-------------
### 项目命名
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）可以采集的项：
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| host | 主机名 | h |
| port | 端口 | p |
| url |链接 | u |
| anchor | 锚点 | a|
| code | 编码 | c |
| loadFinishTime | 加载时长 | ft|
| title |标题 | dt|
#### 用户信息（Customer Info）可以采集的项：
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| client_id | 访客唯一标示 | cd
| uid | 会员ID | ud |
| referer | 来源 |rf|
| lasttime|上次访问时间|lt |
| mousePosition | 鼠标位置 | mp |
| event | 用户页面事件 | ev |
| scrollTop | 页面滚动 | st |
#### 浏览器信息（Browser Info）
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| screenWidthxscreenHeight | 屏幕宽度x屏幕高度 | sr |
| windowWidthxwindowHeight | 窗口宽度x窗口高度 | wr|
| screenDepth | 屏幕色深 | sd |
| language | 语言 | ln |
| browserVersion | 浏览器信息| bv |
| systemInfo |操作系统信息|sy|
| cookiesEnabled |cookies是否启用|ce|
| flashVersion | flash版本 | fv|
### 自定义跟踪
主要有两种方式：自定义调用方法和自定义页面元素标志属性
自定义调用方法传参列表` _yas.add('event/page','type/url','action','label','value') `。
----
| **参数名** | **说明** | **范例** |
|----|----|----|
| trackType | 跟踪类型；event页面事件，page页面点击| event|
| input | 输入类型，如果是event，设置类型，如果是page则是点击的链接或者标示输入| nav|
| action | 动作| click|
| label | 设置标签，统计维度 | show|
| value | 标签数值，统计值 | prize|
### 配置参数
主要参数有：定时采集频次，SDK版本信息，采集应用跟踪编码
```javascript
(
function(w,d,s,j)
{
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','//ya.yoho.cn/ya.js');
_yas(45,'1.0','ds6das2kkj');
```
### 发送采集数据的方式：
Ajax方式和img标签方式，Ajax主要用于用户行为数据收集，img方式的第一次记录应用信息，访客标示，浏览器信息。
一次性发送信息：浏览器信息（Browser Info），应用数据（Appliaction Info），
部分用户信息
> 1. client_id（访客唯一标示）
> 2. uid（会员ID）
> 3. referer（来源）
> 4. lasttime（上次访问时间）
定时发送信息：
自定义跟踪信息,部分用户信息
> 5. mousePosition（鼠标位置）
> 6. event（用户页面事件）
> 7. scrollTop（页面滚动）
### 定时采集频次
1. 默认30s发送一次用户数据
2. 当用户打开页面发送一次请求，同时记录用户数据
3. 当用户关闭浏览器，在浏览器端记录持久化，下次打开页面一并发送
### 关于session需要在服务端进行维护和记录
服务端根据客户端记录的访客标示，生成一个session会话，用于记录访问时长。
网页端数据采集的设计思路和规范
-------------
### 项目命名
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）可以采集的项：
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| tid|跟踪ID|td|
| vid|访问ID|vd|
| host | 主机名 | h |
| port | 端口 | p |
| url |链接 | u |
| anchor | 锚点 | a|
| code | 编码 | c |
| loadFinishTime | 加载时长 | ft|
| title |标题 | dt|
#### 用户信息（Customer Info）可以采集的项：
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| client_id | 访客唯一标示 | cd
| uid | 会员ID | ud |
| referer | 来源 |rf|
| lasttime|上次访问时间|lt |
| mousePosition | 鼠标位置 | mp |
| event | 用户页面事件 | ev |
| scrollTop | 页面滚动 | st |
#### 浏览器信息（Browser Info）
---------------
| **名称** | **说明** | **缩写** |
|----|----|----|
| screenWidthxscreenHeight | 屏幕宽度x屏幕高度 | sr |
| windowWidthxwindowHeight | 窗口宽度x窗口高度 | wr|
| screenDepth | 屏幕色深 | sd |
| language | 语言 | ln |
| browserVersion | 浏览器信息| bv |
| systemInfo |操作系统信息|sy|
| cookiesEnabled |cookies是否启用|ce|
| flashVersion | flash版本 | fv|
### 自定义跟踪
主要有两种方式：自定义调用方法和自定义页面元素标志属性
自定义调用方法传参列表`<a href='aa' onclick="_yas.add('event/page','type/url','action','label','value')" > index </a> `。
自定义页面元素标志属性`<a href='aa' _yas_trackType='event' _yas_input='nav' _yas_action='click' _yas_label='show' _yas_val='prize' >index</a>`
----
| **参数名** | **说明** | **范例** |
|----|----|----|
| trackType | 跟踪类型；event页面事件，page页面点击| event|
| input | 输入类型，如果是event，设置类型，如果是page则是点击的链接或者标示输入| nav|
| action | 动作| click|
| label | 设置标签，统计维度 | show|
| value | 标签数值，统计值 | prize|
### 配置参数
主要参数有：定时采集频次，SDK版本信息，采集应用跟踪编码
```javascript
(
function(w,d,s,j)
{
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','//ya.yoho.cn/ya.js');
_yas(45,'1.0','ds6das2kkj');
```
### 发送采集数据的方式：
Ajax方式和img标签方式，Ajax主要用于用户行为数据收集，img方式的第一次记录应用信息，访客标示，浏览器信息。
一次性发送信息：浏览器信息（Browser Info），应用数据（Appliaction Info），
部分用户信息
> * viewId（当次访问页面的ID）
> 1. client_id（访客唯一标示）
> 2. uid（会员ID）
> 3. referer（来源）
> 4. lasttime（上次访问时间）
定时发送信息：
自定义跟踪信息,部分用户信息
> * viewId（当次访问页面的ID）
> 5. mousePosition（鼠标位置）
> 6. event（用户页面事件）
> 7. scrollTop（页面滚动）
### 定时采集频次
1. 默认30s发送一次用户数据
2. 当用户打开页面发送一次请求，同时记录用户数据
3. 当用户关闭浏览器，在浏览器端记录持久化，下次打开页面一并发送
### 关于session需要在服务端进行维护和记录
服务端根据客户端记录的访客标示，生成一个session会话，用于记录访问时长。
... ...