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 的 Element div 是在使用者沒有文章存取權時，將顯示付費牆的位置。

以下資源提供有關搭配 AMP 使用 Fewcents 的更多文件

設定

設定與 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