Grâce à l'extension amp-poool de AMP Access, vous pouvez désormais profiter de toute la puissance de l'outil Poool sur vos articles AMP.
Installer Poool sur vos contenus AMP est rapide et se divise en quelques étapes simples 😄
Insérer les scripts nécessaires dans la 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>
Configurer
La configuration Poool doit se trouver à la suite des scripts, et contenir un certain nombre d'éléments.
Exemple d'une configuration basique :
<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>
Voici les variables de configuration que vous pouvez utiliser :
bundleID (required)
Contient votre app-id
itemID (required)
Contient votre identifiant d'article
pageType (required)
Vous devez indiquer "premium" pour que le paywall s'affiche. Les autres type de page Poool ont peu de sens dans le contexte AMP.
mode
Mode "custom" obligatoire pour AMP
debug
Active / désactive le mode debug
forceWidget
Force l'affichage d'un widget spécifique. Voir documentation.
loginButtonEnabled
Active ou désactive le bouton "je me connecte" (configurable sur les parcours également).
signatureEnabled
Active ou désactive la signature après déblocage.
customSegment
Permet de préciser un Custom Segment à appeler côté Poool
cookiesEnabled
Valeur à "true" si l'utilisateur accepte les cookies. Dans les autres cas, nous ne faisons aucune requête API et la valeur de cookiesEnabled sera "false". Pour collecter le consentement sur AMP (obligatoire avec le RGPD), vous pouvez regarder la documentation du composant amp-consent.
Baliser correctement le contenu
Ci-dessous, un exemple d'article avec le paywall Poool. Lisez bien les commentaires :
* Ici le chapeau de l'article, notez les attributs de la section (je reviens dessus après)
<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>
* Ici le contenu à masquer
<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>
* Ici la section contenant le paywall
<section amp-access="NOT error AND NOT access" id="poool"></section>
Comme vous pouvez le remarquer, l'article et son paywall se divisent en 3 sections distinctes :
Le chapeau
Le contenu à masquer
Le paywall
Contrairement au fonctionnement standard de Poool, où vous indiquez la div de contenu pour ensuite lui attribuer un mode de masquage et surtout un % de masquage, ici le contenu sera entièrement masqué.
Il faut donc que le chapeau soit hors du texte principal de l'article, sinon l'utilisateur n'aura aucune prévisualisation du contenu pour l'inciter à effectuer l'action de déblocage.
Vous avez donc des attributs obligatoires à mettre sur les sections :
poool-access-preview : indique la section contenant le chapeau
poool-access-content : indique le contenu principal de l'article, généralement la section à masquer.
amp-access-hide : indique que la section est à masquer
amp-access : indique si le contenu a besoin d'un droit d'accès pour être affiché. Vous pouvez indiquer un certain nombre d'expressions dans cet attribut mais ceux qui vont nous intéresser aujourd'hui sont "access" et "error", précédés ou non d'un opérateur logique.
"access" sans opérateur logique devant (type "NOT") indique que le contenu est soumis à droit d'accès, et donc que le texte va être masqué.
A l'inverse, indiquer "NOT access" indique que la section n'a pas de droits d'accès spécifiques et doit donc être affichée au lecteur.
Cliquez sur ce lien pour plus d'infos sur les expressions de l'attribut amp-access.
Dernier point, le paywall. Il s'agit, comme vous avez pu le voir, d'une section avec un id="poool" et deux attributs dans amp-access indiquant le fait qu'il n'y a pas de droit de lecture spécifique et un contrôle sur les erreurs potentielles.
👉 Pensez bien à séquencer les sections comme sur l'exemple : le paywall doit se trouver en dernier.
Et voilà, votre paywall dynamique Poool est disponible sur vos pages Google AMP !
Un problème, des questions ? N'hésitez pas à nous contacter par Intercom.