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 驗證器 中的驗證規則。