在 Flutter SDK 中获取付费墙编辑工具创建的付费墙及其配置

在 Adapty 看板中使用新版付费墙编辑工具设计好付费墙的视觉部分后,你就可以在移动应用中展示它了。整个流程的第一步,是获取与版位关联的付费墙及其视图配置,具体方式如下所示。

新版付费墙编辑工具需要 Flutter SDK 3.3.0 或更高版本。

请注意,本文档涉及的是通过付费墙编辑工具自定义的付费墙。如果你是手动实现付费墙,请参阅在移动应用中为远程配置付费墙获取付费墙和产品

想了解 Adapty SDK 如何集成到移动应用中的真实示例?请查看我们的示例应用,其中展示了完整的配置过程,包括显示付费墙、完成购买以及其他基本功能。

在移动应用中展示付费墙之前(点击展开)
  1. 在 Adapty 看板中创建产品
  2. 在 Adapty 看板中创建付费墙并将产品添加进去
  3. 在 Adapty 看板中创建版位并将付费墙添加进去
  4. 在移动应用中安装 Adapty SDK

获取使用付费墙编辑工具设计的付费墙

如果你已经使用付费墙编辑工具设计了付费墙,则无需在移动应用代码中手动渲染,即可将其呈现给用户。此类付费墙同时包含展示内容和展示方式。不过,你仍需通过版位获取其 ID 和视图配置,然后在移动应用中展示它。

为了确保最佳性能,务必尽早获取付费墙及其视图配置,以便在向用户展示之前有足够的时间完成图片下载。

使用 getPaywall 方法获取付费墙:

try {
  final paywall = await Adapty().getPaywall(placementId: "YOUR_PLACEMENT_ID", locale: "en");
  // the requested paywall
} on AdaptyError catch (adaptyError) {
  // handle the error
} catch (e) {
}

参数说明:

参数是否必填描述
placementId必填目标版位的标识符。这是你在 Adapty 看板中创建版位时指定的值。
locale

可选

默认值:en

付费墙本地化的标识符。该参数应为由一个或两个子标签组成的语言代码,子标签之间用连字符(-)分隔。第一个子标签表示语言,第二个子标签表示地区。

示例:en 表示英语,pt-br 表示巴西葡萄牙语。

有关语言代码的更多信息及使用建议,请参阅本地化与语言代码

fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,失败时返回缓存数据。我们推荐此方式,因为它能确保用户始终获得最新数据。

但如果你认为用户的网络连接不稳定,可以考虑使用 .returnCacheDataElseLoad,在缓存存在时直接返回缓存数据。这样用户获取的数据可能不是最新的,但加载速度会更快,网络状况再差也不影响体验。缓存会定期更新,在会话期间使用缓存以减少网络请求是安全的。

注意:缓存在应用重启后仍然保留,只有在重新安装应用或手动清理时才会被清除。

Adapty SDK 在本地以两层方式存储付费墙:上述定期更新的缓存,以及备用付费墙。我们还使用 CDN 加速付费墙加载,并在 CDN 不可达时提供独立的备用服务器。该系统旨在确保你始终获得最新版本的付费墙,同时在网络状况较差时也能保证可靠性。

loadTimeout默认值:5 秒

该值限制此方法的超时时间。超时后将返回缓存数据或本地备用数据。

注意:在极少数情况下,此方法的实际超时时间可能略晚于 loadTimeout 指定的时间,因为底层操作可能包含多个请求。

对于 Android:可以使用扩展函数创建 TimeInterval(例如 5.seconds,其中 .seconds 来自 import com.adapty.utils.seconds),或者使用 TimeInterval.seconds(5)。如需不限制超时,请使用 TimeInterval.INFINITE

返回值参数:

参数描述
Paywall一个 AdaptyPaywall 对象,包含产品 ID 列表、付费墙标识符、远程配置及其他若干属性。

获取使用付费墙编辑工具设计的付费墙视图配置

请确保在付费墙编辑工具中开启了 Show on device 开关。如果未开启此选项,将无法获取视图配置。

获取付费墙后,检查其是否包含 ViewConfiguration,该字段表示付费墙是通过付费墙编辑工具创建的。这将帮助你判断如何展示该付费墙。如果存在 ViewConfiguration,则将其作为付费墙编辑工具付费墙处理;否则,将其作为远程配置付费墙处理


try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

获取视图后,展示付费墙

获取默认目标受众的付费墙以加速加载

通常情况下,付费墙的获取几乎是即时的,无需担心加速问题。但如果你设置了大量目标受众和付费墙,且用户网络状况较差,获取付费墙可能比预期耗时更长。在这种情况下,你可能希望展示默认付费墙,以保证流畅的用户体验,而不是什么都不显示。

