在 React Native SDK 中渲染通过远程配置设计的付费墙

如果你使用远程配置自定义了付费墙,需要在移动应用代码中自行实现渲染逻辑,才能将其展示给用户。由于远程配置灵活度高、完全按需定制,付费墙的内容和样式完全由你掌控。我们提供了获取远程配置的方法,让你可以自主展示通过远程配置设置的自定义付费墙。

获取付费墙远程配置并展示

要获取付费墙的远程配置,请访问 remoteConfig 属性并提取所需的值。

try {
  const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
  const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
  // handle the error
}

到这一步,你已经获取了所有必要的值,接下来需要将它们渲染并组合成一个美观的页面。请确保设计能够适配各种手机屏幕尺寸和方向,在不同设备上提供流畅、易用的体验。

请务必按照以下说明记录付费墙查看事件,以便 Adapty 分析系统能够采集漏斗和 A/B 测试所需的数据。

展示付费墙后,继续设置购买流程。当用户发起购买时,只需用付费墙中的产品调用 .makePurchase()。有关 .makePurchase() 方法的详细信息,请参阅发起购买

我们建议创建一个备用付费墙(即备用付费墙)。当没有网络连接或缓存时,系统会向用户展示该备用付费墙,确保在这些情况下依然提供流畅的体验。

追踪付费墙展示事件

Adapty 帮助你衡量付费墙的表现。购买数据会自动收集,但付费墙的展示记录需要你手动上报,因为只有你知道用户何时看到了付费墙。

要记录付费墙展示事件,只需调用 .logShowPaywall(paywall),该事件将反映在漏斗和 A/B 测试的付费墙数据图表中。

如果你展示的付费墙是通过付费墙编辑工具创建的,则无需调用 .logShowPaywall(paywall)

await adapty.logShowPaywall(paywall);

请求参数:

参数是否必填描述
paywall必填一个 AdaptyPaywall 对象。