Flutter Web集成Braze插件braze_plugin_web的使用

braze_plugin_web 是一个非官方的用于Flutter Web的Braze插件。它通过JavaScript Interop包装了官方的Braze Web SDK，适用于Web平台。

配置

添加Braze Web SDK脚本

在 index.html 文件（位于项目的 web 文件夹中）添加以下脚本：

<script type="text/javascript">
  +function(a,p,P,b,y){a.braze={};a.brazeQueue=[];for(var s="BrazeSdkMetadata DeviceProperties Card Card.prototype.dismissCard Card.prototype.removeAllSubscriptions Card.prototype.removeSubscription Card.prototype.subscribeToClickedEvent Card.prototype.subscribeToDismissedEvent Card.fromContentCardsJson Banner CaptionedImage ClassicCard ControlCard ContentCards ContentCards.prototype.getUnviewedCardCount Feed Feed.prototype.getUnreadCardCount ControlMessage InAppMessage InAppMessage.SlideFrom InAppMessage.ClickAction InAppMessage.DismissType InAppMessage.OpenTarget InAppMessage.ImageStyle InAppMessage.Orientation InAppMessage.TextAlignment InAppMessage.CropType InAppMessage.prototype.closeMessage InAppMessage.prototype.removeAllSubscriptions InAppMessage.prototype.removeSubscription InAppMessage.prototype.subscribeToClickedEvent InAppMessage.prototype.subscribeToDismissedEvent InAppMessage.fromJson FullScreenMessage ModalMessage HtmlMessage SlideUpMessage User User.Genders User.NotificationSubscriptionTypes User.prototype.addAlias User.prototype.addToCustomAttributeArray User.prototype.addToSubscriptionGroup User.prototype.getUserId User.prototype.incrementCustomUserAttribute User.prototype.removeFromCustomAttributeArray User.prototype.removeFromSubscriptionGroup User.prototype.setCountry User.prototype.setCustomLocationAttribute User.prototype.setCustomUserAttribute User.prototype.setDateOfBirth User.prototype.setEmail User.prototype.setEmailNotificationSubscriptionType User.prototype.setFirstName User.prototype.setGender User.prototype.setHomeCity User.prototype.setLanguage User.prototype.setLastKnownLocation User.prototype.setLastName User.prototype.setPhoneNumber User.prototype.setPushNotificationSubscriptionType InAppMessageButton InAppMessageButton.prototype.removeAllSubscriptions InAppMessageButton.prototype.removeSubscription InAppMessageButton.prototype.subscribeToClickedEvent FeatureFlag FeatureFlag.prototype.getStringProperty FeatureFlag.prototype.getNumberProperty FeatureFlag.prototype.getBooleanProperty automaticallyShowInAppMessages destroyFeed hideContentCards showContentCards showFeed showInAppMessage toggleContentCards toggleFeed changeUser destroy getDeviceId initialize isPushBlocked isPushPermissionGranted isPushSupported logCardClick logCardDismissal logCardImpressions logContentCardImpressions logContentCardClick logContentCardsDisplayed logCustomEvent logFeedDisplayed logInAppMessageButtonClick logInAppMessageClick logInAppMessageHtmlClick logInAppMessageImpression logPurchase openSession requestPushPermission removeAllSubscriptions removeSubscription requestContentCardsRefresh requestFeedRefresh refreshFeatureFlags requestImmediateDataFlush enableSDK isDisabled setLogger setSdkAuthenticationSignature addSdkMetadata disableSDK subscribeToContentCardsUpdates subscribeToFeedUpdates subscribeToInAppMessage subscribeToSdkAuthenticationFailures toggleLogging unregisterPush wipeData handleBrazeAction subscribeToFeatureFlagsUpdates getAllFeatureFlags".split(" "),i=0;i<s.length;i++){for(var m=s[i],k=a.braze,l=m.split("."),j=0;j<l.length-1;j++)k=k[l[j]];k[l[j]]=(new Function("return function "+m.replace(/\./g,"_")+"(){window.brazeQueue.push(arguments); return true}"))()}window.braze.getCachedContentCards=function(){return new window.braze.ContentCards};window.braze.getCachedFeed=function(){return new window.braze.Feed};window.braze.getUser=function(){return new window.braze.User};window.braze.getFeatureFlag=function(){return new window.braze.FeatureFlag};(y=p.createElement(P)).type='text/javascript';
    y.src='https://js.appboycdn.com/web-sdk/4.7/braze.min.js';
    y.async=1;(b=p.getElementsByTagName(P)[0]).parentNode.insertBefore(y,b)
  }(window,document,'script');
