amp-story-subscriptions

<script async custom-element="amp-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>

摘要

此组件使 Web Stories 能够以遵循 amp-subscriptions 和 amp-subscriptions-google 的方式支持付费墙和订阅。它使发布商能够配置其故事以显示付费墙，并通过授权 URL 和其他配置集成到其后端。

指定订阅配置的方式对于经典 AMP 页面和 Web Story 都是相同的。有关配置的更多详细信息，请参阅 amp-subscriptions 配置。

该扩展提供了一个简单的 UI 和功能，可以显示付费墙底部面板，并管理锁定内容的阻止/解除阻止。

重要提示：请先阅读 amp-subscriptions 和（可选）amp-subscriptions-google 的 API 文档，并确保您已设置好这些基本功能，然后再与此组件集成。

工作原理

1. 发布商可以使用该组件配置 Web Story 以实现付费墙。
   • 付费墙不能在故事的前两页或最后一页，或者少于 4 页的故事上触发。
2. 当用户导航到故事的第一个付费墙页面时，将通过以下方式检查用户是否具有访问权限：。如果为是，则用户可以不受任何中断地消费故事。
3. 如果未授予访问权限，则会在页面底部显示付费墙底部面板。付费墙仅阻止用户访问故事的其余页面，否则用户可以像往常一样导航（点击上一页，或者滑动到不同的故事，如果可用）。
4. 付费墙具有模板化的 UX，允许发布商自定义关键消息。
5. 根据发布商的配置，对话框可以支持三种不同的方式进行：
   • 使用发布商的登录流程登录（即发布商提供的登录页面）。
   • 直接通过发布商订阅（即通过发布商提供的订阅页面）。
   • 如果发布商启用了，则通过 使用 Google 订阅 进行订阅。
6. 如果用户完成上述任何身份验证流程，则用户将返回到故事页面，付费墙将被关闭，用户可以消费故事的其余部分。
7. 如果用户遇到来自该发布商的后续付费墙故事，他们将继续根据 amp-subscription 机制 保留访问权限。

amp-story-subscriptions 属性

<amp-story publisher-logo-src='https://publisher-domain.com/logo.jpg'>
    <amp-story-page>...</amp-story-page>
    ...
    <amp-story-subscriptions subscriptions-page-index='3' price='$0.50/week' headline='Culture at your fingertips' description='Subscribe for unlimited access.' additional-description='Cancel anytime.'>
    </amp-story-subscription>
</amp-story>

price {string} 必需

订阅/优惠价格，例如“$0.50/周”或“4 欧元/每 4 周，为期一年”。这可以是任何描述诸如免费试用、每月、每年等优惠的任意字符串。请注意，如果太长，则会在末尾省略号省略，这由视图宽度决定。

description {string} 必需

订阅/优惠的一行描述。

subscriptions-page-index {number} 可选

显示订阅对话框的 amp-story-page 的索引。amp-story 中的 amp-story-page 索引从 0 开始，例如，第一个 amp-story-page 的索引为 0。如果未指定，则默认为 2，即故事的第三个 amp-story-page。

请注意，此指定的页面不能是故事的前两页，也不能是最后一页。

headline {string} 可选

描述订阅/优惠的标题字符串。如果未提供，则该行将被删除，例如，由于内容少了一行，对话框会变短。

additional-description {string} 可选

订阅/优惠的额外描述行。如果未提供，则该行将被删除，例如，由于内容少了一行，对话框会变短。

验证

请参阅 amp-story-subscriptions 验证器 中的验证规则。