Poool
light_mode
dark_mode
menu
close

#Installation

#Pour démarrer

#1. «Poool», WTF?

Poool est un paywall dynamique qui permet aux éditeurs de créer de la valeur en mettant à disposition de leur audience des choix de compensation simples pour débloquer équitablement le contenu.
En savoir plus sur Poool open_in_new

#2. Placer le tag Poool au bon endroit

Poool s'intégre facilement en plaçant un tag dans le code source de vos pages.
Une attention particulière doit être portée à la position du tag : pour assurer une performance optimale du paywall, pensez à appeler Poool en priorité dans la page.

#3. Tagger les pages et mettre en place le paywall

Le tag Poool est prévu pour s'intégrer sur toutes les pages du site, à la manière d'un tag Analytics classique.
    1. Insérez le tag Poool sur toutes vos pages, n'importe où dans la page, en remplaçant les différentes valeurs quand nécessaire :
index.html
<script>
  !function(w,d,s,u,p,t,o){
    w[p]=w[p]||function(){(w[p]._q=w[p]._q||[]).push(arguments)},
    t=d.createElement(s),o=d.getElementsByTagName(s)[0],
    t.async=1,t.src=u,o.parentNode.insertBefore(t,o)
  }(window, document, "script", "https://assets.poool.fr/poool.min.js", "poool");


  // Remplacez XXXX-XXXX-XXXX-XXXX par votre identifiant d'application
  poool("init", "XXXX-XXXX-XXXX-XXXX");


  // Pour être en conformité avec la norme RGPD, nous avons mis
  // en place un paramètre de configuration qu'il vous est nécessaire
  // de renseigner lors de l’implémentation.
  //
  // Par défaut, la valeur est définie à "false" et coupe le
  // fonctionnement de Poool. Un paywall par défaut sera affiché.
  //
  // ⚠️ Important : vous devez au préalable récolter le consentement
  // auprès de vos utilisateurs
  //
  // Remplacez <boolean> par la valeur du consentement de l'utilisateur
  poool("config", "cookies_enabled", <boolean>);


  // Rajoutez ici toutes les lignes de configuration/textes/styles/events
  // dont vous pourriez avoir besoin
  //
  // ex: poool("config", "debug", true)


  // Insérez aussi le tag à la fin de votre tunnel de conversion,
  // quand l'utilisateur s'est abonné avec succès, en rajoutant
  // cette ligne (à l'image d'un pixel de conversion Facebook ou Twitter)
  //
  // poool("send", "conversion");


  // ⚠️ Très important : poool("send","page-view"); doit absolument
  // être la dernière ligne de votre configuration Poool.
  // Toute ligne de configuration ajoutée aprés sera ignorée.
  //
  // Remplacez par le type de page en cours
  // ex: poool("send", "page-view", "premium")
  // Types de pages disponibles : https://dev.poool.fr/sdk/actions#page-view
  poool("send", "page-view", "<type de page>");
