AMP

重要事項:本文件不適用於您目前選取的格式 stories

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