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. 付費牆具有範本化的 UX，可讓發布商自訂主要訊息。
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 驗證器中的驗證規則。