在 Capacitor SDK 中渲染远程配置设计的付费墙

如果你通过远程配置自定义了流程，则需要在移动端代码中实现渲染逻辑，才能将其展示给用户。由于远程配置提供了高度灵活性，你可以完全掌控其中包含的内容以及流程视图的呈现方式。我们提供了一个获取远程配置的方法，让你能够自主展示通过远程配置设置的自定义流程。

获取流程远程配置并展示

在 v4 中，每个流程在 remoteConfigs 数组中为每种已配置的语言包含一条 AdaptyRemoteConfig 条目。选择与用户偏好匹配的语言，然后从其 data 中读取所需的值。


try {
  const flow = await adapty.getFlow({ placementId: 'YOUR_PLACEMENT_ID' });
  const config = flow.remoteConfigs?.find((c) => c.lang === 'en')
    ?? flow.remoteConfigs?.[0];
  const headerText = config?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch flow:', error);
}

此时，一旦您获取到所有必要的数据，就可以开始渲染并将其组装成视觉效果出色的页面。请确保设计能够适配各种移动设备的屏幕尺寸和方向，为不同设备上的用户提供流畅且友好的体验。

请务必按照以下说明记录付费墙查看事件，以便 Adapty 分析模块能够为漏斗和 A/B 测试收集相关数据。

在完成流程展示后，继续设置购买流程。当用户发起购买时，只需调用 .makePurchase() 并传入来自流程的产品即可。有关 .makePurchase() 方法的详细信息，请参阅发起购买。

我们建议创建一个备用付费墙（即备用付费墙）。当用户没有网络连接或缓存不可用时，该备用付费墙会自动展示，确保用户在任何情况下都能获得流畅的体验。

追踪付费墙浏览事件

Adapty 帮助您衡量流程的表现。购买数据会自动收集，但流程浏览事件需要您手动记录，因为只有您知道用户何时看到了流程。

要记录流程浏览事件，只需调用 .logShowFlow({ flow })，该事件即会反映在付费墙漏斗和 A/B 测试的数据指标中。

如果你通过 Flow Builder 或 Paywall Builder 渲染流程或付费墙，无需调用 .logShowFlow({ flow })。Adapty 会在这些情况下自动追踪展示次数。


await adapty.logShowFlow({ flow });

请求参数：

参数	是否必填	描述
flow	必填	通过 `adapty.getFlow({ placementId })` 获取的 `AdaptyFlow` 对象。

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

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

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


try {
  const paywall = await adapty.getPaywall({ 
    placementId: 'YOUR_PLACEMENT_ID',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  const headerText = paywall.remoteConfig?.data?.['header_text'];
} catch (error) {
  console.error('Failed to fetch paywall:', error);
}

此时，一旦获取到所有必要的数据，就可以开始渲染并将其组合成美观的页面。请确保设计能够适配不同尺寸的手机屏幕和屏幕方向，在各类设备上提供流畅、友好的用户体验。

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

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

我们建议创建一个名为备用付费墙的备份付费墙。当用户没有网络连接或没有可用缓存时，将向其展示该备份付费墙，确保即使在这些情况下也能提供流畅的体验。

记录付费墙查看事件

Adapty 可帮助您衡量付费墙的表现。虽然我们会自动收集购买数据，但记录付费墙查看事件需要您的配合，因为只有您才知道用户何时查看了付费墙。

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

如果您展示的是在付费墙编辑工具中创建的付费墙，则无需调用 .logShowPaywall(paywall)。


try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}

请求参数：

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