Flutter个性化推荐插件we_personalization_flutter的使用

Flutter个性化推荐插件we_personalization_flutter的使用

WebEngage个性化推荐Flutter SDK

更多详情请访问我们的网站文档

更多信息

问题?

如需进一步帮助,请联系我们的支持团队

插件信息

WebEngage个性化推荐Flutter SDK

示例代码

import 'package:flutter/material.dart';
import 'package:we_personalization_flutter/we_personalization_flutter.dart';
import 'package:flutter_personalization_sdk_example/src/observer/RouteObserver.dart';
import 'package:flutter_personalization_sdk_example/src/screens/CustomScreen.dart';
import 'package:flutter_personalization_sdk_example/src/screens/DetailScreen.dart';
import 'package:flutter_personalization_sdk_example/src/screens/HomeScreen.dart';
import 'package:flutter_personalization_sdk_example/src/screens/ListScreen.dart';
import 'package:flutter_personalization_sdk_example/src/utils/AppColor.dart';
import 'package:flutter_personalization_sdk_example/src/utils/Logger.dart';
import 'package:flutter_personalization_sdk_example/src/utils/ScreenNavigator.dart';
import 'package:flutter_personalization_sdk_example/src/utils/Utils.dart';
import 'package:webengage_flutter/webengage_flutter.dart';

final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

Future<void> main() async {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();

// 路由观察者
// https://stackoverflow.com/questions/71279847/flutter-exac-lifecycle-equivalents-to-onresume-onpause-on-android-and-viewwil
class _MyAppState extends State<MyApp> with WECampaignCallback {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化插件
    WebEngagePlugin _webenagePlugin = WebEngagePlugin();
    WEPersonalization().init(enableLogs: true);
    WEPersonalization().registerWECampaignCallback(this);
    // 初始化共享偏好设置
    initSharedPref();
  }

  void initSharedPref() {
    Utils.initSharedPref();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // 初始路由
      initialRoute: ScreenNavigator.SCREEN_HOME,
      routes: {
        // 定义各个屏幕的路由
        ScreenNavigator.SCREEN_HOME: (context) => const HomeScreen(),
        ScreenNavigator.SCREEN_LIST: (context) => const ListScreen(),
        ScreenNavigator.SCREEN_DETAIL: (context) => const DetailScreen(),
        ScreenNavigator.SCREEN_CUSTOM: (context) => CustomInlineScreen(
              isDialog: false,
            )
      },
      // 导航器键
      navigatorKey: navigatorKey,
      // 导航器观察者
      navigatorObservers: [MyRouteObserver(), routeObserver],
    );
  }

  [@override](/user/override)
  void onCampaignShown(data) {
    super.onCampaignShown(data);
    // 打印展示活动的数据
    Logger.v("onCampaignShown ${data.toJson()}");
  }

  bool isValidUrl(String url) {
    Uri uri = Uri.parse(url);
    // 检查URL是否有效
    return uri.hasScheme;
  }

  [@override](/user/override)
  void onCampaignClicked(String actionId, String deepLink, data) {
    super.onCampaignClicked(actionId, deepLink, data);
    // 如果深度链接有效,则导航到该屏幕
    if (deepLink.trim().isNotEmpty && isValidUrl(deepLink)) {
      ScreenNavigator.gotoDeepLinkScreen(navigatorKey.currentContext, "$deepLink");
    }
    // 打印点击活动的数据
    Logger.v("onCampaignClicked $deepLink ${deepLink.length}");
    Logger.v("onCampaignClicked $actionId $deepLink ${data.toJson()}");
  }

  [@override](/user/override)
  void onCampaignPrepared(data) {
    super.onCampaignPrepared(data);
    // 打印准备活动的数据
    Logger.v("onCampaignPrepared ${data.toJson()}");
  }

  [@override](/user/override)
  void onCampaignException(
      String? campaignId, String targetViewId, String error) {
    super.onCampaignException(campaignId, targetViewId, error);
    // 打印异常数据
    Logger.v("onCampaignException $campaignId $targetViewId $error");
  }
}

更多关于Flutter个性化推荐插件we_personalization_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter个性化推荐插件we_personalization_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用we_personalization_flutter插件进行个性化推荐的代码案例。假设你已经有一个Flutter项目,并且已经配置好了基本的开发环境。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加we_personalization_flutter插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  we_personalization_flutter: ^最新版本号 # 请替换为最新的版本号

然后运行flutter pub get来安装依赖。

2. 初始化插件

在你的Flutter应用的入口文件(通常是main.dart)中,初始化we_personalization_flutter插件。你需要提供必要的配置信息,比如API密钥和其他配置参数。

import 'package:flutter/material.dart';
import 'package:we_personalization_flutter/we_personalization_flutter.dart';

void main() {
  // 初始化插件
  WePersonalization.instance.init(
    apiKey: '你的API密钥', // 请替换为你的API密钥
    environment: 'production', // 或者 'development'
    userId: '当前用户的唯一标识符', // 替换为当前用户的唯一标识符
    visitorId: '访客的唯一标识符', // 如果需要的话,可以设置一个访客ID
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 获取个性化推荐

在你的主页面或者其他需要展示个性化推荐的地方,调用WePersonalization插件的方法来获取推荐内容。

import 'package:flutter/material.dart';
import 'package:we_personalization_flutter/we_personalization_flutter.dart';

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> recommendations = [];

  @override
  void initState() {
    super.initState();
    // 获取个性化推荐
    _fetchRecommendations();
  }

  Future<void> _fetchRecommendations() async {
    try {
      // 假设你有一个推荐项ID列表或者一个获取推荐内容的API
      var response = await WePersonalization.instance.getRecommendations(
        campaignId: '你的推荐项ID', // 替换为你的推荐项ID
        numRecommendations: 5, // 你想要获取的推荐数量
      );

      // 处理响应数据
      if (response != null && response.isNotEmpty) {
        setState(() {
          recommendations = response.map((item) => item.title).toList(); // 假设每个推荐项有一个title字段
        });
      }
    } catch (e) {
      print('获取推荐内容失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('个性化推荐'),
      ),
      body: ListView.builder(
        itemCount: recommendations.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(recommendations[index]),
          );
        },
      ),
    );
  }
}

注意事项

  1. API密钥和用户ID:确保你提供的API密钥和用户ID是有效的,并且用户ID是唯一的,这样才能确保个性化推荐的准确性和有效性。
  2. 错误处理:在实际应用中,应该添加更多的错误处理逻辑,比如网络错误、API返回错误码等。
  3. UI设计:上面的代码只是一个基本的示例,你可以根据自己的UI设计需求来调整展示推荐内容的方式。

这样,你就可以在Flutter应用中使用we_personalization_flutter插件来实现个性化推荐了。希望这个示例对你有帮助!

回到顶部