开启全埋点代码示例WebSDK及以上版本代码代码

　　开启全埋点代码示例WebSDK及以上版本代码代码

　　打开完整的掩埋点代码示例

　　

        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');

　　JS

　　Web JS SDK的完全隐藏点包括三种事件：网页浏览，Web元素单击，Web视口停留，各个对应的配置如下。

　　网页浏览（$ pageview）

　　// 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。

sensors.quick('autoTrack')

// 另外，如果想加额外的属性，可以如下方式（添加 platform 属性为 h5）

sensors.quick('autoTrack', {

platform:'h5'

})

　　JS

　　网页元素点击（$ WebClick）

　　// SDK 初始化参数配置

heatmap: {

// 是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。

// 默认只有点击 a input button textarea 四种元素时，才会触发 $WebClick 元素点击事件

clickmap:'default'

}

　　JS

　　视口停留事件（$ WebStay）

　　// SDK 初始化参数配置

heatmap: {

//是否开启触达注意力图，default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭。

//需要 Web JS SDK 版本号大于 1.9.1

scroll_notice_map:'default'

}

　　JS

　　

　　其他元素类型采集的元素单击事件支持自动div类型元素采集

　　

　　版本要求

　　Web JS SDK及更高版本

　　在原创标记（采集 a，按钮，输入，文本区域标签）的基础上将采集添加到div标签中，采集规则为：

　　当div是叶节点（无子元素）时，采集 div的click div仅具有样式标签（['mark'，'strong'，'b'，'em'，'i'，'u '，'abbr'，'ins'，'del'，'s'，'sup']）），点击div或样式标签采集 div点击

　　使用collect_tags配置是否启用div的完整掩埋点采集，默认值为采集。如果需要启用，请按以下方式配置collect_tags参数（注意：仅支持div配置）：

　　heatmap:{

collect_tags:{

div : true

}

}

　　JS

　　支持具有特殊属性的其他类型元素的自动采集配置：data-sensors-click

　　打开整个掩埋点后，向需要自动采集 click事件的元素添加一个属性：data-sensors-click（注意：添加此属性将不允许该元素可视化整个掩埋点）。

　　

　　版本要求

　　Web JS SDK及更高版本

　　代码示例如下：

　　我是测试元素

我是测试元素

　　XML

　　配置自定义属性

　　启用完全埋入点后，支持将具有指定属性的页面元素单击配置为自动采集单击事件（注意：添加此属性不能使元素能够显示完全埋入点）

　　

　　版本要求

　　Web JS SDK及更高版本

　　代码示例如下：

　　

var sensors = sensorsDataAnalytic201505;

sensors.init({

server_url: 'SERVER_URL',

heatmap: {

track_attr: ['hotrep', 'anotherprop', "data-prop2"],

clickmap:'default',

scroll_notice_map: 'not_collect'

}

});

...

<p hotrep id="test1">hotrep p tag

　　another repo a.b.c

　　strong with prop2 attribute</p>

　　CODE

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

　　如果您要单击输入按钮文本区域采集以外的其他元素，请在单击该元素时调用我们的方法。

　　// 下面演示一个 div 标签被点击时触发预置的元素点击事件

提交订单

$('#submit_order').on('click', function() {

sensors.quick('trackHeatMap', this, {

customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。

customProp2: 'test2'

}, function() {

console.log('callback');

});

});

　　XML

　　//注意：调用我们在本机js中绑定的click事件时，它指向元素节点。在其他框架采集 click事件中，该指针也应指向相应的元素节点，例如，在vue中，请参见下面的示例。

　　点击

export default {

methods: {

track: function(event) {

sensors.quick('trackHeatMap', event.target, {

customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。

customProp2: 'test2'

}, function() {

console.log('callback');

});

}

}

}

　　XML

　　新方法trackAllHeatMap已添加到版本及更高版本的SDK中。调用此方法时，可以在所有标签（包括a，input，button，textarea标签和div，img等）中传递此方法的第二个参数。仅trackHeatMap 采集标签是a，input，button，textarea之外。同时，这两个方法可以设置自定义属性，并支持回调函数（这两个方法的第四个参数可以传递给方法）。

　　// 下面演示一个 button 按钮被点击时触发预置的元素点击事件

测试按钮

$('#testp').on('click', function() {

sensors.quick('trackAllHeatMap', this, {

customProp1: 'test1', //如果需要添加自定义属性需要将 SDK 升级到 1.13.7 及以上版本。

customProp2: 'test2'

}, function() {

console.log('callback');

});

});

　　XML

　　全埋点相关参数配置Web元素单击与热图相关的参数，为$ WebClick事件提供自定义设置和处理。

　　说明热图相关参数：

　　参数名称参数值描述备注

　　点击地图

　　是否打开点击地图，默认设置是将其打开，并且可以将“ not_collect”设置为关闭。

　　Web JS SDK版本号必须大于。

　　scroll_notice_map

　　是否打开触摸注意力图，将其设置为默认值将其打开，将'not_collect'设置为将其关闭。

　　Web JS SDK版本号必须大于。

　　loadTimeout

　　毫秒

　　设置开始渲染点击图的毫秒数，因为首次打开页面时尚未加载页面的某些元素。

　　collect_url

