amp-subscriptions-google

說明

實作適用於「透過 Google 訂閱」的訂閱樣式存取協定。

必要指令碼

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

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

簡介

amp-subscriptions-google 是在 AMP 網頁中啟用「透過 Google 訂閱」功能的擴充功能。

如需 AMP 訂閱的更多詳細資訊，請參閱 amp-subscriptions。

如需專案本身的詳細資訊，請參閱「透過 Google 訂閱」GitHub 存放區。

設定

amp-subscriptions-google 設定為 amp-subscriptions 設定的一部分。

<head>
  ...
  <script
    async
    custom-element="amp-subscriptions"
    src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
  ></script>
  <script
    async
    custom-element="amp-subscriptions-google"
    src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
  ></script>
  <script type="application/json" id="amp-subscriptions">
    {
      "services": [
        {
          // Local service configuration
        },
        {
          "serviceId": "subscribe.google.com"
        }
      ]
    }
  </script>
</head>

即時設定 (rtc)

即時設定可讓發布商在頁面載入時指定訂閱按鈕的 SKU 或 SKU。這允許使用者專屬優惠、限時優惠等。

若要啟用 rtc，請將 skuMapUrl 新增至 subscribe.google.com 服務。

<script type="application/json" id="amp-subscriptions">
  {
    "services": [
      {
        // Local service configuration
      },
      {
        "serviceId": "subscribe.google.com"
        "skuMapUrl": "https://example.com/sky/map/endpoint"
      }
    ]
  }
</script>

skuMapUrl 會在頁面載入時呼叫。它應該是元素 ID 和設定的對應

{
  "subscribe.google.com": {
    // button that goes straight to purchase flow
    "elementId": {
      "sku": "sku"
     },
    // button that launches an offer carousel
    "anotherElementId": {
      "carouselOptions": {
          "skus": ["basic", "premium_monthly"],
      }
    }
  }
}

每個設定都對應到與按鈕相關聯的 SKU 或 SKU。

若要為 rtc 啟用按鈕，請新增 subscriptions-google-rtc 屬性。如果此屬性存在，則按鈕將會停用，直到 skuMapUrl 要求完成為止。一旦 skuMap 解析完成，subscriptions-google-rtc 屬性將會移除，並新增 subscriptions-google-rtc-set 屬性。這些屬性可用於 CSS 樣式設定，但建議如果按鈕顯示時會導致頁面重新配置版面，則不要隱藏按鈕。

skuMapUrl 可以與本機服務驗證網址相同，因為 JSON 物件不會衝突。如果驗證網址可快取 (max-age=1 就足夠)，這將允許在單一伺服器要求中解析驗證和對應。

授權回呼

如 amp-subscriptions 中所述，如果本機服務指定了 pingbackUrl，則「勝出」服務傳回的授權回應將會透過 POST 要求傳送至 pingbackUrl。

如果 subscribe.google.com 是「勝出」服務，則對 pingbackUrl 的要求將採用以下格式

{
  "raw":"...",
  "source":"google",
  "service":"subscribe.google.com",
  "granted":true,
  "grantReason":"SUBSCRIBER",
  "data":{
    "source":"google",
    "products":[ ... ],
    "subscriptionToken":"..."
  }
}

其中 data 符合授權回應格式。

標記範例

<head>
  ...
  <script
    async
    custom-element="amp-subscriptions"
    src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"
  ></script>
  <script
    async
    custom-element="amp-subscriptions-google"
    src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.js"
  ></script>
  <script type="application/json" id="amp-subscriptions">
    {
      "services": [
        {
          // Local service configuration
          "authorizationUrl": "https://...",
          "pingbackUrl": "https://...",
          "actions": {
            "login": "https://...",
            "subscribe": "https://..."
          }
        },
        {
          "serviceId": "subscribe.google.com"
        }
      ]
    }
  </script>
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      {...},
      "isAccessibleForFree": "False",
      "publisher": {
        "@type": "Organization",
        "name": "The Norcal Tribune",
        "logo": {...}
      },
      "hasPart": {
        "@type": "WebPageElement",
        "isAccessibleForFree": "False",
        "cssSelector" : ".paywall"
      },
      "isPartOf": {
        "@type": ["CreativeWork", "Product"],
        "name" : "The Norcal Tribune",
        "productID": "norcal_tribune.com:basic"
      }
    }
  </script>
</head>

需要更多協助嗎？

您已經閱讀這份文件十幾次了，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有同感：請在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能嗎？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

前往 GitHub