入门

在本教程中，您将制造一个应用程序，该应用程序在 Superwall 上远程配置的付费墙后面生成励志优惠价格。在此过程中，您将学习：

• 如何集成和使用 Superwall 远程配置您的付费墙。
• 如何使用Webflow制造付费墙。
• 哪些数据标签和变量与您的付费专区有关。
• 什么是活动、规则和简单。
• 如何创建 A/B 测试。
• 如何显示您的付费专区。

将在屏幕页面查看底部运行按钮的欢迎：

点击灵感导航到励志生成器获取价格生成器按钮：

点击的触手可及。

为什么这样的励志名言，使用你应用程序的人可能已经下一个阿诺德施瓦格了。当人们可以将它变成辛昂会的这些内容的时候，为什么呢？

在 Xcode 中，您将看到一个名为Products.storekit的 StoreKit 测试配置，包含可三个自动更新的订阅，每个订阅都有一周的免费试用期。StoreKitService.swift提供了一些代码来帮助实现应用内订阅。

您的任务是一个远程配置的付费墙，使用这些产品来访问这些报价。

了解Superwall的工作原理

在深入研究之前，重要的是要从高度了解远程付费墙设置的工作原理。

下图显示了 Superwall 生态系统：

• Superwall的控制板您可以在其中专区配置、查看管理用户等仪表，并与 Superwall API 以配置和查看板存储您的配置，并提供给您的 SDK。
• Superwall API：API 是所有 Superwall 服务用于通信的中间人。SDK 与 API 通信以加载您的付费墙配置，准备好进行演示。
• 付费：所有付费墙都是在面板模板的网页上，供您在中进行配置。
• 已经的付费墙：SDK 将付费模板加载到丑陋的模板UIWebView中，并执行 javascript 替换文本配置和产品信息。然后将其呈现给您的用户。您可以在用户付费专区中的当众应用时，SDK开发人员会为您带来可能的成本。购买和恢复。

探索仪表板

事不宜迟，在 Superwall的网站上注册一个免费帐户。

注册并输入您的应用程序详细信息后，您将看到仪表板：

这有很多用途，包括：

• 创建新的付费墙。
• 分析、编辑和控制现有的付费墙。
• 查看付费专区指标。
• 定义何时向用户显示付费墙的条件。
• 通过您的应用程序和付费墙查看用户和用户程序。

在付费专区部分，您会看到已经为您创建了一个示例付费专区：

创作示例墙，您将看到一个付费数据的显示界面：

设置边栏

左侧边栏是您配置付费区的地方。它分为三个专门部分：

一般
您可以看到付费示例的 URL 。

演示
此控制应用内付费的颜色区域的演示样式和专用背景。

指定使用
价格，您可以在上面设置相应的应用程序中的 API 。自动从附加您到产品的任何产品中加载您的产品以供选择。

付费专区预览部分

在页面中心，您将看到可供选择的数据以显示其顶部的显示价格：

您可以预览不同的付费本地化、有无免费试用区的外观以及在不同设备上的外观。

将悬停在付费专区上，您会看到付费专区的某个元素周围出现悬停：

是由于附加文本到可配置的元素，稍后您会自动检测到这些元素。通过点击一个出现，确定其将了解您的这些元素 ， 并且文本在元素的属性中边边：

在这里，您输入元素的默认和免费试用状态的文本。当 SDK 在主要产品中到免费试用且用户尚未使用免费试用时，会显示免费试用。

所有免费试用文本都继承自默认文本。对于这个应用程序，您不会使用这个额外的字段。

单击参考，您将看到示例产品的变量数据列表，您可以在文本中参考：

您现在已经了解了如何在仪表板上配置付费专区。

了解活动

您如何确定何时向用户显示配置的付费专区？以及针对哪一组用户？这就是广告系列的用武之地。

活动允许您定义何时向用户显示付费墙的条件。它们将三个概念联系在一起：

