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，请向 subscribe.google.com 服务添加 skuMapUrl。

<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