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

以下資源提供關於搭配 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:發布商標誌圖片的網址,格式為 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