1. 触发器：从您的应用发送的分析事件。
2. 规则：确定何时显示付费专区的逻辑。
3. 付费墙。

您可以将活动想象如下：触发这些触发器时，评估这些规则并显示这些付费墙。

返回仪表板并向下滚动到名为Campaigns的部分：

您会看到那里已经有两个活动：手动演示和示例活动。单击示例营销活动。

触发器

在页面顶部是您添加事件触发器的位置。在这个活动中，已经有一个叫做campaign_trigger：

稍后，您的应用将通过 SDK 发送此事件。您可以为触发器命名几乎任何您喜欢的名称，只要您从您的应用程序中发送它即可。

Superwall自动跟踪事件，其中一些可能是触发器。具体来说：

• app_install : 首次配置 SDK。
• app_launch：在应用程序从冷启动启动时。
• session_start：在应用程序从冷启动或应用程序离开前台后至少 30 秒后打开。

规则

在页面下方，您会看到一条规则设置为true：

这样一来true，所有用户都将匹配该规则。但是，您可以拥有更复杂的规则以及多个规则集。规则按顺序进行评估，一旦用户匹配一个规则，就不会评估其他规则。如果用户不符合规则，则不会向他们显示付费专区。

规则使用一种名为Liquid的语言，它是 Shopify 编写的框架。稍后您会看到它再次用于产品数据。编写规则时，您可以访问用户数据，以及随 SDK 触发器发送的参数。以下是您可以使用的一些示例规则：

• user.days_logged >= 3
• user.genre == "jazz" or user.genre == "classical"
• params.outcome contains "substring"

查看Superwall 文档以获取完整的操作员列表。

付费墙

每条规则下方是一组付费墙。您会看到一个付费墙分配给 100% 的用户。事实上，这就是您之前看到的示例付费墙：

如果您愿意，您可以向此规则添加多个付费专区，并将每个付费专区分配给一定比例的用户。如果您不是 100% 的用户，而是仅将 10% 的用户分配到付费专区，那么剩余的 90% 将看不到付费专区，这意味着他们在坚持组中。所有这些功能都可以运行A/B 测试来确定最有效的付费墙，您稍后会这样做。

以上是一个非常简单的设置，但是，高级设置是可能的。查看Superwall 文档了解更多信息。

您现在已经了解了仪表板的工作原理。下一步是将 SDK 集成到您的应用程序中并触发您的第一个付费墙！

集成 Superwall SDK

添加 Superwall iOS SDK

要在您的应用程序中显示付费墙，您首先需要将名为Paywall的 Superwall iOS SDK作为 Swift 包添加到您的项目中。

在 Xcode 中，选择File ▸ Add Packages... ，然后将 Paywall 包 URL 粘贴到搜索栏中。

https://github.com/superwall-me/paywall-ios

将Dependency Rule设置为Up To Next Major Version并指定2.0.0作为下限。然后，单击添加包：

初始化 SDK

接下来，您需要在应用启动时初始化 SDK。在Paywall文件夹中，添加一个新文件：PaywallService.swift。然后，添加以下代码：

导入付费墙

最终 类 PaywallService {
  静态 让共享=  PaywallService ()

  静态 函数 initPaywall () {
     Paywall .configure(
      apiKey: "YOURAPIKEY" ,
      代表：共享
    )
  }
}

在这里，您创建一个单例类，其中包含一个配置付费墙并将委托设置为共享PaywallService实例的函数。

打开 Superwall 仪表板，单击右上角的齿轮，选择Keys并复制Public API Key：

回到PaywallService，替换YOURAPIKEY为您的公共 API 密钥。

符合委托人

接下来，您需要符合PaywallDelegate. 这处理来自 SDK 的回调。

在文件顶部，添加：

导入StoreKit

然后，将以下扩展名添加到文件底部：

extension  PaywallService : PaywallDelegate {
   // 1 
  func  purchase ( product : SKProduct ) {
     Task {
       try?  等待 StoreKitService .shared.purchase(product)
    }
  }

