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 组件不需要授权、回传或登录配置，因为它已预配置为与 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，但不需要授权、回传和登录链接。

  <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