1. Enable Full Click Tracking

1.1. Code Example

<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>
JS

Web JS SDK includes three types of events for full click tracking: Web Page Views, Web Element Clicks, and Web Stay. If you need to configure each type of full click tracking separately, please refer to the help documentation for individual full click tracking type.

1.2. Web Page Views($pageview)

// 设置之后，SDK 就会自动收集页面浏览事件，以及设置初始来源。 sensors.quick('autoTrack') // 另外，如果想加额外的属性，可以如下方式（添加 platform 属性为 h5） sensors.quick('autoTrack', { 	platform:'h5' })
JS

1.3. Web Element Clicks($WebClick)

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

1.4. Stay in Viewport Events($WebStay)

// SDK 初始化参数配置 heatmap: { 	//是否开启触达图，default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭。 	//需要 Web JS SDK 版本号大于 1.9.1 	scroll_notice_map:'default' }
JS
  • If the page is scrolled and the previous page stay is a valid stay, that is, it exceeds the default 4 seconds or the custom time, the javascript SDK will send a stay in view event.
  • When the page is closed, a stay in view event is sent. The collection of $WebStay event by Sensors Analytics is based on the scroll event bound to the window. If the page scroll is bound to a div, it cannot be collected.


2. Collection of element click events of other element types

2.1. Auto collection of div type elements is supported

Version Requirement

Web JS SDK v1.15.15 and later

In addition to the original full click tracking (collecting a, button, input, and textarea tags), div tags are added to the collection rules as follows:

  1. When div is a leaf node (without child elements), the click of div is collected.
  2. When div contains only style tags (['mark','strong','b','em','i','u','abbr','ins','del','s','sup']), the click of div or style tags is collected.

To enable the full click tracking collection of div, configure the collect_tags parameter as follows:

heatmap:{ collect_tags:{ div : true } }
JS

2.2. Auto collection of elements of any type is supported

Version Requirement

  • Web JS SDK v1.17.1 and later
  • Web JS SDK v1.22.2 and later supportbutton,label,li Infinite level
  • It is not recommended to configure more than three arbitrary element labels，this is especially true for nested element labels such as span, since all buried elements are displayed in the click graph.too many elements or nesting will cause the click image effect to be confused!!

Use collect_tags to enable or disable this functionall other elements buried point collection (Default no collection), div can be configured to collect up to 3 layers of nesting.

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

2.3. Supports automatic collection of div elements at any level

Version requirement

Web JS SDK v1.18.4  and later

SA open SDG and the SDG version v0.10.0.134 or later

Edge Version：0.2.9882

Opening mode:

  1. This function is realized by visual circle selection. After the corresponding div element is selected in the visual mode, the whole buried point can automatically collect the div element.refer to 复制从 .Web 可视化全埋点（新） v2.5 enter visual mode.
  2. SDK needs to be configuredparameters  get_vtrack_config: true enable the function（Default false off）. Refer to The following:
    heatmap: { //是否开启点击图，默认 default 表示开启 clickmap:'default', get_vtrack_config: true }
    CODE
  3. The corresponding configuration needs to be enabled on the server.Enable by command（Back-end on：spadmin config set server -p sdg -m web -n enable_unlimit_position_web_element -v true）.

2.4. Configure special properties to support automatic collection of other types of elements

2.4.1. Configure special properties：data-sensors-click

When full Bury is turned on, add attributes to elements that need to automatically collect click events:data-sensors-click。

Version requirement

Web JS SDK 1.14.23 至 1.18.12 version supports only two layers of nesting

Web JS SDK 1.18.13  versions and above support unlimited levels

The code example is as follows：

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

2.4.2. Configuration of Custom Properties for page element clicks

When turning on full link tracking, you can configure custom properties for page element clicks to automatically collect click events.

Version requirements

Web JS SDK 1.15.25 and above

Sample code:

<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>
CODE

2.5. Trigger element click events through code tracking

If you want to collect click events for elements other than a input button textarea, please call our method when the element is clicked.

// 下面演示一个 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>
XML


// Note: In native JavaScript, when calling our bound click event, "this" refers to the element node. In other frameworks, the "this" pointer should also point to the corresponding element node. For example, in Vue, you can refer to the following code:

<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>
XML


Starting from SDK version 1.12.14, we added a new method trackAllHeatMap. When calling this method, you can pass in the second argument that includes all tags, including a, input, button, textarea, div, img, and others. In contrast, trackHeatMap only collects tags other than a, input, button, and textarea. Both methods support custom properties and callback functions (the fourth argument of these two methods can accept a function).

// 下面演示一个 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>
XML

3. Configuration of parameters related to full link tracking

3.1. Web Element Click

3.1.1. Heatmap-related parameters that provide custom settings and handling of the $WebClick event.

Explanation of heatmap-related parameters:

Parameter NameDescription of Parameter ValueRemarks
clickmapWhether to enable click map. The default value 'default' means enabled, and you can set 'not_collect' to disable it.Requires Web JS SDK version greater than 1.7.
scroll_notice_mapWhether to enable the reach map, set 'default' to enable, set 'not_collect' to disable.Web JS SDK version number needs to be greater than 1.9.1.
loadTimeoutmillisecondsSet how many milliseconds to start rendering the heat map, because some elements are not loaded when the page is just opened.
collect_urlReturns true to collect the element click event on the current page, returns false to not collect the current page. If this function is set and the content is empty, it returns false. By default, all pages are collected if no function is set.
collect_elementThis function is triggered when the user clicks on a page element to determine whether to collect the current element. Returns true to collect, returns false to not collect.
custom_propertyIf you want to add custom properties to the $WebClick event, you can determine whether to add them based on the features of the tags.Note: If both trackAllHeatMap or trackHeatMap method are used to set custom properties, the custom property object in these  two methods will override the properties with the same name in the custom_property return value, and they take precedence.
collect_inputTo consider user privacy, you can set whether to collect the content in the input.Returns true to collect the content in the input, returns false to not collect the content in the input. The default is not to collect.
element_selectorBy default, the SDK prefers to use the element ID as the selector to collect click events. If you don't want to use the ID as the selector, you can set this parameter to 'not_use_id'.Support from version 1.14.12 and above.
renderRefreshTimemillisecondsAfter scrolling the scrollbar of the second version of the click map and changing the page size, the page will be re-rendered after a delay of how many milliseconds.

Code examples for heatmap parameters:

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 }
JS

3.2. Web Viewport Stay

3.2.1. Explanation of related parameters:

Explanation of scrollmap parameters:

Parameter NameParameter Value ExplanationRemarks
collect_urlReturns true to collect data for the current page, returns false to indicate that the current page is not collected. If this function is set and the content is empty, it will return false. If the function is not set, it will collect all pages by default.

Explanation of heatmap parameters:

Parameter NameParameter Value ExplanationRemarks
scroll_notice_mapWhether to enable the reach map. Set to default to enable, set to 'not_collect' to disable.Web JS SDK version needs to be greater than 1.9.1.
scroll_delay_timemillisecondsSet the effective dwell time for the reachability graph, by default, more than 4 seconds is considered as effective dwell.
scroll_event_durationsecondsThe maximum value of the preset attribute dwell time event_duration is 18000 seconds, 5 hours by default.

scrollmap and heatmap related code examples:

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秒。 }
JS