  // 2 
  func  restorePurchases ( completion : @escaping ( Bool ) -> Void ) {
     let result =  StoreKitService .shared.restorePurchases()
    完成（结果）
  }

  // 3 
  func  isUserSubscribed () -> Bool {
     return  StoreKitService .shared.isSubscribed
  }
}

以下是每种方法的作用：

1. 购买给定的产品。
2. 尝试恢复购买并告诉 SDK 恢复是否成功。
3. 告诉 SDK 用户是否有活动订阅。

打开AppMain.swift并将以下内容添加到结构的顶部：

@UIApplicationDelegateAdaptor ( AppDelegate.self )私有变量appDelegate _ _
 

这使您可以从您的应用程序访问应用程序委托功能。接下来，在根项目文件夹中添加一个新文件AppDelegate.swift并粘贴以下内容：

导入UIKit

最终 类 AppDelegate : UIResponder , UIApplicationDelegate {
   func  application (
     _  application : UIApplication ,
     didFinishLaunchingWithOptions  launchOptions :
  [用户界面应用程序。LaunchOptionsKey：任何] ？ =  nil 
  ) -> Bool {
     PaywallService .initPaywall()
    任务{
       await  StoreKitService .shared.loadSubscriptionState()
    }
    返回 真
  }
}

当您的应用程序完成启动时，它会调用PaywallService.initPaywall()并加载订阅状态。

构建并运行您的应用程序。您不会注意到任何视觉变化。但是，如果您前往 Superwall 仪表板，您会注意到入职清单中的前两项已勾选。您已成功配置 Paywall SDK：

触发付费墙

在您的应用程序中显示付费专区的理想位置是当用户按下“获得灵感” 按钮时。发生这种情况时，您需要触发事件campaign_trigger。您可以使用两种类型的触发器：隐式和显式。

显式触发付费墙

triggerPaywall(forEvent:withParams:shouldPresent:onPresent:onDismiss:onFail:)您可以通过将视图修饰符添加到视图来显式触发付费墙。这为您提供了与付费墙演示相关的完成处理程序。付费专区显示以下情况：

• 您提供的事件名称在仪表板上的活动中具有活动触发器。
• 用户匹配活动中的规则。
• 并且绑定到您提供的布尔值是 true

它采用以下参数：

• event：您希望触发的事件的名称。
• params：您可以传递给触发器的可选参数。您可以在活动中定义的规则中参考这些参数。
• shouldPresent：与布尔值的绑定，用于确定是否显示付费专区。
• onPresent：在展示付费专区后调用的可选关闭。这接受一个可选PaywallInfo对象，其中包含有关付费专区的信息。
• onDismiss：通过购买、恢复或手动关闭付费墙后调用的可选关闭。它接受一个PaywallDismissalResult对象。这有一个paywallInfo属性，其中包含有关付费专区的信息和一个state为您提供解雇原因的属性。如果您以编程方式设置isPresented为 false 以关闭付费专区，则不会调用此闭包。
• onFail：当付费墙的演示失败时调用的可选完成块。接受NSError更多细节。您应该检查错误代码以处理 onFail 回调。如果错误代码是4000，则表示用户没有匹配任何规则。如果错误代码是4001，则表示用户在保留组中。任何其他代码都意味着发生了错误。

隐式触发付费墙

如果您不需要完成处理程序，您可以通过调用隐式触发付费墙track(_:_:)：

付费墙 .track(
   "DidViewFiveMotivationalQuotes" ,
  [ “totalTimeSpentInApp”：2034 ]
)

建议您跟踪所有此类分析事件，以防您将来需要为其附加付费墙！

向您的应用添加触发器

对于您的应用程序，显式触发器是可行的方法。为此，请打开WelcomeView.swift并将以下内容添加到结构的顶部：

@State  private  var showPaywall =  false

然后，在正文中的修饰符triggerPaywall(forEvent:shouldPresent:onDismiss:)下方添加：overlay(_:alignment:)

