集成了神策 Web JS SDK 的 H5 页面,在嵌入到 App 后,H5 内的事件可以通过 App 进行发送,事件发送前会添加上 App 采集到的预置属性。该功能默认是关闭状态,如果需要开启,需要在 App 和 H5 端同时进行配置。

Android 端开启方式

版本要求

  • Android SDK v4.0.7 及以上版本
  • Android 插件 v3.2.4 及以上版本

SDK 初始化前,调用 SAConfigOptions 对象的 enableJavaScriptBridge() 方法

SAConfigOptions saConfigOptions = new SAConfigOptions(SA_SERVER_URL);
···
// 开启 App 打通 H5
// isSupportJellyBean:是否支持 API level 16 及以下的版本,16 及以下版本 API 中,addJavascriptInterface 有安全漏洞,需要谨慎使用。
saConfigOptions.enableJavaScriptBridge(true);

// 其他配置
···
SensorsDataAPI.startWithConfigOptions(this, saConfigOptions);
JAVA

isSupportJellyBean:是否支持 API level 16 及以下的版本,16 及以下版本 API 中,addJavascriptInterface 有安全漏洞,需要谨慎使用。

iOS 端开启方式

版本要求

iOS SDK v2.0.8 及以上版本

SDK 初始化前,将 SAConfigOptions 实例的 enableJavaScriptBridge 属性设置为 YES

SAConfigOptions *options = [[SAConfigOptions alloc] initWithServerURL:SA_SERVER_URL launchOptions:launchOptions];

// 开启 App 打通 H5
options.enableJavaScriptBridge = YES;

// 其他配置
    
[SensorsAnalyticsSDK startWithConfigOptions:option];
OBJECTIVE-C

H5 端开启方式

版本要求

Web JS SDK v1.15.10 及以上版本

在 SDK 初始化代码中,添加 app_js_bridge:true 选项

...
({
	sdk_url:'./sensorsdata.min.js',
	heatmap_url: './heatmap.min.js',
	server_url:'数据接收地址',
	name: 'sensors',
	app_js_bridge:true,

	// 其他配置

});
...
JS

默认情况下,只有 App 数据接收地址与 H5 相同时,才可以打通成功。用户也通过 white_list 配置可以打通的 App 数据接收地址列表,H5 将与列表中所有接收地址进行打通

...
({
	sdk_url:'./sensorsdata.min.js',
	heatmap_url: './heatmap.min.js',
	server_url:'数据接收地址',
	name: 'sensors',
	app_js_bridge: {
		white_list: ['server_url1','server_url2',....];
	}

 	// 其他配置

});
...
JS

验证打通是否成功

App 与 H5 打通后,App SDK 会对 Web JS SDK 采集的数据进行处理。相同的字段进行覆盖,并新增以下字段:

$wifi //是否 Wifi
$network_type //网络类型
$carrier //运营商名称
$app_version //应用版本
$device_id //设备 ID

如果有 H5 事件中含有 $wifi,$network_type$app_version$carrier 等字段,说明 App 和 H5 打通成功。