AMP

Pelcro provides you with everything you need to integrate with AMP out of the box. This allows you to create a custom AMP page experience based on the authorization and subscription statuses.

Use Cases

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

  1. Hide content from users who are not authenticated
  2. Hide content from users who don't have a subscription
  3. Preview content to logged-in users while hiding the rest of it to users who don't have a subscription
  4. 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.

  1. The sign-in configuration is the page the user will be re-directed to in order to login into his account
  2. The sign-out configuration is the end-point that will be used to log the user out
  3. 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
<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>

AMP Sections

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

  1. isAuthenticated: This identifies that the user has either logged in or registered to your site.
  2. 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="isAuthenticated" 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 isAuthenticated" 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.

Updated 12 days ago

AMP


Pelcro provides you with everything you need to integrate with AMP out of the box. This allows you to create a custom AMP page experience based on the authorization and subscription statuses.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.