</script>

请确保使用最新的Braze Web SDK加载片段：loading-snippet.js。

使用

初始化和基本操作

以下是一个简单的示例，展示如何初始化Braze客户端并执行一些基本操作：

import 'package:braze_plugin_web/braze_plugin_web.dart';

void main() {
  // 初始化Braze客户端
  BrazeClient.initialize(
    apiKey: 'your_api_key', 
    baseUrl: 'your_base_url',
    automaticallyShowInAppMessages: true,
    enableLogging: true,
  );

  // 标识用户
  BrazeClient.identify('test-user');

  // 设置自定义属性
  BrazeClient.setCustomAttribute('test_web_plugin', true);

  // 设置多个自定义属性
  BrazeClient.setCustomAttributes({
    'test_web_plugin_1': 'Hi!',
    'test_web_plugin_2': 27,
  });

  // 记录自定义事件
  BrazeClient.logCustomEvent('test_web_plugin_event', jsonEncode({'prop1': false}));
}

完整示例Demo

下面是一个完整的Flutter Web应用示例，展示了如何使用Braze插件：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:braze_plugin_web/braze_plugin_web.dart';

/// Set the Braze API Key and Base URL with Dart Environment Variables
/// Run Args: --dart-define=apiKey=1234567890 --dart-define=baseUrl=sdk.iad-02.braze.com
void main() => runApp(MyApp());

const String _brazeApiKey = String.fromEnvironment('apiKey');
const String _brazeBaseUrl = String.fromEnvironment('baseUrl');

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Braze Plugin for Web',
      home: BrazeWebExamplePage(),
    );
  }
}

class BrazeWebExamplePage extends StatefulWidget {
  @override
  BrazeWebExamplePageState createState() => BrazeWebExamplePageState();
}

class BrazeWebExamplePageState extends State<BrazeWebExamplePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Braze Web Example'),
      ),
      body: Column(
        children: [
          TextButton(
            child: const Text('Initialize'),
            onPressed: () async {
              BrazeClient.initialize(
                apiKey: _brazeApiKey,
                baseUrl: _brazeBaseUrl,
                automaticallyShowInAppMessages: true,
                enableLogging: true,
              );
            },
          ),
          TextButton(
            child: const Text('Identify'),
            onPressed: () async {
              BrazeClient.identify('test-user');
            },
          ),
          TextButton(
            child: const Text('Set Custom Attribute'),
            onPressed: () async {
              BrazeClient.setCustomAttribute('test_web_plugin', true);
            },
          ),
          TextButton(
            child: const Text('Set Custom Attributes'),
            onPressed: () async {
              BrazeClient.setCustomAttributes({
                'test_web_plugin_1': 'Hi!',
                'test_web_plugin_2': 27,
              });
            },
          ),
          TextButton(
            child: const Text('Log Custom Event'),
            onPressed: () async {
              BrazeClient.logCustomEvent(
                'test_web_plugin_event',
                jsonEncode({'prop1': false}),
              );
            },
          ),
        ],
      ),
    );
  }
}

运行命令

在运行应用时，请通过命令行参数传递API密钥和Base URL：

flutter run --dart-define=apiKey=YOUR_API_KEY --dart-define=baseUrl=YOUR_BASE_URL

替换 YOUR_API_KEY 和 YOUR_BASE_URL 为你的实际Braze API密钥和基础URL。

以上就是关于Flutter Web集成Braze插件braze_plugin_web的基本使用方法和示例代码。希望对你有所帮助！