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 页面内部使用 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 的元素 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