1. 全埋点代码生成

详细参考:Web 快速接入

1.1. 页面浏览事件($pageview)

为了方便使用,神策分析的 SDK 也提供了一些默认事件的收集,例如如果需要采集页面浏览事件(即 PageView),可以通过增加如下代码:

// 如果需要调用 login 来重新设置用户标识,必须在此之前调用
sensors.quick('autoTrack')

设置之后,SDK 就会自动收集页面浏览事件,以及设置初始来源。
另外,如果想加额外的属性,可以如下方式(添加 platform 属性为 h5)

// 如果需要调用 login 来重新设置用户标识,必须在此之前调用
sensors.quick('autoTrack', {
	platform:'h5'
})
JS


而如果只想追踪事件,不想设置首次来源到 profile 里,可以使用 sensors.quick('autoTrackWithoutProfile') 来替代。

注意: 单页面中发送页面浏览事件($pageview)

参考此文档 Web 单页面

1.2. 页面点击事件($WebClick)

// SDK 初始化参数配置
heatmap: {
	//是否开启点击图,默认 default 表示开启,自动采集 $WebClick 事件,可以设置 'not_collect' 表示关闭
	//需要 Web JS SDK 版本号大于 1.7
	clickmap:'default'
}
JS


1.2.1. 全埋点默认只自动采集这些交互元素( a input button textarea )的 $WebClick 点击事件

开启全埋点,SDK 就会自动追踪页面上的按钮( a button input textarea)这种 html 标签类型 的点击情况,一旦页面某一个按钮发生了点击行为,我们就会去采集此按钮的一些信息,例如: 这个按钮的标签类型( a button input ),这个按钮的文本内容,这个按钮的 name ,这个按钮的 id 、 class 名,还有一些按钮特有的属性如 href 等。

1.2.2. 自动采集其他元素 (非 a input button textarea) 的 $WebClick 事件,比如 img 和 div 等

开启全埋点,给需要自动采集点击事件的元素增加属性:data-sensors-click (注意 Web JS SDK 的版本必须是 1.14.23 及以上版本)。

<div name='test' data-sensors-click>我是测试元素</div>
<li data-sensors-click class='test-li'>我是测试元素</li>
XML


1.2.3. 自定义代码埋点采集其他元素 (非 a input button textarea) 的 $WebClick 事件,比如 img 和 div 等

请注意,在使用该方法采集 div 元素的点击事件时,请根据自身需求采集某些专门的 class 或者 ID 的 div 元素,避免全局采集所有 div 元素,否则会导致 $WebClick 事件量激增,并且点击图会显示页面上所有 div 元素的色块,导致点击图整体过于混乱无法查看。

如果你想要对非 a input button textarea 的其他元素采集点击事件的话,请在元素发生点击的时候,调用我们的这个方法。

[SDK 更新日志]

// 下面演示一个 div 标签被点击时触发预置的元素点击事件
<div id="submit_order">提交订单</div>

<script type="text/javascript">
$('#submit_order').on('click', function() {
	sensors.quick('trackHeatMap', this, {
		customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
		customProp2: 'test2'
	}, function() {
		console.log('callback');
	});
});
</script>
XML


// 注意: 在原生js中调用我们绑定的click事件时this指向的是元素节点,在其他框架采集点击事件时this指针也应该指向相应的元素节点,例如在vue中可以参考下面示例

<div v-on:click="track">点击</div>

<script>
export default {
	methods: {
		track: function(event) {
			sensors.quick('trackHeatMap', event.target, {
				customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
				customProp2: 'test2'
			}, function() {
				console.log('callback');
			});
		}
	}
}
</script>
XML


1.12.14 及以上版本的 SDK 增加新方法 trackAllHeatMap ,当调用这个方法时,此方法的第二个参数可以传入包括 a, input, button, textarea 标签和 div,img 等的所有标签。而 trackHeatMap 只采集除 a, input, button,textarea 之外的标签。同时,这两个方法均可以设置自定义属性,且支持回调函数(这两个方法的第四个参数都可以传入一个方法)。

// 下面演示一个 button 按钮被点击时触发预置的元素点击事件
<button id="testp">测试按钮</button>

<script type="text/javascript">
$('#testp').on('click', function() {
	sensors.quick('trackAllHeatMap', this, {
		customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。
		customProp2: 'test2'
	}, function() {
		console.log('callback');
	});
});
</script>
XML


1.3. 视区停留事件($WebStay)

$WebStay 的触发条件:
1、如果发生页面滚动时候,之前的页面停留是有效停留,也就是超过默认的 4 秒或者自定义的时间,javascript SDK 就会发送一次页面停留事件。
2、关闭页面时,发送一次页面停留事件。
神策 $WebStay 事件的采集是基于在 window 上绑定的 scroll 事件,如果页面滚动是绑定在 div 上,则无法采集。


// SDK 初始化参数配置
heatmap: {
	//是否开启触达注意力图,默认 not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启
	//需要 Web JS SDK 版本号大于 1.9.1
	scroll_notice_map:'not_collect'
}
JS


2. 网页热力分析

2.1. 点击图

注意事项
SA 及 SDK 大于 1.7 版本可用。
点击图依赖全埋点采集的两个预置事件:$pageview, $WebClick。并且元数据管理里面,这两个事件不能隐藏。这两个事件的采集请参考本页第一节。 
使用点击图需要开启我们 sdk 提供的默认页面浏览事件即 sensors.quick('autoTrack'); 因为点击率这个参数的计算是需要 PV 这个数据的,如果不调用这个方法可能会出现 点击率(?): Infinity% 这种情况。 
我们建议那些按钮不是很多的,相对简单的页面可以采用这个方法。 一般情况下,如果网页上的按钮比较多的话,因为每次按钮的点击都会发数据,会导数据量增大,可能会加磁盘。


可在下图的生成导入代码的页面中,是否开启自动采集开关下选择:采集页面浏览和交互元素的点击,然后重新生成。

相关参数:

web_url: 神策分析后台地址,神策分析中点击分析及触达分析功能会用到此地址,代码生成工具会自动生成。如果神策后台版本及 sensorsdata.min.js 均是 1.10 及以上版本,这个参数不需要配置。
heatmap_url: 神策分析中点击分析及触达分析功能代码,代码生成工具会自动生成。如果神策代码中 sensorsdata.min.js 版本是 1.13.1 及以前版本,这个参数须配置,高于此版本不需要配置。
heatmap: 必须配置这个参数才会发送数据,如果只想采集所有页面的仅交互按钮的数据,可以使用这种配置方式 heatmap:{} 。具体参数配置如下:


heatmap: {
	clickmap:'default',
	scroll_notice_map:'default',
	loadTimeout: 3000,
	collect_url: function(){
		//如果只采集首页
		if(location.href === 'xxx.com/index.html' || location.href === 'xxx.com/'){
			return true;
		}
	},
	//此参数针对预置 $WebClick 事件(包括 quick('trackHeatMap') quick('trackAllHeatMap') 触发的)生效
	collect_element: function(element_target){
		// 如果这个元素有属性sensors-disable=true时候,不采集
		if(element_target.getAttribute('sensors-disable') === 'true'){
			return false;
		}else{
			return true;
		}
	},
	//此参数针对预置 $WebClick 事件(包括 quick('trackHeatMap') quick('trackAllHeatMap') 触发的)生效
	custom_property:function( element_target ){
		//比如您需要给有 data=test 属性的标签的点击事件增加自定义属性 name:'aa' ,则代码如下
		if(element_target.getAttribute('data') === 'test'){
			return {
				name:'aa'
			}
		}
	},
	collect_input:function(element_target){
		//例如如果元素的 id 是a,就采集这个元素里的内容
		if(element_target.id === 'a'){
			return true;
		}
	},
	element_selector:'not_use_id',
	renderRefreshTime:1000
}
JS


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_selectorSDK 默认优先以元素 ID 作为选择器采集点击事件,若不想以 ID 作为选择器,可以设置该参数为 'not_use_id'1.14.12 以上版本支持
renderRefreshTime毫秒第二版点击图滚动滚动条,改变页面尺寸后延时多少毫秒重新渲染页面

2.2. 触达图

注意事项
触达图依赖全埋点采集的预置事件:$WebStay 的数据采集,并且元数据管理里面,这个事件不能隐藏,这个事件的采集请参考本页第一节。 
触达图的展现,需要至少 3 个触发用户数才能展现。 
有效停留:关注网页区域不滚动,期间鼠标可以移动,可以点击等操作。
有效停留时间:停留时间超过规定的时间,javascript sdk 中默认为 4 秒, 这个参数可以设置。


2.2.1. 触达图详细配置参数(SDK 1.12.1 以上版本可用)

scrollmap: {
	collect_url: function(){
		//如果只采集首页
		if(location.href === 'xxx.com/index.html' || location.href === 'xxx.com/'){
			return true;
		}
	},
},
heatmap:{
	//是否开启触达注意力图,默认 not_collect 表示关闭,不会自动采集 $WebStay 事件,可以设置 'default' 表示开启
	//需要 Web JS SDK 版本号大于 1.9.1
	scroll_notice_map:'not_collect',
	scroll_delay_time: 4000, 
	scroll_event_duration: 18000 //单位秒,预置属性停留时长 event_duration 的最大值。默认5个小时,也就是300分钟,18000秒。
}
JS


scrollmap 相关参数说明:

参数名参数值说明备注
collect_url返回真会采集当前页面的数据,返回假表示不采集当前页面,设置这个函数后,内容为空的话,是返回假的。不设置函数默认是采集所有页面

heatmap 相关参数说明:

参数名参数值说明备注
scroll_notice_map是否开启触达图,设置 default 表示开启,设置 'not_collect' 表示关闭需要 Web JS SDK 版本号大于 1.9.1
scroll_delay_time毫秒设置触达图的有效停留时间,默认超过 4 秒以上算有效停留
scroll_event_duration预置属性停留时长 event_duration 的最大值,默认 18000 秒,5 小时