　　返回true将采集当前页面的元素单击事件，返回false则不是采集当前页面。设置此功能后，如果内容为空，则将返回false。如果未设置此功能，则默认为所有页面采集。

　　collect_element

　　当用户单击页面元素时，将触发此函数，您可以确定是否采集当前元素，为采集返回true，为否采集返回false。

　　custom_property

　　如果要将自定义属性添加到$ WebClick事件，则可以根据标记的特性来判断是否添加它们。

　　注意：如果同时使用trackAllHeatMap或trackHeatMap方法设置自定义属性，则此处的自定义属性对象将在具有更高优先级的custom_property返回值中覆盖具有相同名称的属性。

　　collect_input

　　考虑到用户隐私，您可以在此处设置输入内容是否为采集。

　　如果返回true，则表示输入内容为采集，返回false表示不输入内容输入采集，默认值为采集。

　　element_selector

　　默认情况下，SDK将元素ID作为选择器采集 click事件的优先级。如果您不想将ID用作选择器，则可以将此参数设置为“ not_use_id”。

　　受以上版本支持。

　　renderRefreshTime

　　毫秒

　　在第二个版本中，在以毫秒为单位更改页面大小之后，单击滚动条以重新呈现页面。

　　与热图相关的参数代码示例：

　　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

　　有关Web视口停留的相关参数的说明：

　　与滚动图相关的参数的描述：

　　参数名称参数值描述备注

　　collect_url

　　返回true将采集当前页面的数据，返回false则不是采集当前页面的数据。设置此功能后，如果内容为空，则将返回false。如果未设置此功能，则默认为所有页面采集。

　　说明热图相关参数：

　　参数名称参数值描述备注

　　scroll_notice_map

　　是否打开触摸图，将其设置为默认值以将其打开，并设置为'not_collect'以将其关闭。

　　Web JS SDK版本号必须大于。

　　scroll_delay_time

　　毫秒

　　设置触摸图的有效停留时间，默认停留时间为4秒以上。

　　scroll_event_duration

　　秒

　　预设属性停留时间的event_duration最大值。默认值为18000秒5小时。

　　与滚动图和热图有关的代码示例：

　　scrollmap: {

collect_url: function(){

//如果只采集首页

if(location.href === 'xxx.com/index.html' || location.href === 'xxx.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秒。

}

　　JS

　　单个页面采集中的自动事件

　　

　　在单个页面中自动显示事件采集，请参阅

　　网页浏览事件采集自动模式

　　配置参数为_track_single_page（建议使用此模式），默认值为true，指示是否启用自动采集 Web浏览事件$ pageview功能。

　　原理是修改窗口对象的pushState和replaceState本机方法，并在更改页面的url之后自动采集 $ pageview事件。如果用户的浏览器不支持这两种方法或使用哈希路由模式，我们还将侦听popstate和hashchange事件以自动触发$ pageview事件。

　　用法示例：

　　//SDK版本1.12.18以上支持，默认值为false。

is_track_single_page:true

//注意：如果进首页不会自动 redirect 时，sa.quick('autoTrack') 是需要的，否则不需要。

　　JS

　　添加了大于或等于function（）{}配置的SDK版本的is_track_single_page参数，并且必须返回一个值。

　　配置1：返回true表示当前页面将发送数据，

　　配置2：返回false表示将不发送任何数据，

　　配置3：返回{}对象，这意味着该对象的属性将被添加到当前的$ pageview中。

　　用法示例：

　　is_track_single_page : function (){

return true 时候，使用默认发送的 $pageview

return false 时候，不执行默认的 $pageview

return {} 时候，把对象中的属性，覆盖默认 $pageview 里的属性。

}

//注意：如果进首页不会自动 redirect 时，sa.quick('autoTrack') 是需要的，否则不需要。

　　JS

　　还请注意：

　　必须确保在切换页面之前已执行Shence Web JS SDK，否则在第一次切换页面时可能不会触发$ pageview。

　　手动模式

　　切换页面后，手动调用sensor.quick（'autoTrackSinglePage'）到采集 Web浏览事件$ pageview。切换页面网址后，将调用此方法。

　　// 比如现在是在 react 中可以在全局的 onUpdate 里来调用。

onUpdate: function(){

sensors.quick('autoTrackSinglePage');

}

//vue 项目在路由切换的时候调用。

router.afterEach((to,from) => {

Vue.nextTick(() => {

sensors.quick("autoTrackSinglePage");

});

});

//注意： vue下因为首页打开时候就会默认触发页面更新，所以需要去掉默认加的 sa.quick('autoTrack')。

　　JS

　　此方法还可以添加自定义属性，

　　sensors.quick("autoTrackSinglePage",{platForm:"H5"});

　　JS

　　单页页面标题$ title问题

　　对于单页项目，Shence SDK的所有点的预设事件采集的页面标题属性中可能会有例外。

　　具体问题：

　　1、 title如果没有更新分配，则获得的标题将始终是主页的标题，并且不会更改，并且切换页面发送的数据也不会更新$ title。

　　2、标题设置时间晚于数据发送时间，通过切换页面发送的$ pageview事件携带的$ title值是前一页的标题。

　　解决方案：

　　在切换页面之前完成标题值的更新（以常见的vue为例）

　　router.beforeEach((to, from, next) => {

document.title = '新页面的 title 值';

next()

})

　　JS