"用户互动策略平台" / 帮助文档 / 系统配置 / 数据采集 / H5数据采集
3.1.3 H5数据采集
(1)JS SDK接入 将我们提供给您的 JS SDK 加入到您所需要分析的页面,请将我们给您提供的 JS SDK 复制到
和 标签之间即可(其中1xxxx为您的项目ID), 例如:<script src="https://hook.touty.io/web/js?projectId=xxxxxx"> </script>
<script>
_tds && _tds.ready(function(props){
/* 打开页面事件 */
if(_tds){
_tds.push(,'page');
};
/* 对单页应用追踪 */
this.enableSpa();
})
</script>
成功加载SDK后"策略平台"会自动采集页面浏览量、元素点击量。
(2)关于ready函数
类似jquery的ready函数,当采集脚本加载完成后ready中的函数会被调用,对于SPA来说每次页面的切换也会被调用。
(3)接入您的用户ID
默认情况我们会根据设备信息来生成用户的唯一ID,但是我们也提供了ID Mapping的机制,帮助您正确地识别当前的用户,以提供更准确有效的数据。 您可以使用_tds.setId 来指定一个或多个ID,我们会自动在这些ID之间建立联系,完成页面用户与我们系统的身份合并。setId函数定义如下,您可以将此函数定义在push语句的下一行
_tds.setId:function(point,id)
第一个参数是指ID的类型,常用的如wechat, qq, mobile等等, 第二个参数表示ID的值,如用户的微信openId,QQ号,手机号等等,对于康师傅项目常用ID如下: 微信公众号openId,其中xxxxx为用户的实际openId: _tds.setId(“wechat”, “XXXXXX”)
微信unionId,其中xxxxx为用户的实际unionId: _tds.setId(“unionId”, “XXXXXX”)
具体使用方法如下:
<script src="http://hook.touty.io/web/js?projectId=xxxxx"></script>
<script>
if(_tds){
_tds.ready(function(props){
this.setId('wechat','xxxxxx')
this.push('page')
})
}
</script>
(4)自定义的用户行为(_tds.push)
虽然我们会自动记录用户的浏览和点击行为行为,但是有的时候为了对行为进行更准确的区分,您需要自己来指定行为的ID。
您可以通过_tds.push方法来实现。
_tds.push:function(event,objectId,props, name)
第一个参数event是指自定义行为类型,如page, click, form等等, 类型为string,可以根据您的数据结构与定义进行指定。 第二个参数objectId是自定义的事件属性,类型为object,如 {targetId: 'xxx', targetName: 'xxx'},表明用户行为发生的属性定义,其中targetId与targetName为必须字段。 第三个参数是对用户行为的名称描述,类型为string。 第四个参数是额外的自定义属性,类型为object。
具体使用方法如下:
假如我们有一个链接:
<a id="login" href="/login">登录</a>
捕获这个登录行为,比赋予自定义的ID和属性,我们可以这么做,如:
$('#login').click(function(){
if(_tds){
_tds.push('click', {
targetId: '12345',
targetName: '登录页面'
}, '用户登录', {username: '张三'});
}
});
我们也可以省略部分参数,如:
$('#login').click(function(){
if(_tds){
_tds.push('click');
}
});
此时用的是自动生成的objectId。
自定义行为事件属性(_tds.setProp)
如需自定义事件所携带的属性,可以使用_tds.setProp方法
$('#login').click(function(){
if(_tds){
_tds.setProp('button', '下载');
_tds.push('click');
}
});
(5)对单页应用的支持
单页应用需要调用 enableSpa 函数。
使用方法如下:
_tds && _tds.ready(function(props){
...
_tds.push('page');
_tds.enableSpa();
...
})