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 可以与本地服务身份验证 URL 相同，因为 JSON 对象不会冲突。如果身份验证 URL 是可缓存的（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