Índice

Important: this documentation is not applicable to your currently selected format stories!

amp-subscriptions-google

Description

Implements subscription-style access protocol for Subscribe with Google.

Required Scripts

<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>

Introduction

The amp-subscriptions-google is the extension that enables Subscribe with Google in an AMP page.

See amp-subscriptions for more details on AMP Subscriptions.

See Subscribe with Google GitHub repo for details on the project itself.

Configuration

The amp-subscriptions-google is configured as part of amp-subscriptions configuration.

<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>

Real Time Config (rtc)

Real Time Config allows the publisher to specify the sku or sku's for a subscribe button at page load time. The allows user specific offers, time limited offers etc.

To enable rtc add a skuMapUrl to the subscribe.google.com service.

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

The skuMapUrl is called on page load. It should be a map of element id's and configurations:

{
  "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"],
      }
    }
  }
}

Each configuration corresponds to the sku or skus associated with the button.

To enable a button for rtc add the subscriptions-google-rtc attribute. If this attribute is present the button will be disabled until the skuMapUrl request is completed. Once the skuMap is resolved the subscriptions-google-rtc attribute will be removed and subscriptions-google-rtc-set attribute added. These attributes may be used for CSS styling, however it is recommended that the button not be hidden if it will cause a page re-layout when displayed.

The skuMapUrl can be the same as the local service auth url as the JSON objects do not conflict. If the auth url is cacheable (max-age=1 is sufficient) this will allow in a single request to the server to resove authentication and mapping.

Entitlements pingback

As described in amp-subscriptions, if a pingbackUrl is specified by the local service, the entitlements response returned by the "winning" service will be sent to the pingbackUrl via a POST request.

If subscribe.google.com is the "winning" service, the request to the pingbackUrl will be of the following format:

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

Where data matches the entitlements response format.

Example with markup

<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>

Precisa de mais ajuda?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow

Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub