全埋点和点击图(Web)

开启全埋点

代码示例

<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',
                is_track_single_page:true, // 单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 $pageview 事件
                use_client_time:true, 
                send_type:'beacon',
                heatmap: {
                       //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
                       clickmap:'default',
                       //是否开启触达图，not_collect 表示关闭，不会自动采集 $WebStay 事件，可以设置 'default' 表示开启。
                       scroll_notice_map:'default'
                } 
         });
         sensors.quick('autoTrack');
</script>

Web JS SDK 全埋点包括三种事件：Web 页面浏览、Web 元素点击、Web 视区停留。如果需要针对全埋点类型进行单独配置，则参照下文中单个全埋点类型使用的帮助文档。

Web 页面浏览($pageview)

// 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。
sensors.quick('autoTrack')

// 另外，如果想加额外的属性，可以如下方式（添加 platform 属性为 h5）
sensors.quick('autoTrack', {
    platform:'h5'
})

Web 元素点击($WebClick)

// SDK 初始化参数配置
heatmap: {
    // 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    // 默认只有点击 a input button textarea 四种元素时，才会触发 $WebClick 元素点击事件
    clickmap:'default'
}

视区停留事件($WebStay)

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

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

其他元素类型的元素点击事件采集

支持 div 类型元素的自动采集

版本要求

Web JS SDK v1.15.15 及以上版本

在原来的全埋点（采集 a、button、input、textarea 标签）基础上新增对 div 标签的采集，采集规则为：

• div 为叶子结点（无子元素）时采集 div 的点击
• div 中有且只有样式标签（['mark', 'strong', 'b', 'em', 'i', 'u', 'abbr', 'ins', 'del', 's', 'sup']）时，点击 div 或者样式标签都采集 div 的点击

通过 collect_tags 配置是否开启 div 的全埋点采集，默认不采集。如需开启，配置 collect_tags 参数如下：

heatmap:{  
    collect_tags:{
        div : true
    }
}

支持任意类型元素的自动采集

版本要求

• Web JS SDK v1.17.1 及以上版本
• Web JS SDK v1.22.2 及以上版本支持 button, label, li 无限层级
• 不建议配置超过 3 个任意元素标签，尤其是会嵌套的元素标签如 span，因为全埋点采集的元素会在点击图中展示，太多的元素或者嵌套会导致点击图效果混乱！！！

通过 collect_tags 配置是否开启其他任意元素的全埋点采集（默认不采集），其中 div 通过配置最多可以采集 3 层嵌套情况。

heatmap: {
  //是否开启点击图，默认 default 表示开启
  clickmap:'default',
  collect_tags: {
    div: {
        max_level: 1 // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
    },
    li: true,
    img: true
    // ... 其他标签
  }
}

支持任意层级 div 元素的自动采集

版本要求

Web JS SDK v1.18.4 及以上版本

SA 开启 SDG 且 SDG 的版本 v0.10.0.134 以上

Edge 版本号：0.2.9882

开启方式：

1. 该功能通过可视化圈选实现，在可视化模式下去圈选相应的 div 元素后，全埋点可自动采集该 div 元素。
2. SDK 需要配置参数 get_vtrack_config: true 开启该功能（默认 false 关闭）。参考如下：

   heatmap: {
     //是否开启点击图，默认 default 表示开启
     clickmap:'default',
     get_vtrack_config: true
   }

3. 服务端需要开启相应的配置。通过命令开启（后端开启：spadmin config set server -p sdg -m web -n enable_unlimit_position_web_element -v true）。

配置特殊属性来支持其他类型元素的自动采集

配置特殊属性：data-sensors-click

开启全埋点时，给需要自动采集点击事件的元素增加属性：data-sensors-click。

版本要求

Web JS SDK 1.14.23 至 1.18.12 版本只支持两层嵌套

Web JS SDK 1.18.13 及以上版本支持无限层级

代码示例如下：

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

配置页面元素点击的自定义属性

开启全埋点时，支持配置带有指定属性的页面元素点击，自动采集点击事件。

版本要求

Web JS SDK 1.15.25 及以上版本

代码示例如下：

