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，即故事的第 3 个 amp-story-page。

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

headline {string} 可选

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

additional-description {string} 可选

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

验证

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