Toutes les collections
Questions techniques
Comment intégrer techniquement Poool sur mes pages AMP ?
Comment intégrer techniquement Poool sur mes pages AMP ?

En trois étapes, déployez Poool sur vos supports AMP.

Alexandre Santini avatar
Écrit par Alexandre Santini
Mis à jour il y a plus d’une semaine

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 :

  1. Le chapeau

  2. Le contenu à masquer

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


Avez-vous trouvé la réponse à votre question ?