.triggerPaywall(
  forEvent: "campaign_trigger" ,
  shouldPresent: $showPaywall ,
  onDismiss: { 导致切换
    result.state {
     case .purchased,
      .恢复：
      showMotivationView =  true 
    case .close:
       break
    }
  }
)

这会将变量作为绑定传递给视图修饰符，并在为真时showPaywall尝试触发事件的付费墙。当您购买或恢复产品时，它会在解雇时显示。campaign_trigger``showPaywall``MotivationView

最后，在里面continueButton()，替换showMotivationView = true为：

如果 StoreKitService .shared.isSubscribed ==  true {
  showMotivationView =  true 
} else {
  showPaywall = 真
}

这将检查用户是否有订阅。如果有，点击按钮导航到 MotivationView。如果他们不这样做，该应用程序会显示付费专区。

构建并运行您的应用程序。点击获得灵感按钮并查看您的付费墙触发！

前往仪表板，您将在入职列表中看到以下几个步骤：

现在，您的应用程序中有工作逻辑来显示付费墙。不幸的是，产品定价不显示，继续购买产品的按钮不起作用！您可以返回付费专区配置并输入产品数据来解决此问题。但是您已经决定要构建和托管自己的付费专区网页，而不是使用提供的示例付费专区。对你有益！为此，您将使用 Webflow。

创建 Webflow 帐户

Webflow 是一个简单的无代码网站构建器，具有免费的入门计划。此外，Superwall 提供了一个可克隆的 Webflow 模板，其中包含移动支付屏幕中的许多常见元素。通过使用这些元素，您将能够立即设置付费墙！

如果您是 Webflow 的新手，则需要创建一个新帐户。前往Webflow 网站并单击开始使用 - 它是免费的按钮：

接下来，填写您的姓名，单击设置屏幕并点击完成按钮。您对设置问题给出什么回答并不重要：

您将重定向到网站构建教程，但您可以忽略它，因为本教程不需要它。如果您通过电子邮件注册，则需要按照他们发送给您的电子邮件中的说明验证您的电子邮件地址，然后再继续。

使用 Webflow 构建付费墙

现在，访问 Webflow 上的Superwall 可克隆项目，然后单击克隆项目：

您将看到克隆站点，您应该在其中单击创建站点以确认您的选择。接下来，为您的项目输入一个名称，然后单击Clone project：

您会看到一个网站构建器，其中包含您可能在移动付费专区看到的大量元素。如果您从头开始创建付费专区，您可以从这里挑选有用的元素并将它们复制并粘贴到您自己的设计中：

为了降低复杂性，您将调整预先设计的页面之一。单击左上角的页面：所有组件以打开 页面面板。这向您展示了您网站的结构。找到Simple Checklist (Calm) 页面并单击它：

您将看到基于 Calm 应用付费专区设计的付费专区：

将 Paywall.js 添加到您的付费墙

在为 Superwall 创建付费墙网页时，您必须包含其名为Paywall.js的神奇脚本。这充当了 Superwall 客户端 SDK 和呈现给用户的网页之间的接口。

通常，您会将以下代码放在<head>页面标签内，以将 Paywall.js 添加到您的网页：

< script  async  src = "https://cdn.superwall.me/runtime/entrypoint.js" > </ script >

要在 Webflow 中执行此操作，您需要一个付费帐户。但不要担心，因为 Superwall 模板已经有了这个。

付费专区数据标签

Paywall.js 的核心是数据标签。这些是特定属性，其对应的值附加到网页上的元素。它们允许 Paywall.js 解释用户反馈并将信息传输到客户端 SDK 和从客户端 SDK 传输信息。Paywall.js 还与 Superwall 仪表板接口，并支持七种类型的数据标签。以下是最常用的：

• data-pw-close：这将关闭付费专区。它的值没有被使用。
• data-pw-restore：这会恢复设备上的购买。它的值没有被使用。
• data-pw-var：这告诉 Superwall HTML 标记的内容可通过 Superwall 仪表板进行配置。它的值定义要在仪表板中显示的标签的变量名称。
• data-pw-purchase：这会初始化购买。它的值必须是primary,secondary或tertiary。这是指在您的 Superwall 付费专区配置中定义的相应产品（稍后会详细介绍）。