<script src="xxxx/xxx/sensorsdata.js"></script>
<script>
var sensors = sensorsDataAnalytic201505;
sensors.init({
  server_url: 'SERVER_URL', 
  heatmap: {
    track_attr: ['hotrep', 'anotherprop', "data-prop2"],
    clickmap:'default',
    scroll_notice_map: 'not_collect'
  }
});
</script>
...
<p hotrep id="test1">hotrep p tag</p>
<p><span anotherprop id="test2">another repo a.b.c</span></p>
<p><strong data-prop2 id="test3">strong with prop2 attribute</strong></p>

代码埋点触发元素点击事件

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

// 下面演示一个 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'
	});
});
</script>

注意：在原生 JavaScript 中调用我们绑定的 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'
			});
		}
	}
}
</script>

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'
	});
});
</script>

全埋点相关参数配置

Web 元素点击

heatmap 相关参数，提供了对于 $WebClick 事件的自定义设置和处理。

heatmap 相关参数说明：

heatmap 相关参数代码示例：

heatmap: {
	clickmap:'default',
	scroll_notice_map:'default',
	loadTimeout: 3000,
	collect_url: function(){
		//如果只采集首页
		if(location.href === 'example.com/index.html' || location.href === 'example.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
}

Web 视区停留

相关参数说明：

scrollmap 相关参数说明：

heatmap 相关参数说明：

scrollmap 和 heatmap 相关代码示例：

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

点击图

点击图和全埋点的关系

点击图 是用来展示 页面 上 点击 的数量情况。因此点击图依赖全埋点中的 $pageview 和 $WebClick 事件。

全埋点数据发送到服务器后，点击图去获取相关数据再进行展示。如果没有页面浏览 ( $pageview ) 或者页面点击 ( $WebClick ) 事件，点击图就无法展示。

点击图的参数配置

在神策分析界面中，打开点击图。此时跳转的 URL 上会带有相关点击图参数标志。Web SDK 在获取到这些参数后，会自动去神策 CDN 请求点击图渲染代码（ heatmap.js ），并进行点击图渲染。

这里点击图的数据需要通过请求神策分析来获取。这里的点击图数据请求地址有如下两种方式配置方式。

支持跨域请求的方式

我们默认已经在打开点击图页面时候带上了点击图数据的请求地址（通过参数添加在 URL 上），因此默认不需要配置。自动可以使用。

因为在客户页面中去请求神策分析的点击图数据地址是一个跨域的请求，因此我们给神策分析服务器已经做了允许跨域请求的配置。

但是因为客户在安装神策分析时候对于服务器做了相关修改，有可能导致跨域请求无法访问。此时有三个方案：

• 修改服务器配置，使得跨域请求能够正常访问（因为修改配置的原因很多，排查不方便，有可能是安全、业务转发等）
• URL 参数获取点击图数据请求地址 + JSONP 请求的方案，因为存在 XSS 安全问题，所以已经被禁止使用
• 不通过 URL 获取，而是在 SDK 中配置一个点击图数据请求地址 web_url + JSONP 请求的方案，参考下面的方式

初始化中配置 web_url 的方式

sensors.init({
  web_url : 'https://xxx.cn/?project=default'
})

这里 web_url 的获取有三种方式：

1. 如果神策分析打开时候的地址是 https://xxx.cn/dashboard/?project=default&product=sbp_family&id=6&dash_type=normal 那就去掉页面路径，保留 project，变成 https://xxx.cn/?project=default
2. 在网页热力分析中，点击 原页面打开，此时 URL 是 https://xxx/?sa-request-id=8abb917d-9642-48b0-874c-0268add785fd&sa-request-url=https%3A%2F%2Fxxx%2F%3Fproject%3Ddefault 取到 sa-request-url 后面的字符串 https%3A%2F%2Fxxx%2F%3Fproject%3Ddefault，在浏览器中执行 decodecodeURIComponent("https%3A%2F%2Fxxx%2F%3Fproject%3Ddefault")
3. 可以咨询神策技术顾问

注意：

web_url 配置的 project 需要和数据接受地址的 project 一致。