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 页面一起使用,这些页面在内部使用 amp-access 来提供类似于 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 的 Element 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:发布者徽标的图像 URL,格式为 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