- 全埋点相关参数配置
3.1. Web 元素点击
3.1.1. heatmap 相关参数,提供了对于 $WebClick 事件的自定义设置和处理。
heatmap 相关参数说明:
参数名 | 参数值说明 | 备注 |
clickmap | 是否开启点击图,默认 default 表示开启,可以设置 ‘not_collect’ 表示关闭。 | 需要 Web JS SDK 版本号大于 1.7。 |
scroll_notice_map | 是否开启触达注意力图,设置 default 表示开启,设置 ‘not_collect’ 表示关闭。 | 需要 Web JS SDK 版本号大于 1.9.1。 |
loadTimeout | 毫秒 | 设置多少毫秒后开始渲染点击图,因为刚打开页面时候页面有些元素还没加载。 |
collect_url | 返回真会采集当前页面的元素点击事件,返回假表示不采集当前页面,设置这个函数后,内容为空的话,是返回假的。不设置函数默认是采集所有页面。 | |
collect_element | 用户点击页面元素时会触发这个函数,让你来判断是否要采集当前这个元素,返回真表示采集,返回假表示不采集。 | |
custom_property | 假如要在 $WebClick 事件增加自定义属性,可以通过标签的特征来判断是否要增加。 | 注意:如果同时使用了 trackAllHeatMap 或者 trackHeatMap 方法设置了自定义属性,那么这 两个方法 中的自定义属性对象会覆盖 custom_property 返回值中的同名属性,它的优先级更高。 |
collect_input | 考虑到用户隐私,这里可以设置 input 里的内容是否采集。 | 如果返回真,表示采集 input 内容,返回假表示不采集 input 内容,默认不采集。 |
element_selector | SDK 默认优先以元素 ID 作为选择器采集点击事件,若不想以 ID 作为选择器,可以设置该参数为 ‘not_use_id’。 | 1.14.12 以上版本支持。 |
renderRefreshTime | 毫秒 | 第二版点击图滚动滚动条,改变页面尺寸后延时多少毫秒重新渲染页面。 |
我在1.9.1版本中,同时设置了collect_url和collect_element,但是推送到预发环境上,发现collect_url有打印数据,collect_element没有触发。
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js "></script>
<script>
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
server_url: 'http://test-syg.datasink.sensorsdata.cn/sa?token=xxxxx&project=xxxxxx',
show_log: true, // 在浏览器控制台
heatmap: {
//是否开启点击图,default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭。
clickmap:'default',
//是否开启触达注意力图,not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启。
scroll_notice_map:'default',
loadTimeout: 3000,
collect_url: function() {
//如果只采集xxx页面
console.log("location", location); // 打印了
if (-1 != location.pathname.indexOf('/xxx/')) {
return true;
}
},
//此参数针对预置 $WebClick 事件(包括 quick('trackHeatMap') quick('trackAllHeatMap') 触发的)生效。
collect_element: function(element_target){
// 如果这个元素有属性sensors-available=true时候,采集。
console.log("element_target", element_target); // 没有打印
if(element_target.getAttribute('sensors-available') === 'true'){
return true;
}else{
return false;
}
},
}
});
sensors.quick('autoTrack');
</script>
看了官方文档也没说为什么 collect_element配置不生效。以为是版本号1.7.1.3不支持,就改成1.9.1版本了。但是 collect_element 还是没有生效。但奇怪的是 $pageview 的事件是会自动收集的。collect_url 中的 console.log(“location”, location) 是有打印出东西的。只有collect_element 的 console.log(“element_target”,element_target) 没有打印。
可能 collect_url 和 collect_element 的配置不能共存?删掉 collect_url 的配置
:
<script charset='UTF-8' src="在 github 下载新版本的 sensorsdata.min.js "></script>
<script>
var sensors = window['sensorsDataAnalytic201505'];
sensors.init({
server_url: 'http://test-syg.datasink.sensorsdata.cn/sa?token=xxxxx&project=xxxxxx',
show_log: true, // 在浏览器控制台
heatmap: {
//是否开启点击图,default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭。
clickmap:'default',
//是否开启触达注意力图,not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启。
scroll_notice_map:'default',
loadTimeout: 3000,
//此参数针对预置 $WebClick 事件(包括 quick('trackHeatMap') quick('trackAllHeatMap') 触发的)生效。
collect_element: function(element_target){
// 如果这个元素有属性sensors-available=true时候,采集。
console.log("element_target", element_target); // 打印了
if(element_target.getAttribute('sensors-available') === 'true'){
return true;
} else{
return false;
}
},
}
});
sensors.quick('autoTrack');
</script>
把这个代码推到预发环境上一看。嘿!触发 collect_element 方法了,打印出 element_target,是个HTML节点。
猜测: collect_url 和 collect_element 不能共存
,collect_url 的优先级高于 collect_element,触发了 collect_url 不会去触发 collect_element。
不过这只是我的猜测。官网上没有明确说明,如果遇到 collect_element 不生效的情况,不妨试试删除掉 collect_url 的配置,看看能否成功。(如果哪里有说明,麻烦热心的读者告诉我哟!感谢~)