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

此擴充功能提供簡單的 UI 和功能，可顯示付費牆底部頁面，並管理封鎖/解除封鎖鎖定的內容。

重要注意事項：在整合此元件之前，請先閱讀 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 {字串} 必填

訂閱/優惠價格，例如「$0.50/週」或「4 歐元/4 週，為期一年」。這可以是任何描述優惠的字串，例如免費試用、每月、每年等等。請注意，如果字串太長 (長度取決於檢視畫面寬度)，結尾會省略並以刪節號表示。

description {字串} 必填

訂閱/優惠的單行說明。

subscriptions-page-index {數字} 選填

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

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

headline {字串} 選填

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

additional-description {字串} 選填

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

驗證

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