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-订阅机制保留访问权限。

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 验证器中的验证规则。