1. Attribute Pluginization

SDK version requires 1.25.5 or above

Attribute pluginization is an advanced feature provided by the SensData Web SDK that allows users to add, modify, and delete properties of specified events (or all events) through attribute pluginization function.

1.1. Interface Description

The SDK provides the registerPropertyPlugin method, through which users can pass customized attribute plugin objects to add, modify, or delete attributes for specified events.

Introduction of custom attribute plugins:

{ 	properties:function(data){ 	 // 添加 	 // data.properties.hello = 'world' 	 	 // 修改 	 // data.properties.$title = 'new title' 	 	 // 删除 	 // delete data.properties.$screen_width		 	} }

{ 	isMatchedWithFilter:function(data){ 		// 筛选事件名为 $SignUp 的事件 		if(data.event === '$SignUp'){ 			return true; 		} 		// 筛选在页面标题为 home 的事件 		if(data.properties.$title === 'home'){ 			return true; 		} 		 		// 其他事件不会执行 properties 方法 		return false; 	} }

1.2. Usage Example

• Common method: modify the $url property under the $pageview event name

  sensors.registerPropertyPlugin({ isMatchedWithFilter:function(data){ 	return data.event === "$pageview"; } properties:function(data){ 	data.properties['$url'] = 'http://xxx'; } });

  JS

  
  

• Common method: delete the platform property in all events

  sensors.registerPropertyPlugin({ isMatchedWithFilter:function(data){ 	return data.type === 'track'; } properties:function(data){ 	delete data.properties['platform']; } });

  JS

  
  

• Note: Event filtering should be done before property modification. Because data of types such as profile and item can also be modified.

  sensors.registerPropertyPlugin({ isMatchedWithFilter:function(data){ 	return data.type.slice(0, 4) === 'item' ||  data.type.slice(0, 7) === 'profile'; } properties:function(data){ 	delete data.properties['aaa'] = 'bbb'; } });

  JS

  
  

• For all types of data, modify property values. Note: This usage is generally incorrect and can cause all data (including profile, item, etc.) to be modified, leading to unexpected situations.

  sensors.registerPropertyPlugin({ properties:function(data){ 	data.properties['aaa'] = 'bbb'; } });

  JS

  
  

• Filter and modify properties directly in properties.

  sensors.registerPropertyPlugin({ properties:function(data){ 	if(data.event === '$pageview'){ 		data.properties['$url'] = 'http://xxxx'; 	} } });

  JS

  
  

2. Enable batch data sending.

SDK version needs to be 1.14.7 or above.

// 默认不开启批量发送 batch_send:false, // 开启批量发送 batch_send:true, //或者 batch_send:{ 	datasend_timeout: 6000, //一次请求超过多少毫秒的话自动取消，防止请求无响应。 	send_interval: 6000, //间隔多少毫秒发一次数据。 	storage_length: 200 // 存储 localStorage 条数最大值，默认：200 。如 localStorage 条数超过该值，则使用 image 方式立即发送数据。v1.24.8 以上支持。 },

Principle:

Writing strategy: Triggering an event writes to localStorage. For compatibility of localStorage, please refer to [Mozilla Document](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage). If the browser does not support localStorage, real-time data sending is still used.

Sending strategy: Sending is triggered by a scheduled time or encountering $pageview (or using the quick('autoTrack') method) and $SignUp.

Duplication strategy: Data will only be deleted after a successful request. Otherwise, it will keep sending until reaching a certain number of data.

Note:

1. Batch sending function and callback function cannot be used at the same time. For example, if the track includes a callback, the callback will not be executed when using batch sending. 2. The batch sending function uses cross-domain ajax to send data by default. Data is marked with the client system time. If the browser does not support cross-domain ajax data sending, img and real-time data sending is still used by default. 3. If there are more than 200 pieces of data stored in localStorage, the batch sending function will be disabled. Only these 200 pieces of data will be kept in localStorage, and new data will be sent using img and real-time data sending. When entering a new page with the same domain, it will automatically check if there is cached data. If there is, it will continue sending the cached data. 4. Either app_js_bridge or batch_send can be chosen. If app_js_bridge is enabled, batch sending cannot be used.

3. Parameters related to whether certain preset properties are collected (preset_properties).

The most recent properties collected by the Sensors SDK will be stored in the browser's Cookie. If there is a requirement for the size of the Cookie storage, the following properties can be selectively collected. $url and $title can be configured as public properties. (The configuration is_track_latest, which is used by SDKs with similar functionality version above 1.12.18 and below 1.14.10, has been made compatible.)

The following configurations need to be placed in the initialization configuration, parallel to server_url, and Web JS SDK version needs to be 1.14.10 or above.

//子配置项 true 表示采集,false 表示不采集,未设置的参数取默认值。 preset_properties: { 	//是否采集 $latest_utm 最近一次广告系列相关参数，默认值 true。 	latest_utm:true, 	//是否采集 $latest_traffic_source_type 最近一次流量来源类型，默认值 true。 	latest_traffic_source_type:true, 	//是否采集 $latest_search_keyword 最近一次搜索引擎关键字，默认值 true。 	latest_search_keyword:true, 	//是否采集 $latest_referrer 最近一次前向地址，默认值 true。 	latest_referrer:true, 	//是否采集 $latest_referrer_host 最近一次前向地址，1.14.8 以下版本默认是true，1.14.8 及以上版本默认是 false，需要手动设置为 true 开启。 	latest_referrer_host:false, 	//是否采集 $latest_landing_page 最近一次落地页地址，默认值 false。 	latest_landing_page:false, 	//是否采集 $url 页面地址作为公共属性，1.16.5 以下版本默认是 false，1.16.5 及以上版本默认是 true。 	url: true, 	//是否采集 $title 页面标题作为公共属性，1.16.5 以下版本默认是 false，1.16.5 及以上版本默认是 true。 	title: true, }

4. Send data when closing the page.

Some browsers, such as Safari in iOS systems, may fail to report event information when the page is closed. For example, if you click a button to trigger a page jump, the information on the page before the jump may fail to be reported.

Under normal circumstances, the probability of data loss by the Web JS SDK does not exceed 5%. However, in the case of closing the page, the loss rate will increase.

For this issue, you can choose the following solutions:

4.1. Change to server-side event transmission

If it is a critical click that requires accurate collection, such as a payment event sent when closing the page, it is recommended to perform point collection on the server side.

4.2. Collect the $pageview event of the page after the jump

When a user clicks an a tag with the href attribute www.xxx.com, it triggers the $WebClick event or a user-defined track event. At this time, the page will jump. The data may not be sent successfully, and the page has jumped to www.xxx.com, resulting in data loss.

Solution: Add a parameter to the href attribute of the a tag, such as www.xxx.com?urlfrom=123. After the page jumps to www.xxx.com?urlfrom=123, collect the $pageview event of this page. In the Sensors Analytics backend, check the Web browsing event and filter the results based on whether the URL contains the urlfrom parameter.

4.3. Use setTimeout:

// 点击链接 function targetLinkIcon( url ){ 	//延迟跳转页面，给 SDK 发送数据提供时间 	setTimeout(function(){ 		window.location.href = url; 	},500); 	//神策自定义事件的方法 	sensors.track('demo',{}); }

4.4. Send data in beacon mode

// 要求 sdk 版本在 v1.15.26 及以上版本 // 开启 beacon 方案的需要在 SDK 初始化代码中增加配置（配置位置与 server_url 平级）如下： send_type:'beacon', use_client_time:true, ... server_url: 'xxx'

• If beacon is not supported by the browser, it will automatically degrade to sending data using img

5. Automatic collection of events in single-page applications

Automatic collection of events in single-page applications, please refer to the Demo for details

5.1. Web page browsing event collection

5.1.1. Automatic mode

Configure the parameter is_track_single_page (recommended), the default value is false, which indicates whether to enable the automatic collection of web browsing event $pageview.
The principle is to modify the pushState and replaceState native methods of the window object, and automatically collect the $pageview event after the URL of the page changes. If the user's browser does not support these two methods or uses the hash routing mode, we will also listen for the popstate and hashchange events to automatically trigger the $pageview event.

Usage example:

//SDK版本1.12.18以上支持，默认值为false。 is_track_single_page:true //注意：如果进首页不会自动 redirect 时，sa.quick('autoTrack') 是需要的，否则不需要。

The SDK version is greater than or equal to 1.14.1 and the is_track_single_page parameter can add function(){} configuration, which must return a value.
Configuration 1: return true means that the current page will send data.
Configuration 2: return false means no data will be sent.
Configuration 3: return {} object means that the properties of the object will be added to the current $pageview.

Usage example:

is_track_single_page : function (){ 	return true 时候，使用默认发送的 $pageview 	return false 时候，不执行默认的 $pageview 	return {} 时候，把对象中的属性，覆盖默认 $pageview 里的属性。 } //注意：如果进首页不会自动 redirect 时，sa.quick('autoTrack') 是需要的，否则不需要。

Also note:
Make sure that the Sensibel Web JS SDK has been executed before switching pages, otherwise the $pageview event may not be triggered the first time the page is switched.

5.1.2. Manual mode

When switching pages, manually call sensors.quick('autoTrackSinglePage') to collect the web browsing event $pageview. This method is called after the page URL is switched.

// 比如现在是在 react 中可以在全局的 onUpdate 里来调用。 onUpdate: function(){ 	sensors.quick('autoTrackSinglePage'); } //vue 项目在路由切换的时候调用。 router.afterEach((to,from) => { 	Vue.nextTick(() => { 		sensors.quick("autoTrackSinglePage"); 	}); }); //注意： vue下因为首页打开时候就会默认触发页面更新，所以需要去掉默认加的 sa.quick('autoTrack')。

This method can also add custom properties.

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