AMP

重要事項:本文件不適用於您目前選擇的格式 stories

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-subscriptions 以取得更多關於 AMP 訂閱的詳細資訊。

請參閱 「使用 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