amp-story-subscriptions

<script async custom-element="amp-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>

摘要

這個元件讓 Web Stories 能夠以遵循 amp-subscriptions 和 amp-subscriptions-google 的方式支援付費牆和訂閱機制。發布商可藉此設定其故事以呈現付費牆，並透過授權網址和其他設定整合至其後端。

指定訂閱設定的方式，在傳統 AMP 頁面和 Web Story 中都相同。如要進一步瞭解設定的詳細資訊，請參閱 amp-subscriptions 設定。

這個擴充功能提供簡易的使用者介面和功能，可顯示付費牆底頁，並管理鎖定內容的封鎖/解除封鎖。

重要注意事項：在與這個元件整合之前，請先閱讀 amp-subscriptions 和 (選用) amp-subscriptions-google 的 API 文件，並確認您已設定好這些基本功能。

運作方式

1. 發布商可以使用這個元件設定 Web Story，以實作付費牆。
   • 付費牆無法在故事的前兩頁、最後一頁，或是頁數少於 4 頁的故事中觸發。
2. 當使用者瀏覽至故事中第一個設有付費牆的頁面時，將檢查使用者是否透過以下方式取得存取權：。如果是，使用者即可不受任何干擾地瀏覽故事。
3. 如果未授予存取權，頁面底部會顯示付費牆底頁。付費牆只會阻止使用者存取故事的剩餘頁面，使用者仍可照常瀏覽 (輕觸以回到上一頁，或滑動以瀏覽不同的故事，如果有的話)。
4. 付費牆具有範本化的使用者體驗，可讓發布商自訂重要訊息。
5. 根據發布商的設定，對話方塊可以支援三種不同的進度方式：
   • 使用發布商的登入流程登入 (即發布商提供的登入頁面)。
   • 直接透過發布商訂閱 (即透過發布商提供的訂閱頁面)。
   • 如果發布商啟用，則透過 透過 Google 訂閱 訂閱。
6. 如果使用者完成上述任何一種驗證流程，系統就會將使用者返回故事頁面，關閉付費牆，且使用者可以瀏覽故事的其餘部分。
7. 如果使用者從這位發布商處再次遇到設有付費牆的故事，他們仍會根據 amp-subscription 機制 維持存取權。

amp-story-subscriptions 屬性

<amp-story publisher-logo-src='https://publisher-domain.com/logo.jpg'>
    <amp-story-page>...</amp-story-page>
    ...
    <amp-story-subscriptions subscriptions-page-index='3' price='$0.50/week' headline='Culture at your fingertips' description='Subscribe for unlimited access.' additional-description='Cancel anytime.'>
    </amp-story-subscription>
</amp-story>

price {string} (必要)

訂閱/方案價格，例如「$0.50/週」或「每年 4 週，每 4 週 4 歐元」。這可以是任何描述方案的任意字串，例如免費試用、每月、每年等等。請注意，如果太長，系統會省略並在結尾加上刪節號，長度限制取決於檢視畫面寬度。

description {string} (必要)

訂閱/方案的單行說明。

subscriptions-page-index {number} (選填)

顯示訂閱對話方塊的 amp-story-page 索引。amp-story 中的 amp-story-page 索引從 0 開始，例如第一個 amp-story-page 的索引為 0。如果未指定，則預設為 2，也就是故事的第 3 個 amp-story-page。

請注意，指定的頁面不能是故事的前兩頁或最後一頁。

headline {string} (選填)

描述訂閱/方案的標題字串。如果未提供，則會移除該行，例如，對話方塊會因為內容少一行而變短。

additional-description {string} (選填)

訂閱/方案的額外說明行。如果未提供，則會移除該行，例如，對話方塊會因為內容少一行而變短。

驗證

請參閱 amp-story-subscriptions 驗證器 中的驗證規則。