友盟统计官方flutter不支持web端，所以添加web统计需要自己写相关的逻辑
首先需要在友盟官网友盟小程序统计—支持微信、支付宝、百度、字节平台，免费的全平台跨域小程序/小游戏统计分析产品
中添加小程序统计拿到appkey
一、sdk集成
代码部分需要在web工程的index.html中添加以下代码，这里可以参考友盟官网的集成文档
<head> ...<script>(function(w, d, s, q, i) {w[q] = w[q] || [];var f = d.getElementsByTagName(s)[0],j = d.createElement(s);j.async = true;j.id = 'beacon-aplus';j.src = '/alilog/mlog/aplus/' + i + '.js';f.parentNode.insertBefore(j, f);})(window, document, 'script', 'aplus_queue', '203467608');//集成应用的appKeyaplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['appKey', '*************']});/************************以下内容为可选配置内容****************************///sdk提供手动pv发送机制，启用手动pv(即关闭自动pv)，需设置aplus-waiting=MAN;//注意：由于单页面路由改变时不会刷新页面，无法自动发送pv，所以对于单页应用，强烈建议您关闭自动PV, 手动控制PV事件aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['aplus-waiting', 'MAN']});//是否开启调试模式aplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['DEBUG', true]});//是否指定用作计算umid的id类型，默认为cnaid，目前支持://1. 微信和QQ: openid; 字节和百度 anonymousid; 支付宝 alipay_id//2. 微信、QQ、字节、百度平台的 unionid//3. 业务方自己生成的随机id uuidaplus_queue.push({action: 'aplus.setMetaInfo',arguments: ['aplus-idtype', 'xxxx'] //取值参考见附表1});/******************************************************************/</script></head>
二.sdk使用
flutter 提供了dart调用js代码的能力，调用友盟统计h5sdk的api还需要写相关的桥接代码
（1）dart代码方面
1.建议建立一个公共管理类来管理umeng统计在多端的使用情况
import 'dart:convert';import 'package:umeng_common_sdk/umeng_common_sdk.dart';import 'package:test/common/config.dart';//解决web与原生编译冲突写法import 'package:test/web/js.dart'// ignore: uri_does_not_existif (dart.library.html) 'dart:js' as js;class UmengUtils {static void onPageStart(String page) {if (AppConfig.isWeb) {js.context.callMethod("sendPV");} else {UmengCommonSdk.onPageStart(page);}}static void onPageEnd(String page) {if (AppConfig.isWeb) {} else {UmengCommonSdk.onPageEnd(page);}}static void onEvent(String event, Map<String, dynamic> map) {if (AppConfig.isWeb) {//这里将map转成jsonString是因为桥接代码对map类型不支持，所以只能转为String类型来传递js.context.callMethod("umengH5Event",[event,jsonEncode(map)]);} else {UmengCommonSdk.onEvent(event, map);}}}
js.dart文件的代码如下
WebContext context = WebContext();class WebContext {// void callMethod(String str) {}void callMethod(String str,[List? args]) {}operator [](Object? key) {// TODO: implement []throw UnimplementedError();}void operator []=(key, value) {// TODO: implement []=}}
2.工具类建立完成后dart这边只需要正常调用即可
@overridevoid initState() {super.initState();UmengUtils.onPageStart("商品详情页");UmengUtils.onEvent("GoodsDetailPage", {"goodsId":goodsId });}
（2）web这边也需要添加js方法来提供给dart这边调用
在web工程下，index.html文件中添加如下代码
<body>...<script type="text/javascript">function umengH5Event(str,map){const {aplus_queue} = window;//console.log(map);var json = JSON.parse(map);//console.log(json);//一个简单的demoaplus_queue.push({action: 'aplus.record',arguments: [str, 'CLK', json]});};function sendPV(){const {aplus_queue} = window;aplus_queue.push({action: 'aplus.sendPV',arguments: [{is_auto: false}]});}</script></body>
大工告成，如果想调用更多方法，按照相同的方法添加桥接代码即可
