Use Cases

By integrating Pelcro with your AMP pages, you will be able to:

Hide content from users who are not authenticated
Hide content from users who don't have a subscription
Preview content to logged-in users while hiding the rest of it to users who don't have a subscription
Preview content to logged out users, display more content to logged in users and display everything if a user has a subscription

Implementation

AMP Pages

You will need to ensure you are first adhering to the AMP structure. You can read more about AMP here. Note that most content management systems have plugins to enable AMP by default.

AMP Configuration

Pelcro will make integrating your subscription flow with AMP easy. Below is the configuration file required to authorize and ensure the user experience is handled in full to identify the user and get his authentication and subscription statuses.

The sign-in configuration is the page the user will be re-directed to in order to login into his account
The sign-out configuration is the end-point that will be used to log the user out
The authorization endpoint will return the status of authentication and subscription back to AMP.
4- The pingback is used to send a "view" impression back to Pelcro

Production

<script id="amp-access" type="application/json">
  {
      "authorization": "https://www.pelcro.com/integrations/amp/auth/authorization?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "https://www.pelcro.com/integrations/amp/auth/pingBack?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
          "sign-in": "https://www.pelcro.com/integrations/amp/login?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL",
          "sign-out": "https://www.pelcro.com/integrations/amp/logout?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL"
      },
      "authorizationFallbackResponse": {
          "isAuthorized":false,
          "isSubscribedToSite":false
      }
  }
</script>

Staging

<script id="amp-access" type="application/json">
  {
      "authorization": "https://staging.pelcro.com/integrations/amp/auth/authorization?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "https://staging.pelcro.com/integrations/amp/auth/pingBack?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
          "sign-in": "https://staging.pelcro.com/integrations/amp/login?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL",
          "sign-out": "https://staging.pelcro.com/integrations/amp/logout?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL"
      },
      "authorizationFallbackResponse": {
          "isAuthorized":false,
          "isSubscribedToSite":false
      }
  }
</script>

AMP Sections

Based on the authorization response, a user can have the following authorization statuses:

isAuthorized: This identifies that the user has either logged in or registered to your site.
isSubscribedToSite: This identifies that the user has an active subscription associated to your site.

You can now hide or show content in the different sections based on the authorization statuses above as shown in the example below.

<!doctype html>
<html amp>
	<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

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

    <script id="amp-access" type="application/json">
        {
            "authorization": "https://www.pelcro.com/integrations/amp/auth/authorization?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
            "pingback": "https://www.pelcro.com/integrations/amp/auth/pingBack?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
            "login": {
                "sign-in": "https://www.pelcro.com/integrations/amp/login?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL",
                "sign-out": "https://www.pelcro.com/integrations/amp/logout?site_id={ID}&rid=READER_ID&source_url=SOURCE_URL&return_url=RETURN_URL"
            },
            "authorizationFallbackResponse": {
                "isAuthorized":false,
                "isSubscribedToSite":false
            }
        }
    </script>

  </head>

  <body>
		<!-- IS AUTHENTICATED -->
    <section amp-access="isAuthorized" amp-access-hide>
    	<h2>You are authenticated. Enjoy this section that is only available to authenticated users.</h2>
    	<a on="tap:amp-access.login-sign-out">Logout</a>
    </section>

    <section amp-access="NOT isAuthorized" amp-access-hide>
    	<h2>You are not logged in. You need to be authenticated to view this section, login below to gain access to this section.</h2>
    	<a on="tap:amp-access.login-sign-in">Login</a>
    </section>

    <!-- IS SUBSCRIBED TO SITE (ACTIVE SUBSCRIPTION IS AVAILABLE) -->
    <section amp-access="isSubscribedToSite" amp-access-hide>
    	<h2>You have an active subscription to the site. Enjoy this section which is only available to subscribed users.</h2>
    </section>

    <section amp-access="NOT isSubscribedToSite" amp-access-hide>
    	<h2>You do not have an active subscription. Please subscribe by following the link below.</h2>
    	<a>Subscribe</a>
    </section>

  </body>
</html>

Activate the AMP integration for your sites

You can easily activate your AMP integration for your sites by choosing the Activate option next to each site.