Thanks to the amp-poool extension from AMP Access, you are now able to make the most of the Poool tool on your AMP articles.

Installing Poool into your AMP content takes no time at all and can be split into just a few simple steps.

Insert the necessary scripts into the page

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

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

Set-up

The Poool configuration must be placed immediately after the scripts and has to contain a specific number of elements.

Example of a basic configuration:

<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      "bundleID": "Your app id provided by poool",
      "pageType": "premium",
      "mode": "custom",
      "cookiesEnabled": "true",
      "itemID": "amp-example-article",
    }
  }
</script>

These are the configuration variables that you can use:

bundleID (required)

Contains your app ID

itemID (required)

Contains your article identification

pageType (required)

You need to select 'Premium' here so that the paywall will be shown. The other types of Poool pages don't mean much in the AMP system

mode

The mode 'custom' is obligatory for AMP

debug

Activate/disactivate the debug mode

forceWidget

'Force' is attached to a specific widget. Have a look at our documentation for this.

loginButtonEnabled

Activate or disactivate the Log In button (also possible to change in the relevant journey)

signatureEnabled

Activate or disactivate the signature after the article has been unlocked

customSegment

Allows you to specify a custom segment named by Poool

cookiesEnabled

This value is set to 'true' if the user accepts the cookies. If otherwise, we won't make any API requests and the cookiesEnabled value will be set to 'false'.
It is now obligatory to ask for consent in the collection of AMP data (RGPD). You can check out the documentation for this through this link: amp consent.

Tag the data correctly

Below is an article example with a Poool paywall. Make sure to read the comments carefully:

* The article heading goes here. Please note the attributes of this section (mentioned in more detail below)

<section poool-access-preview amp-access="NOT access">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque.
  </p>
</section>


* Here, the text to be covered by the paywall 

<section poool-access-content amp-access="access" amp-access-hide>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper turpis vel commodo scelerisque.
  </p>
</section>

* Here, the section containing the paywall

<section amp-access="NOT error AND NOT access" id="poool"></section>

As you can see, the article and its paywall are divided into 3 sections:

The heading
The covered text
The paywall

Normally in Poool, you have to create the text div before defining the way of covering the text and the % of text covered. Here, however, the entire text will be covered.

Therefore, the heading needs to be outside of the main text. This is so that the user will still be able to see just a little snippet of the text. This will act as a way of enticing them to follow actions that will enable them to unlock the article.

Because of this, you have a few attributs that you are obliged to use:

poool-access-preview : indicates which section contains the heading
poool-access-content : indicates the main text of the article which is generally the section to block.

amp-access-hide : indicates that this is the section to cover.
amp-access : indicates whether the text needs a right-of-access in order to be shown. You can show a number of different expressions in this attribute but the ones that are of interest to us now are 'access' and 'error', which may or may not have already been set up by a logical operator.

'access' without a logical operator behind it (type 'NOT') indicates that the text has been set to right-of-access only and so the text will be blocked/covered.

On the contrary, indicating 'NOT access' will indicate that the section doesn't have any specific right-of-access rules and so the text will be shown to a reader.

Click on this link for more information on expressions to use for the amp-access attribute.

And lastly, the paywall. As you will have seen, this relates to a section with the id 'poool' and two attributes in the amp-access. This indicates the fact that there is no specific right to read and that any potential errors are under control.

Remember to put the sections in the right order, like in the example. The paywall has to be placed at the end.

And there you go, your dynamic paywall is now available on your Google AMP pages!

Any problems or questions? Please don't hesitate to contact us on Intercom!

Dashboard