为此,你可以使用 getPaywallForDefaultAudience 方法,该方法会获取指定版位中 All Users 目标受众对应的付费墙。但请务必注意,推荐的做法仍然是使用 getPaywall 方法,详见上方获取付费墙信息部分。

为什么我们推荐使用 getPaywall

getPaywallForDefaultAudience 方法存在以下几个明显缺陷:

  • 潜在的向后兼容性问题:如果你需要为不同的应用版本(当前版本和未来版本)展示不同的付费墙,可能会面临挑战。你要么得设计兼容当前(旧)版本的付费墙,要么接受当前(旧)版本的用户可能遇到付费墙无法渲染的问题。
  • 失去精准定向:所有用户都将看到为 All Users 目标受众设计的同一个付费墙,这意味着你将失去个性化定向能力(包括基于国家、营销归因或自定义属性的定向)。

如果你愿意接受这些缺陷以换取更快的付费墙加载速度,请按如下方式使用 getPaywallForDefaultAudience 方法。否则,请继续使用上文描述的 getPaywall

try {
    final paywall = await Adapty().getPaywallForDefaultAudience(placementId: 'YOUR_PLACEMENT_ID');
} on AdaptyError catch (adaptyError) {
    // handle error
} catch (e) {
    // handle unknown error
}

getPaywallForDefaultAudience 方法从 Flutter SDK 3.2.0 版本开始支持。

参数是否必填描述
placementId必填版位的标识符。这是你在 Adapty 看板中创建版位时指定的值。
locale

可选

默认值:en

付费墙本地化的标识符。该参数应为由一个或多个子标签组成的语言代码,子标签之间用连字符(-)分隔。第一个子标签表示语言,第二个子标签表示地区。

示例:en 表示英语,pt-br 表示巴西葡萄牙语。

有关语言代码的更多信息及使用建议,请参阅本地化与语言代码

fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,失败时返回缓存数据。我们推荐此方式,因为它能确保用户始终获得最新数据。

但如果你认为用户的网络连接不稳定,可以考虑使用 .returnCacheDataElseLoad,在缓存存在时直接返回缓存数据。这样用户获取的数据可能不是最新的,但加载速度会更快,网络状况再差也不影响体验。缓存会定期更新,在会话期间使用缓存以减少网络请求是安全的。

注意:缓存在应用重启后仍然保留,只有在重新安装应用或手动清理时才会被清除。

自定义素材资源

如需自定义付费墙中的图片和视频,可以使用自定义素材资源。

主图和视频有预定义的 ID:hero_imagehero_video。在自定义素材资源包中,你可以通过这些 ID 定位相应元素并自定义其行为。

对于其他图片和视频,你需要在 Adapty 看板中设置自定义 ID

例如,你可以:

  • 向部分用户展示不同的图片或视频。
  • 在远程主图加载时,先展示本地预览图。
  • 在播放视频前先展示预览图。

如需使用此功能,请将 Adapty Flutter SDK 更新至 3.8.0 或更高版本。

以下是通过简单字典提供自定义素材资源的示例:


final customAssets = {
    // Show a local image using a custom ID
    'custom_image': AdaptyCustomAsset.localImageAsset(
        assetId: 'assets/images/image_name.png',
    ),

    // Show a local video with a preview image
    'hero_video': AdaptyCustomAsset.localVideoAsset(
        assetId: 'assets/videos/custom_video.mp4',
    ),
};

try {
    final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
        customAssets: <CUSTOM_ASSETS>,
        preloadProducts: preloadProducts,
        );
    } on AdaptyError catch (e) {
        // handle the error
    } catch (e) {
// handle the error
}

如果找不到某个素材资源,付费墙将回退到默认外观。

设置开发者自定义计时器

如需在移动应用中使用自定义计时器,请创建一个遵循 AdaptyTimerResolver 协议的对象。该对象定义了每个自定义计时器的渲染方式。如果你愿意,也可以直接使用 [String: Date] 字典,因为它已经符合该协议。示例如下:


try {
  final view = await AdaptyUI().createPaywallView(
        paywall: paywall,
        customTimers: {
          'CUSTOM_TIMER_6H': DateTime.now().add(const Duration(seconds: 3600 * 6)),
          'CUSTOM_TIMER_NY': DateTime(2025, 1, 1), // New Year 2025
        },
      );
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

在这个示例中,CUSTOM_TIMER_NYCUSTOM_TIMER_6H 是你在 Adapty 看板中设置的开发者自定义计时器的 Timer IDtimerResolver 确保你的应用为每个计时器动态更新正确的值。例如:

  • CUSTOM_TIMER_NY:距离计时器结束(如元旦)的剩余时间。
  • CUSTOM_TIMER_6H:从用户打开付费墙开始计算的 6 小时倒计时剩余时间。