有关数据标签的完整列表，请参阅Superwall 的文档。

要查看如何使用这些，请单击7 天免费试用链接，然后单击右上角的齿轮以打开元素设置面板。在Custom Attributes中，您会看到添加了一个数据标签：

您将访问此面板并在需要添加数据标签时按 +按钮添加自定义属性。 花几分钟点击不同的元素，看看这个付费墙里面发生了什么。

准备好后，单击Publish然后Publish to Selected Domains：

几秒钟后，您将成功将付费墙发布到 Webflow 托管的域！单击付费专区目的地旁边的链接图标以查看您的付费专区网站：

复制此网页的地址，因为您将在下一步中需要它。

将您的付费专区与 Superwall 集成

您现在可以配置新的付费专区。在Superwall 仪表板上，单击 Paywalls 下的Create New按钮：**

在出现的弹出窗口中，在 URL 字段中输入上一步中的Gym Motivation App名称和付费专区网页的 URL。点击创建：

您将看到一个用于创建付费专区的界面。在设置侧边栏中，将Background Color Hex设置为 #000000，即黑色。保持演示风格不变。

设置边栏

在 Xcode 中，打开Products.storekit并复制Yearly 20.99产品的产品 ID：**

然后，回到 Superwall 网站，将您的产品 ID 粘贴到Primary Product Identifier字段中。分别对Secondary Product Identifier和Tertiary Product Identifier的六个月和每月产品 ID 重复此操作：

将鼠标悬停在付费专区预览上，您会在付费专区中指定数据标签的所有元素周围看到灰色边框：

通过 Liquid 访问产品属性

Paywall 元素可以访问和操作使用前面提到的称为 Liquid 的语言指定的任何产品属性。

您可以使用双花括号访问产品对象。以下是一些你可以做的事情的例子：

• {{ primary.price }}：输出初级产品价格。
• {{ primary.rawPrice | divided_by: 12 | round: 2 }}：将主要价格除以 12，然后将其四舍五入（最多）两位小数。
• {{ secondary.currencyCode | downcase }}：输出次要产品货币代码的小写版本。

Liquid 用途广泛，值得仔细阅读它的文档。

付费专区预览部分

目前，您的字段使用从您的付费专区网页获取的硬编码值和文本。是时候改变这一点了。

出于本文的目的，您将使用右侧的元素下拉菜单来选择付费专区上的元素：

点击下拉菜单，输入Badge Text并编辑默认文本：

{{ primary.trialPeriodText }} 免费试用

这会从您的主要产品中获取试用期文本并将其输出。

当您在这些字段中键入文本时，预览中的文本会实时更新。它将产品数据替换为变量参考下的样本数据。在您的应用中，它将使用真实的产品数据。

单击预览底部的其他计划以显示完整的计划列表：

你们的价格都是 0.00 美元，这并不理想！通过将Primary Product Strike Through元素替换为：

{{ primary.currencySymbol }}{{ primary.rawPrice | 加：10 }}

这使主要产品的价格增加了 10 美元。

将主要产品线 1替换为：

{{ primary.price }} 每 {{ primary.period }}

并将主要产品线 2替换为：

{{ primary.trialPeriodText }} 免费试用

查看付费专区预览，您会看到主要产品的价格已从全零更改为反映示例数据（根据您的示例数据，您可能会看到不同的结果）：

继续完成其余项目，将二级产品线 1替换为：

{{ secondary.price }} 每 {{ secondary.periodAlt }}

注意你是如何使用periodAlt而不是period. 这是因为您的次要产品将是六个月的产品并periodAlt考虑周期单位。

接下来，将二级产品线 2替换为：

{{ secondary.trialPeriodText }} 免费试用

对第三产品线 1进行类似的替换：

