">文档:<amp-access-fewcents> - amp.dev - AMP 框架
AMP

amp-access-fewcents

描述

允许发布者与 Fewcents 微支付平台集成。

 

必需脚本

<script async custom-element="amp-access-fewcents" src="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.js"></script>
<script async custom-element="amp-access-fewcents" src="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.js"></script>
  • amp-access-fewcents 组件基于 amp-access,并需要它
  • amp-access-fewcents 旨在与内部使用 amp-access 的 amp 页面配合使用,以提供类似于 amp-access 的行为,但构建方式使其可以与 Fewcents 配合使用。
  • amp-access-fewcents 组件不需要授权、pingback 或登录配置,因为它经过预先配置,可与 Fewcents 协同工作。您只需根据需要传递或配置扩展,例如按钮的主要颜色,发布者可以在付费墙上放置自己的徽标。
  • 此组件还依赖于访问内容标记来显示和隐藏内容。

用法

发布者端的配置将如下所示

  <script id="amp-access" type="application/json">
    {
      "vendor": "fewcents",
      "fewcents": {
        "publisherLogoUrl" : "logoUrl",
        "contentSelector" : "amp-access-fewcents-dialog",
        "primaryColor" : "#0000FF",
        "accessKey" : "samplehost",
        "category": "paywall",
        "articleIdentifier": "sampleidentifier"
      }
    }
  </script>

而内容访问标记可能最终会如下所示

以下示例演示了独立使用 amp-access-fewcents 组件。

  <section amp-access="NOT access" amp-access-hide>
    <div id="amp-access-fewcents-dialog"></div>
  </section>

  <section amp-access="error" amp-access-hide class="error-section">
    Oops... Something broke.
  </section>

  <div amp-access="access" amp-access-hide>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
      ullamcorper turpis vel commodo scelerisque. Phasellus luctus nunc ut
      elit cursus, et imperdiet diam vehicula. Duis et nisi sed urna blandit
      bibendum et sit amet erat. Suspendisse potenti.
    </p>
  </div>

具有 id amp-access-fewcents-dialog 的元素 div 是当用户无法访问文章时付费墙将显示的位置。

以下资源提供了有关将 Fewcents 与 AMP 配合使用的进一步文档

配置

配置类似于 amp-access,但不需要授权、pingback 和登录链接。

  <script id="amp-access" type="application/json">
    {
      "vendor": "fewcents",
      "fewcents": {
        "publisherLogoUrl" : "logoUrl",
        "contentSelector" : "amp-access-fewcents-dialog",
        "primaryColor" : "#0000FF",
        "accessKey" : "samplehost",
        "category": "paywall",
        "articleIdentifier": "sampleidentifier"
      }
    }
  </script>

键摘要

  • vendor:这是必须传递的值,其值为“fewcents”
  • publisherLogoUrl:png 格式的发布者徽标图像的网址。
  • contentSelector:将呈现付费墙的 div 元素的 ID
  • primaryColor:解锁按钮的背景颜色,否则将使用默认颜色
  • accessKey:Fewcents 会将其提供给发布者
  • categoty:表示付费墙的类别,由 Fewcents 提供
  • articleIdentifier:这使 Fewcents 能够唯一识别每篇文章,发布者应与 Fewcents 共享此数据

分析

鉴于 amp-access-fewcents 基于 amp-access,它支持 amp-access 发送的所有 分析事件

在用户对付费墙执行操作时,会向 Fewcents 发送多份分析报告。

布局和样式

<link rel="stylesheet" type="text/css" href="https://cdn.ampproject.org/v0/amp-access-fewcents-0.1.css">
需要更多帮助?

您已经阅读了本文档十多次,但它并没有真正涵盖您所有的问题?也许其他人也有同感:在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您参与和贡献!我们希望您成为我们开源社区的持续参与者,但我们也欢迎针对您特别热衷的问题进行一次性贡献。

转到 GitHub