提示
在进行 Hybrid App 设置之前,请先分别在 App 和网站上完成 Flutter SDK 和 Web SDK 的安装。
通过设置,您无需更改 Hybrid App 中网站的代码,也能让 Airbridge Flutter SDK 处理应用内网站中的 Airbridge 相关操作。
Flutter SDK 可以代替 Web SDK 处理事件发送、设备设置和用户设置等命令。在 WebView 中加载网站之前,请使用 Airbridge.createWebInterfaceScript
和 Airbridge.handleWebInterfaceCommand
函数进行设置。
webToken
是 Web SDK Token,可在 Airbridge 面板的 [设置]>[Token] 获取。
postMessageScript
是一段 JavaScript 代码,用于将 Web SDK 传递给 Flutter SDK 的命令所存储的 payload
变量传递至 Flutter 端。
command
是 Web SDK 传递给 Flutter SDK 的命令。
import 'dart:collection';
import 'package:airbridge_flutter_sdk/airbridge_flutter_sdk.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class TestPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return TestState();
}
}
class TestState extends State<TestPage> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: getJavascriptInterface(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return InAppWebView(
initialUrlRequest: URLRequest(url: WebUri('YOUR_WEB_URL')),
onWebViewCreated: (controller) async {
controller.addJavaScriptHandler(handlerName: 'postMessage', callback: (args) {
Airbridge.handleWebInterfaceCommand(args[0]);
return args;
});
},
initialUserScripts: UnmodifiableListView<UserScript>([
UserScript(
source: snapshot.requireData ?? "",
injectionTime: UserScriptInjectionTime.AT_DOCUMENT_START)
]),
)
});
}
Future<String?> getJavascriptInterface() async {
return await Airbridge.createWebInterfaceScript(
webToken: 'YOUR_WEB_SDK_TOKEN',
postMessageScript: 'window.flutter_inappwebview.callHandler("postMessage", payload);',
);
}
}
启用 Hybrid App 设置后,应仅通过 Web SDK 收集在应用内 WebView 中发生的事件。如果同时使用 App SDK 收集事件,可能会导致重复统计。
如果应用内 WebView 使用的是实际的移动版网站,请仅通过 Web SDK 收集事件。
Was this page helpful?