Flutter网页集成MoEngage插件moengage_flutter_web的使用

Flutter网页集成MoEngage插件moengage_flutter_web的使用

moengage_flutter_web 是 moengage_flutter 插件的网页端实现。

使用方法

此插件为推荐插件，这意味着您可以像使用其他插件一样正常使用 moengage_flutter。当您这样做时，此插件会自动包含在您的应用中，因此您无需将其添加到 pubspec.yaml 文件中。

然而，如果您需要直接导入此插件以使用其API，则应将其添加到您的 pubspec.yaml 文件中，就像处理其他普通依赖项一样。

如果事件和/或用户属性无法被跟踪（例如在所有用户计费模式下或用户订阅推送通知后），则可以基于您的加载时间延迟调用 moengageInitialiser 函数：

// 在文件顶部导入此依赖项
import 'dart:async';

/* 在初始化函数中，将 moengageInitialiser(); 替换为 Timer(const Duration(seconds: 5), moengageInitialiser); */
JsObject? _moengage;

@override
void initialise(MoEInitConfig moEInitConfig, String appId) {
    Logger.d('initialise() : Initialising MoEngage web SDK');
    Timer(const Duration(seconds: 5), moengageInitialiser); // 5秒延迟，仅为示例
}

完整示例Demo

以下是一个完整的示例，展示如何在Flutter网页项目中集成并使用 moengage_flutter_web 插件。

步骤1：创建一个新的Flutter Web项目

首先，创建一个新的Flutter Web项目：

flutter create moengage_example
cd moengage_example

步骤2：修改 pubspec.yaml 文件

确保 moengage_flutter 已经包含在 dependencies 中。如果尚未包含，添加它：

dependencies:
  flutter:
    sdk: flutter
  moengage_flutter: ^最新版本号

然后运行 flutter pub get 来获取依赖项。

步骤3：配置 main.dart

在 main.dart 文件中，添加初始化代码，并使用 moengage_flutter 插件来记录事件和用户属性。

import 'package:flutter/material.dart';
import 'package:moengage_flutter/moengage_flutter.dart'; // 导入moengage_flutter包
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MoEngage Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final String appId = "YOUR_APP_ID"; // 请替换为您自己的appId

  void initialise() async {
    await MoEInitConfig.init(
      context: context,
      appId: appId,
      // 其他初始化参数
    );

    // 设置延迟初始化
    Timer(const Duration(seconds: 5), () {
      MoEInitialiser().moengageInitialiser(context);
    });
  }

  @override
  void initState() {
    super.initState();
    initialise();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MoEngage Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 记录事件
            MoEEvent.logEvent(eventName: 'example_event', eventProperties: {'key': 'value'});
          },
          child: Text('Log Event'),
        ),
      ),
    );
  }
}

步骤4：运行项目

确保你已经启用了Flutter Web支持，然后运行项目：

flutter run -d chrome