</script>
C'est tout, les données devraient maintenant remonter normalement !
    1. Dîtes à Poool où est le contenu de votre article (en utilisant l'attribut data-poool)
index.html
<div id="votre-contenu" data-poool="80" data-poool-mode="hide">
  <p>Le contenu de votre article</p>
</div>
    1. Ajoutez le widget Poool en dehors du contenu de l'article :
index.html
<div id="poool-widget"></div>
C'est tout, le widget Poool devrait s'afficher !

#Installer sur AMP

AMP est une initiative open source créée par Google visant à rendre le Web meilleur pour tous.
Le Paywall de Poool est entièrement compatible avec AMP. Voir la documentation de l'extension amp-access-poool.
Pour afficher votre paywall habituel dans AMP, importez les scripts des extensions amp-access et amp-access-poool dans votre page AMP :
index.amp.html
<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>
Ajoutez votre configuration amp-access pour Poool :
index.amp.html
<script id="amp-access" type="application/json">
  {
    "vendor": "poool",
    "poool": {
      // Remplacez XXXX-XXXX-XXXX-XXXX par votre identifiant d'application
      "bundleID": "XXXX-XXXX-XXXX-XXXX",
      // Remplacez <boolean> par la valeur du consentement de l'utilisateur
      "cookiesEnabled": "<boolean>",
      // Définissez un identifiant unique d'article
      "itemID": "amp-article-test",
      // Et définissez le type d'article
      "pageType": "premium"
    }
  }
</script>
Et organisez vos sections contenant séparément l'extrait de l'article, l'article complet et le paywall :
index.amp.html
<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>


<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>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque.
  </p>
</section>


<section amp-access="NOT error AND NOT access" id="poool"></section>
Et voilà, votre paywall Poool devrait s'afficher correctement dans AMP ! Voir un exemple d'intégration.

#Compatibilité

ChromeFirefoxEdgeSafariSafari iOSChrome AndroidXCodeiOSVueAndroid SDK
ChromeFirefoxEdgeSafariSafari iOSChrome AndroidXCodeiOSVueAndroid SDK
37+34+18+11+iOS 11+Android 37+11.0+13.0+3.0.0+21+

#Questions fréquentes


#Je veux désactiver le paywall Poool pour mes abonnés payants, que faire ?

Pour des raisons de sécurité, le tag Poool ne prend pas la responsabilité de désactiver le paywall pour un article qu'il n'a pas débloqué directement.
Par conséquent, vous devez désactiver le paywall manuellement si nécessaire, par exemple pour un abonné payant.
  • Pour ne pas couper le contenu de l'article, retirez simplement les attibuts data-poool et data-poool-mode de votre page
  • Pour ne pas afficher le paywall, retirez l'element <div id="poool-widget"></div> de votre page

#J'installe Poool sur une application one-page (Angular, React, Vue, ...), est-ce que c'est compatible ?

Poool est compatible avec tous les frameworks récents : par exemple, notre propre demo est une application React !
En revanche, il n'est pas possible de couper correctement le contenu d'un article si des éléments dynamiques propres au framework utilisé (des components React/Vue, des directives Angular, ...) sont présents à l'intérieur du contenu. Nous conseillons donc aux applications one-page d'utiliser le mode de masquage custom et d'effectuer leur propre logique de masquage.
Des exemples d'implémentations sont disponibles :
De plus, pour éviter que certaines informations persistent d'une page à l'autre (seulement pour les applications one-page), il est très souvent nécessaire d'effectuer un appel à flush au déclenchement d'une navigation (ex: componentWillUnmount pour React, ngOnDestroy pour Angular, beforeRouteLeave pour Vue ...) pour remettre les valeurs de configuration à leur valeur d'origine :
index.js
poool('flush');

#Ma connexion utilisateur ne se fait pas sur une nouvelle page, comment faire ?

Grâce aux évènements onLoginClick et onSubscribeClick, il vous est possible de ne pas renseigner d'URL de connexion et/ou d'abonnement, et de désactiver les actions par défaut des boutons de connexion et d'abonnement :
index.js
poool('event', 'onLoginClick', function(event) {
  // Cette ligne désactive le comportement par défaut du paywall
  event.originalEvent.preventDefault();


  // Effectuez votre propre action, comme montrer un formulaire de
  // connexion caché
  $('.login').show();


  return false;
});

#Le paywall Poool ne détecte pas les attributs data-poool et data-poool-mode dans la page alors qu'ils sont présents, pourquoi ?

Dans certains cas très rares, le DOM de la page met plus de temps à charger que le script du paywall en lui même. L'élément avec les attributs data-poool et data-poool-mode n'est donc pas encore disponible quand le script du paywall se charge, il prend donc la configuration par défaut.
Pour palier à cette éventualité, il peut vous être nécessaire de d'utiliser l'option wait_for_dom_load qui attendra l'évènement DOMContentLoaded du navigateur avant d'exécuter le paywall :
index.js
poool('config', 'wait_for_dom_load', true);


// Si nécessaire, vous pouvez également définir un temps d'attente
// maximum
poool('config', 'dom_load_timeout', 2000);

#Le paywall de Poool ne charge pas assez vite, ou ne charge pas du tout, que faire ?

Nous mettons un point d'honneur à constamment allouer les ressources nécessaires au fonctionnement sans interruption du paywall Poool.
Néanmoins, nous avons prévu les différents scénarios catastrophes suivants :
  • Si le paywall met trop de temps à charger (plus de 10s), nous interrompons toutes les requêtes du paywall en cours et affichons un paywall bloqué par défaut.
  • Si le paywall rencontre une erreur non prise en charge, nous déclenchons directement l'évènement onError pour que vous puissiez afficher un paywall de secours.
Dans les deux cas, si le paywall Poool n'a pas pu charger son apparence personnalisée (et qu'elle n'est pas encore dans le cache du navigateur du lecteur) et ses différentes options de configuration, il vous est possible de les configurer directement avec l'API Javascript du paywall.
index.js
// Certaines informations, comme le nom de votre media, sont récupérées
// au chargement du paywall.
// Au cas ou, nous vous invitons à également les renseigner côté code
poool('config', 'app_name', 'Mon media');


// Idem pour l'apparence du paywall Poool
poool('style', 'brand_logo', 'https://my-media.com/my-logo.png');


// Si une erreur inconnue survient, vous pouvez afficher un paywall
// de secours
poool('event', 'onError', function(error) {
  $('.paywall').show();
});

#Poool ne charge pas quand les fonctionnalités de script ne sont pas supportées ou quand elles sont désactivées. Que puis-je faire ?

Afin de rendre notre solution disponible dans n'importe quelle circonstance utilisateur (par exemple quand Javascript est désactivé dans le navigateur), nous avons mis en place un système permettant de récupérer le paywall de Poool avec une configuration par défaut similaire à celle présente sur votre site lorsque les cookies ne sont pas acceptés par votre lecteur.
Avec l'intégration d'une simple balise iframe, il est ainsi possible d'afficher un widget de restriction (abonnement exigé) utilisant l'apparence et les textes configurés dans votre Dashboard. Notez que tout comme lorsque l'utilisateur refuse le dépôt de cookies, les fonctionnalités de tracking seront désactivées.
index.html
<noscript>
  // Remplacez XXXX-XXXX-XXXX-XXXX par votre identifiant d'application
  <iframe src="https://poool.host/ns.html?id=XXXXX-XXXXX-XXXXX-XXXXX" />
</noscript>

#Lors de la validation des champs dans le widget Formulaire, je souhaite pouvoir faire des vérifications et/ou traiter les données côté serveur. Que puis-je faire ?

Pour répondre à ce besoin, nous avons rendu l'envoi des évènements asynchrone. Autrement dit, il est possible de mettre en place une logique de promesse au sein-même de la configuration d'un évènement Poool.
Une fois ceci implémenté, nous attendons simplement que la promesse soit résolue et le résultat envoyé.
index.js
poool('event', 'onFormSubmit', function(event) {
  console.log('Form sent : ', event);


  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['fullName']);
    }, 1000);
  });
});

