神策分析 JavaScript SDK 点击图(网页热力分析) 使用说明

最后更新于：2019-10-16 18:00:28

1 点击图

1 点击图依赖全埋点采集的两个预置事件：$pageview, $WebClick。并且元数据管理里面，这两个事件不能隐藏。这两个预置事件的采集，参考全埋点(AutoTrack)

2 触达图的展现，需要至少 3 个触发用户数才能展现。

3 使用点击图需要开启我们 sdk 提供的默认页面浏览事件即 sensors.quick('autoTrack'); 因为点击率这个参数的计算是需要 PV 这个数据的，如果不调用这个方法可能会出现点击率(?): Infinity% 这种情况。

我们建议那些按钮不是很多的，相对简单的页面可以采用这个方法。一般情况下，如果网页上的按钮比较多的话，因为每次按钮的点击都会发数据，会导数据量增大，可能会加磁盘。

2 触达图

1 触达图依赖全埋点采集的预置事件：$WebStay 的数据采集，并且元数据管理里面，这个事件不能隐藏。

3 点击图详细配置参数(大于 1.7 版本可用)

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

相关参数：

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,
    scroll_delay_time: 4000,
    scroll_event_duration: 18000 //单位秒，预置属性停留时长 event_duration 的最大值。默认5个小时，也就是300分钟，18000秒。
}

heatmap 相关参数说明：

参数名	参数值说明	备注
clickmap	是否开启点击图，默认 default 表示开启，可以设置 'not_collect' 表示关闭	需要 JSSDK 版本号大于 1.7
scroll_notice_map	是否开启触达注意力图，默认 default 表示开启，可以设置 'not_collect' 表示关闭	需要 JSSDK 版本号大于 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	毫秒	第二版点击图滚动滚动条，改变页面尺寸后延时多少毫秒重新渲染页面
scroll_delay_time	毫秒	设置触达图的有效停留时间，默认超过 4 秒以上算有效停留
scroll_event_duration	秒	预置属性停留时长 event_duration 的最大值，默认 18000 秒，5 小时

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

scrollmap: {
    collect_url: function(){
        //如果只采集首页
        if(location.href === 'xxx.com/index.html' || location.href === 'xxx.com/'){
            return true;
        }
    },
}

scrollmap 相关参数说明：

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

5 常见问题

5.1 当前元素有点击，但是没有点击图

建议使用 Chrome 浏览器，打开浏览器开发者工具，将包含 Console 中红色部分的完整页面截图发给神策值班同学。