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 的方式支持付费墙和订阅。它使发布商能够配置其 Stories 以显示付费墙，并通过授权 URL 和其他配置集成到其后端。

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

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

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

工作原理

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

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

headline {string} 可选

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

additional-description {string} 可选

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

验证

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