{{ tertiary.price }} 每 {{ tertiary.period }}

第三产品线2 ：

{{ tertiary.trialPeriodText }} 免费试用

现在，将主要 CTA 字幕替换为：

{{ primary.price }}/{{ primary.period }} 免费试用后

和下一个辅助 CTA 字幕：

{{ secondary.price }}/{{ secondary.periodAlt }} 免费试用后

最后，将Tertiary CTA Subtitle替换为：

{{ tertiary.price }}/{{ tertiary.period }} 免费试用后

您的付费专区现在已填充其所有产品值：

创建和启用付费墙

单击顶部的保存按钮，然后返回仪表板。

您将在“付费专区”部分看到您新创建的付费专区：

在您的示例广告系列中，您需要将用户重新分配到新的付费专区，因此请点击示例广告系列并点击示例付费专区角落的x将其删除：

注意：每当您删除付费专区时，当前分配给它的任何用户都会被视为新用户。

然后，单击确认以删除付费专区：

接下来，点击 + 添加付费墙：

然后，从下拉列表中选择您的Gym Motivation App付费专区，然后单击创建：

您的新付费专区现在是您的广告系列的一部分。但是，默认情况下它不会将任何人分配给它。通过单击0% of users将其更改为100并单击复选标记进行确认：

现在构建并运行您的应用程序。点击Get Inspired按钮，您会看到新的付费专区充满了您的产品数据：

点击继续按钮并点击订阅以购买产品。购买后，付费墙将关闭，您将导航到 MotivationView：

打开Superwall 仪表板以确认已选中的五个入职步骤：

测试付费墙变体

假设您在 App Store 上发布了您的应用，但感觉年度订阅价格太贵了。您想引入较低的价值以查看是否获得更多买家。使用 Superwall，您可以同时运行多个付费专区。

首先，在 Xcode 中打开Products.storekit 。 通过点击左下角的 + 按钮添加新的自动续订订阅，然后添加自动续订订阅：

将订阅添加到Gym Motivation Pro订阅组，然后单击完成：

在边栏中选择新订阅后，填写详细信息：

• 参考名称: 每年 18.99
• 产品编号：gm_1899_1y
• 价格：18.99
• 订阅期限：1 年

添加介绍性优惠：

• 优惠类型：免费
• 持续时间: 1 周

然后，双击英语（美国） 本地化，将Display Name设置为Gym Motivation Pro并将Description设置为Yearly Subscription：

现在您已经设置了新产品，请前往Superwall 仪表板。在Paywalls下，单击您的付费专区的重复图标：

将其命名为Gym Motivation App – Lower Price并单击Duplicate。这会将您带到付费专区编辑器。选择 Products 选项卡并将Primary Product Identifier更改为gm_1899_1y：

单击保存并返回仪表板。在 Campaigns 下，单击Example Campaign并通过单击 + Add Paywall将新的付费墙变体添加到您的规则中：

从下拉列表中选择您的付费专区Gym Motivation App – Lower Price ，然后单击 Create：

然后，在您新添加的付费专区上方，单击0% of users，将两个付费专区的值都设置为50，然后单击复选标记以确认您的新流量分配：

您现在有一个同时运行两个付费墙的 A/B 测试，它们之间的流量分配为 50/50。

最后

您可以通过单击本教程顶部或底部的“下载材料”按钮来下载完整的项目。

这个项目触及了你可以用 Superwall 做什么的表面。还有很多东西要学，包括：

• 识别用户。
• 分配用户属性。
• 应用内付费墙预览。
• 游戏控制器支持。
• 图表和分析。
• 第三方分析。
• 自定义付费专区按钮。

点击下载项目资料与查看原文

这里也推荐一些面试相关的内容！

• ①　BAT等各个大厂iOS面试真题+答案大全

• ②　iOS中高级开发必看的热门书籍（经典必看）

• ③　iOS开发高级面试"简历制作"指导

• ④　iOS面试流程到基础知识大全