La page d’aide de Squarespace indique que le code saisi dans son champ d’injection d’en-tête est placé dans l’élément head « sur chaque page de votre site ».1 La page d’aide de Ghost indique que les scripts ajoutés au Site Header « apparaîtront sur absolument chaque page de votre site ».2 La page de Webflow indique que le code de la section Head code « s’applique à l’ensemble de votre site ».3 Chaque éditeur de logiciel répond en une phrase à la première question que se pose un éditeur de site : où placer un script pour qu’il s’exécute partout. WordPress répond à cette même question à deux endroits, car un thème WordPress peut être construit à partir de blocs ou de code.
Chaque plateforme hébergée limite le champ applicable à tout le site selon l’offre, et non selon les compétences
Sur Squarespace, le champ est la zone d’en-tête du panneau Code Injection.1 La même page indique que l’injection de code « est disponible dans les offres Core, Plus, Advanced et certaines anciennes offres de facturation ».1 Ghost place sa version sous Settings, puis Advanced, puis Code Injection, avec une zone Site Header pour l’élément head et une zone Site Footer pour la fin du body.2 Webflow place la sienne dans l’onglet Custom code des Site settings, avec des sections Head code et Footer code pouvant contenir chacune jusqu’à 50 000 caractères.3 La page de Webflow ajoute que le code personnalisé nécessite un espace de travail Core, Growth, Agency ou Freelancer, ou un site disposant d’une offre Site active.3
Sur une plateforme hébergée, l’obstacle, quand il existe, est l’offre de facturation plutôt que le code. Un éditeur dont l’offre comprend ce champ peut coller un élément script sans ouvrir de modèle. Un éditeur dont l’offre ne le comprend pas ne le peut pas.
WordPress documente deux emplacements, et le rôle du compte décide si le premier fonctionne
La documentation de WordPress elle-même décrit l’éditeur de site comme l’outil permettant de concevoir « l’ensemble du site, y compris l’en-tête, le pied de page et tout ce qui se trouve entre les deux, avec des blocs ».4 La même page indique que l’éditeur de site n’est disponible que lorsqu’un thème de blocs est actif, et définit une partie de modèle comme un bloc « destiné à gérer les zones globales récurrentes du site ».4 Un bloc HTML personnalisé placé dans la partie de modèle du pied de page apparaît partout où cette partie est utilisée. Le bloc lui-même s’ajoute depuis l’outil d’insertion de blocs, ou en tapant /html dans un nouveau bloc paragraphe.5
La page consacrée au bloc HTML personnalisé contient un détail qui décide si le script collé est conservé. À partir de WordPress 7.0, le bloc comporte des panneaux distincts pour le HTML, le CSS et le JavaScript, et les panneaux CSS et JavaScript « ne sont disponibles que pour les utilisateurs disposant de la capacité unfiltered_html ».5 Pour un utilisateur qui ne la possède pas (l’exemple de la page est un contributeur), WordPress nettoie le bloc avec wp_kses et supprime les balises non autorisées, dont la balise script.5 Le rôle du compte qui colle le code fait donc partie de l’installation.
Le code du thème lui-même est le dernier emplacement. Le Theme Handbook indique que les thèmes et les extensions doivent charger les scripts « en utilisant la méthode WordPress standard » : une fonction de mise en file d’attente appelée sur l’action wp_enqueue_scripts.6 La même page montre une clé 'strategy' => 'defer' dans les arguments de la fonction, qui charge le script en différé, avec une option 'async' à côté.6 Une extension AdBubbles pour WordPress est prévue ; d’ici là, ces deux emplacements sont ceux que documente WordPress.
La façon dont le script se charge compte plus que le champ qui le contient
La norme HTML décrit trois comportements pour un élément script classique. Un script sans attribut defer ni async est, selon les termes de la norme, « récupéré et évalué immédiatement, en bloquant l’analyse jusqu’à ce que ces deux opérations soient terminées ».7 Avec defer, le script « sera récupéré en parallèle et évalué lorsque l’analyse de la page sera terminée ».7 Un script async est récupéré en parallèle et « évalué dès qu’il est disponible (éventuellement avant la fin de l’analyse) ».7 Le champ décide de l’endroit où le navigateur rencontre l’élément ; l’attribut décide de ce que le navigateur y fait.
Le script d’intégration, adbubbles.js, est un unique fichier statique, écrit en JavaScript simple sans aucune dépendance, servi via le cache de Cloudflare, et il se charge une fois le DOM de la page prêt. Ouvrir un compte éditeur ne coûte rien, pas plus que le script d’intégration. Un éditeur qui a ajouté un site peut demander une exploration qui montre lesquels de ses mots peuvent actuellement être vendus, avant de coller quoi que ce soit. La page d’installation donne l’élément script exact à coller.
Le périmètre est la décision qui demande réflexion
Une fois le script présent sur chaque page, il reste une décision qu’aucune page d’aide d’éditeur de logiciel ne peut prendre. Le périmètre est la partie d’une page que le script d’intégration est autorisé à analyser, par exemple l’élément article ou le conteneur entry-content. Même à l’intérieur du périmètre, le script d’intégration laisse intacts les titres, les liens, le code, le texte préformaté, les contrôles de formulaire, la navigation, l’en-tête et le pied de page, ainsi que tout ce que l’éditeur marque data-noads. Il souligne la première occurrence de chaque mot acheté. La limite est d’une bulle par mot, et deux bulles ne partagent jamais un paragraphe.
Supposons qu’un thème WordPress enveloppe chaque article dans un conteneur de classe entry-content et affiche une courte biographie de l’auteur dans une barre latérale. Avec un périmètre entry-content, la biographie n’est jamais analysée, bien qu’elle figure sur la page et puisse contenir des mots achetés. Avec un périmètre couvrant tout l’élément main, la biographie est analysée elle aussi, et une bulle peut s’y ouvrir plutôt que dans l’article. Aucun de ces choix n’est mauvais, mais ils ne vendent pas les mêmes mots.
À côté du périmètre, le compte contient le nombre maximal de bulles par page, les catégories d’annonceurs à exclure et la vérification du site. La vérification prend l’une de trois formes : un enregistrement DNS TXT, une balise meta ou un fichier déposé. La page de Ghost cite les balises meta parmi les usages de son champ Site Header : le champ qui contient le script contient donc aussi la balise.2 Un éditeur qui contrôle son DNS peut plutôt ajouter l’enregistrement.
Le lien de la bulle est signalé aux moteurs de recherche, et le lecteur n’est pas suivi
Chaque lien d’une bulle porte rel="sponsored noopener". Google Search Central demande de marquer « les liens qui sont des publicités ou des emplacements payants » avec la valeur sponsored, et autorise plusieurs valeurs rel dans une même liste séparée par des espaces.8 L’éditeur n’ajoute rien, car le script d’intégration affiche le lien avec l’attribut déjà en place. La bulle est affichée à l’intérieur d’un Shadow DOM : le CSS du site et celui de la bulle ne peuvent donc pas s’influencer mutuellement.
Ce qui quitte la page se limite à trois balises de mesure : un affichage par chargement de page, une ouverture lorsqu’une bulle est restée visible une seconde, et un clic lorsqu’un lien est suivi. AdBubbles ne dépose aucun cookie, ne stocke aucun identifiant et ne collecte aucune donnée personnelle sur les lecteurs. L’association se fait entre les mots de la page et un annonceur qui les a achetés. Nous ne choisissons pas quels lecteurs voient une bulle, nous ne suivons pas un lecteur d’une page ou d’un site à l’autre, et nous ne promettons aucun résultat.
Pour un site qui utilise plusieurs modèles, le point pratique est la différence entre un champ applicable à tout le site et un champ propre à une page. Squarespace, Ghost et Webflow désignent chacun un champ qui atteint toutes les pages, et Webflow propose aussi un champ dont le code « ne s’appliquera qu’à cette page ».3 Un éditeur gagne de l’argent lorsqu’un lecteur suit le lien d’une bulle, et une bulle ne peut s’ouvrir que là où le script d’intégration s’est exécuté. Un script collé dans un champ propre à une page peut produire des bulles sur cette seule page, et c’est le champ applicable à tout le site qui place le script d’intégration sur chaque page.