#Lors de l'envoi d'un formulaire avec un champ carte bancaire, je souhaite créer un paiement sur la carte bancaire de mon lecteur avec Stripe, comment faire ?

Pour des raisons de sécurité, nous avons choisi de ne pas stocker les identifiants nécessaires au paiement côté serveur avec Stripe, pour vous laisser pleinement la main sur la sécurité de votre plateforme, de bout en bout.
Pour effectuer vous-même un paiement côté serveur, il vous suffit de passer votre clé publique Stripe côté front, et d'effectuer un appel vers vos APIs avec les informations de carte bancaire récupérées depuis l'event onFormSubmit.
index.js
poool('config', 'stripe_public_key', 'pk_test_ibjIHI1jyEipGYluJID8');


poool('event', 'onFormSubmit', function (event) {
  $.post('https://my-api.com/user/pay', {
    username: event.fields.username,
    password: event.fields.password,
    cardTokenId: event.fields.creditCard.id,
  }, function () {
    console.log('Paiement effectué !');
  });
});
Pour la partie serveur, Stripe possède un SDK pour pratiquement tous les langages disponibles aujourd'hui. Il vous suffit de parcourir la documentation Stripe pour trouver la version qui correspond à votre langage.
Un exemple concret avec le SDK PHP de Stripe :
index.php
<?php
  $stripe = new \\Stripe\\StripeClient('sk_test_sur6km1Vb9R4lzg7PzES');


  // Etape 1 -> Créer un profil utilisateur sur Stripe
  $customer = $stripe->customers->create([
      'email' => $_POST['username'],
      'source' => $_POST['cardTokenId'],
  ]);


  // Etape 2 -> Créer le paiement
  $charge = $stripe->charges->create([
      'amount' => 100,
      'currency' => 'eur',
      'customer' => $customer,
      'description' => 'My premium article',
  ]);


  // Paiement effectué !
arrow_forward
SuivantActions Poool.js