1. 全埋点相关参数配置
    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 的配置,看看能否成功。(如果哪里有说明,麻烦热心的读者告诉我哟!感谢~)