Braze 反应原生 SDK

欲多了解React Independent SDK,请参见以下资源:

• Braze 开发者指南 — react 原生:学习如何整合回放原生SDK.
• Braze 用户指南:学习如何用Braze为用户构建移动体验.

关于 Braze 反应原生 SDK

Braze React Independent SDK将您的iOS和Android应用连接到Braze:用户简介,消息表观,分析,以及特征旗. 包裹着本地人 灰尘 SDK 财务报告和审定财务报表 喷气Android SDK 在 JavaScript API 后面.

初始化为 JavaScript 驱动 : 您在 Android 资源和 iOS 中设置本地配置( 推、 日志、 代表) AppDelegate,然后调用 Braze.initialize(apiKey, endpoint) 从JavaScript开始SDK. 这样你就可以完全控制SDK的初始化时间 以及哪些证书 初始化后,请调用其他 SDK 方法(例如 changeUser, (中文(简体) ), logCustomEvent视需要而定.

尽你所能

• 用户管理: 识别用户,设置配置字段,自定义属性,别名和订阅组
• 正在应用信件: 通过订阅和记录 API 默认 Braze UI 或自定义处理
• 内容卡: 默认 feed UI, 或获取卡片并构建自己的 UI
• 横幅: 基于定位的 HTML 横幅,包括 BrazeBannerView
• 推动通知: 许可提示、符号注册、有效载荷听众(见下文平台注释)
• 地物标志: 刷新、 读取属性、 日志印象
• 分析: 自定义事件、购买、即刻冲出
• SDK 控制器: 启用/ 失效 SDK, 擦去本地数据, SDK 认证签名

先决条件

• 布雷兹账户 有应用 API 密钥和 SDK 端点
• 原生反应 发展环境反应原生环境设置(中文(简体) )
• iOS系统: Xcode, CocoaPods (英语:cd ios && pod install(中文(简体) )
• 机器人: Android Studio / Gradle; Kotlin Gradle 插件, 按您的本地反应模板的要求
• 推开 (如果使用的话):FCM(Android)和APN(iOS)每集设置 推动文档

对于仪表板上的认证地点,请遵循 一体化概况。 。 。 .

目录

1. 安装
2. 快开始
3. 本地设置
4. 配置参考
5. JavaScript / 类型脚本 API
6. 核心特征
   • 用户管理
   • 正在应用信件
   • 内容卡
   • 横幅
   • 推动通知
   • 地物标志
   • 分析和采购
   • 数据管理和SDK状态
7. 活动
8. 综合说明
9. 版本支持
10. Braze 博览会插件
11. 软件样本
12. 调试和排除出错
13. 额外资源

安装

npm install @braze/react-native-sdk
# or:
# yarn add @braze/react-native-sdk

快开始

本节显示初始化"Braze React"原生SDK所需的最小设置.

1. 安装 npm 包(上) .
2. 完成 本地设置 用于Android和iOS(配置,权限,需要时可按).
3. 从 JavaScript 初始化 SDK并开始使用 :

import Braze from "@braze/react-native-sdk";

// Initialize the SDK — call early in your app lifecycle (e.g. in a useEffect).
// The API key and endpoint are passed from JavaScript; native configuration
// (push, logging, etc.) is applied automatically from your native setup.
Braze.initialize("<YOUR_API_KEY>", "<YOUR_SDK_ENDPOINT>");

Braze.changeUser("user-123");
Braze.logCustomEvent("button_clicked", { screen: "home" });

TypeScript 打字船与包件(src/index.d.ts (原始内容存档于2017-09-21). on GitHub.

通话 Braze.initialize 并重新创建,支持中会重新初始化.

本地设置

真相来源: 分步显示屏,Gradle/CocoaPods更改,Android XML密钥的完整列表都在其中 Braze 反应原生开发者指南。下面的片段是极少的例子.

机器人

• 添加数据 克特林格拉德插件 在你的根头 build.gradle 如果您的模板尚未生效( 版本取决于您的本地反应版本) .
• 添加一个 braze.xml 资源文件在 res/values 与您的配置。 启用延迟初始化, 以便 SDK 等待 Braze.initialize() 开始前从 JavaScript 开始 。 其他配置值(push,会话超时等)仍然从此文件被读取,并应用到初始化时.
• 确保基本权限, 如 INTERNET 财务报告和审定财务报表 ACCESS_NETWORK_STATE 内 AndroidManifest.xml。 。 。 .
• 用于推动, 完成 FCM 集成, 以及文档中描述的任何 Braze 特定发送器 ID/ 注册旗 .

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- Enable delayed initialization so the SDK starts when
       Braze.initialize() is called from JavaScript. -->
  <bool name="com_braze_enable_delayed_initialization">true</bool>

  <!-- Additional native configuration (applied at initialization time) -->
  <bool name="com_braze_firebase_cloud_messaging_registration_enabled">true</bool>
  <string translatable="false" name="com_braze_firebase_cloud_messaging_sender_id">YOUR_SENDER_ID</string>
</resources>

说明: API 密钥和端点不再设置于 braze.xml 它们从JavaScript通过 Braze.initialize(apiKey, endpoint)。 。 。 .

iOS系统

cd ios && pod install

使用 BrazeReactInitializer.configure 在你身边 AppDelegate 以注册本地配置。 您提供的封口在以后保存并应用 Braze.initialize(apiKey, endpoint) 从 JavaScript 调用.

import BrazeKit
import braze_react_native_sdk

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  static var braze: Braze? = nil

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    // Register native configuration for when JS calls Braze.initialize().
    BrazeReactInitializer.configure { config in
      config.logger.level = .info
      config.push.automation = true
    } postInitialization: { braze in
      AppDelegate.braze = braze
    }

    // ... React Native setup
    return true
  }
}

• configure 结束: 接收一个 Braze.Configuration 并设置本地配置属性(博客、推、会话等)。 API 密钥和端点由 JavaScript 提供 —— 您不在这里设置 .
• postInitialization 结束 (可选): 接收直播 Braze ,用于需要实例的设置(例如存储参考文献,设置代表).

说明: BrazeReactInitializer.configure 是一个 Swift- first API ,用于替换已贬值的 API BrazeReactBridge.initBraze(_:)它还解决了Swift类型解决的问题 Braze.Configuration 在目标C桥.

配置参考

在反应土著, 配置为本地: Android 读取 res/values/braze.xml,iOS则使用通过 BrazeReactInitializer.configure。当 Braze.initialize(apiKey, endpoint) 从 JavaScript 调用.

Android (英语:braze.xml(中文(简体) )

默认存在 XML ; BrazeConfig.Builder 启动时可以覆盖它们。 密钥和类型的权威列表载于 Android SDK 集成指南 内 BrazeConfigurationProvider (每个克特林财产对应文件) com_braze_* 资源).

常用条目 :

iOS (英语:Braze.Configuration(中文(简体) )

设置本地配置属性于 configure 结束到 BrazeReactInitializer.configure关闭收到 Braze.Configuration 实例——从 JavaScript 自动设置 API 密钥和端点 Braze.initialize 电话 详细情况 : Braze.Configuration 和巢类 api, (中文(简体) ), push, (中文(简体) ), logger, (中文(简体) ), location。 。 。 .

React 原生桥设定 React 专用 api.sdkFlavor / SDK 元数据在 init; 除非 Braze 文档指示您使用, 不覆盖这些元数据 .

JavaScript / 类型脚本 API

包默认导出为 Braze 分类 静态 方法(例如 Braze.changeUser, (中文(简体) ), Braze.logPurchase) (中文(简体) ). 常数,例如 Braze.Events, (中文(简体) ), Braze.Genders,以及 Braze.NotificationSubscriptionTypes 附于同一出口.

核心特征

用户管理

import Braze from "@braze/react-native-sdk";

Braze.changeUser("user-123");
Braze.setEmail("[email protected]");
Braze.setCustomUserAttribute("plan", "premium");
Braze.addAlias("external_id", "marketing_id");
Braze.addToSubscriptionGroup("NEWSLETTER_GROUP_UUID");

可选 SDK 认证: 通过签名作为第二个参数 changeUser,或打电话 Braze.setSdkAuthenticationSignature(signature) 当在仪表板上启用时.

正在应用信件

• 与 默认布雷兹 UI,跟着 正在应用信件文档; 通常是这样 没有 需要打电话 subscribeToInAppMessage 只显示默认的 UI .
• 对于 自定义 处理, 订阅 useBrazeUI: false,然后按需要记录印象/单击:

Braze.subscribeToInAppMessage(false, (event) => {
  const msg = event.inAppMessage;
  // Render your own UI from msg.message, msg.buttons, etc.
  Braze.logInAppMessageImpression(msg);
});

内容卡

const cards = await Braze.getCachedContentCards();
Braze.requestContentCardsRefresh();
Braze.launchContentCards(); // default Braze UI

Braze.logContentCardImpression(cardId);
Braze.logContentCardClicked(cardId);

查看更新内容 Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, ...)。 。 。 .

横幅

import Braze from "@braze/react-native-sdk";

Braze.requestBannersRefresh(["homepage_banner"]);
const banner = await Braze.getBanner("homepage_banner");

// Or use the native Banner view:
// <Braze.BrazeBannerView placementId="homepage_banner" />

推动通知

Braze.requestPushPermission({
  alert: true,
  badge: true,
  sound: true,
});
// Token registration is usually handled natively; see docs for your setup.
Braze.registerPushToken(token);

• getInitialPushPayload:当应用程序从通知中打开时使用,以避免RN Linking 种族条件。 它需要每个平台的本土设置.
  • iOS,附带应用程序 代表启动选项:呼叫 populateInitialPayloadFromLaunchOptions: 打开 BrazeReactUtils 从 application:didFinishLaunchingWithOptions:。 。 。 .
  • iOS,与场景生命周期:呼叫 populateInitialPayloadFromNotificationResponse: 打开 BrazeReactUtils 从 scene:willConnectToSession:options:。 。 。 .
  • 机器人:呼叫 BrazeReactUtils.populateInitialPushPayloadFromIntent 从 MainActivity.onCreate()。 。 。 .
• Braze.addListener(Braze.Events.PUSH_NOTIFICATION_EVENT, ...) 实值 仅限机器人 每个公开打字.

地物标志

const flag = await Braze.getFeatureFlag("new_checkout");
if (flag?.enabled) {
  const rollout = flag.getNumberProperty("rollout_percentage") ?? 0;
}
Braze.refreshFeatureFlags();
Braze.logFeatureFlagImpression("new_checkout");

分析和采购

Braze.logCustomEvent("purchase_completed", { sku: "sku-1" });
Braze.logPurchase("sku-1", "29.99", "USD", 1, { source: "cart" });
Braze.requestImmediateDataFlush();

说明: logPurchase 带 作为字符串的价格 (见打字.

数据管理和SDK状态

changeUser 只告诉 Braze 用户 ID 属性 新设 活动。 没错 没有 清除设备上的 SDK 数据 。 没有单独的“ 登录” API : 如果您需要传统的签出( 清除本地的 Braze 状态, 因此先前用户的缓存配置文件、 信件和令牌都丢失在此安装上) , 您通常使用 wipeData()。这是完全的本地重置 .

Braze.wipeData();
Braze.disableSDK();
Braze.enableSDK();

wipeData() - 清除布拉泽 当地 用于此安装的数据( 指定用户/ 会话/ 卡片状态, 推动符号关联等) 。 用于 退出类型 当您不能将上一个用户的 Braze 状态留在设备上时的行为, 加上 “删除我关于这一装置的数据”, (中文(简体) ), 质量保证 重置, 不重置, 或严格 隐私 流动. changeUser 单靠它不会进行清理——它只设置用户ID接收的设置 新设 事件。 打开 iOS系统,行为可能与Android不同(例如与SDK已禁用状态的相互作用);如果在生产中运输它,请参见Braze的本地文件.

disableSDK() ——停止SDK操作(没有配置的收藏/转发). 用于 用户选择退出 切换, 限制模式 (合规、儿童设置),或 调试 而不去除依赖性.

enableSDK() - 之后把SDK打开 disableSDK()打开 iOS系统,重新授权可能 没有 应用到 下次应用程序启动;在Braze Swift/iOS文档中核实,然后依赖立即重新启用.

活动

订阅 Braze.addListener(event, callback)。调用返回订阅对象;调用 .remove() 在它停止倾听.

设置收听者:

import Braze from "@braze/react-native-sdk";

const subscription = Braze.addListener(
  Braze.Events.CONTENT_CARDS_UPDATED,
  (update) => {
    console.log("Content cards:", update.cards);
  }
);

删除收听器 :

subscription.remove();

在反应组件中, 存储订阅和呼叫 .remove() 在清理中(例如返回 useEffect:

useEffect(() => {
  const sub = Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
    setCards(update.cards);
  });
  return () => sub.remove();
}, []);

综合说明

• 博览: 使用 Braze 博览会插件 尽可能避免手动本地接线.
• 新建筑/涡轮模块: 支持最近的插件版本; 遵循开发者指南和样本 AppDelegate / 迁移时拖曳设置 .
• 隐私(iOS): 方法,例如 updateTrackingPropertyAllowList 支持隐私表 - 相关配置; 参见 快速隐私表。 。 。 .
• 欢乐: 模拟 react-native 本地模块或Braze涡轮模块. 单位测试不在本寄存器中发布.

版本支持

[注] 此 SDK 已被 React 本地版本测试 0.88.0 (简体中文)。 。 。 .

以下表格列表支持由 Braze 插件发布 React Index 版本.

也尊重本地的SDK要求:

• Android SDK 版本信息
• 快速 SDK 版本信息

Braze 博览会插件

关于世博会管理的工作流程,见 Braze 博览会插件仓库。 。 。 .

软件样本

BrazeProject 在这个寄存器库中是一个完整的样本(用户管理,内容卡,特征旗帜,横幅等).

cd BrazeProject/
yarn install
npx react-native start

iOS系统 (从) BrazeProject:

cd ios && pod install && cd ..
npx react-native run-ios

使用 RCT_NEW_ARCH_ENABLED=0 pod install 如果你需要传统建筑.

机器人 (从) BrazeProject:

npx react-native run-android

调试和排除出错

启用 Braze 记录 本地语言 开发过程中的配置,所以SDK会写到系统控制台上(Xcode / Android Logcat). 这有助于验证初始化、用户变化和事件交付.

• iOS系统 - 在那个 configure 结束到 BrazeReactInitializer.configure设置 config.logger.level = .debug (或 .info) (中文(简体) ). 在生产中减少或禁用,因此用户看不到日志.
• 机器人 - 使用 com_braze_logger_initial_log_level 资源 braze.xml 或设置等效于 BrazeConfig.Builder (见 发光器) (中文(简体) ). 使用非动词级别,或在发布前去除覆盖.

关于更深层的故障排除(网络、会话或竞选行为),见 Braze 反应原生开发者指南 和本地 SDK 文件挥发 • 妇女 机器人) (中文(简体) ).

额外资源

• Braze 开发者指南 — react 原生
• 按下通知—— 反应原生
• GitHub 仓库
• npm 软件包

联系人

如需提问,可联系Braze技术支持公司寻求援助.