Comment ajouter un bandeau cookies à un site Ghost

Où coller la balise dans Ghost

Ghost imprime le code personnalisé sur chaque page via ses helpers ghost_head et ghost_foot, que chaque thème inclut. Dans « Ghost Admin », allez dans « Settings », puis « Advanced », puis « Code injection ». Collez la balise tout en haut du champ « Site header » et cliquez sur « Save » :

html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>

Le code du Site header est injecté dans le head ; celui du Site footer est injecté avant la balise body fermante. La balise va dans le header pour s’exécuter avant toute balise que vous ajoutez. L’injection de code survit aux changements et aux mises à jour de thème, c’est pourquoi elle vaut mieux que de modifier le default.hbs du thème.

Comment gérer les balises que vous ajoutez

Ghost ne dépose de lui-même aucune mesure d’audience tierce. Ses propres cookies pour les membres connectés et pour l’administration sont strictement nécessaires. Les balises qui exigent un consentement sont celles que vous collez, et elles vont dans les mêmes champs, sous la balise Cookiequiet :

Marquage (rien ne se charge avant le consentement) :

html
<script type="text/plain" data-cq-category="analytics" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cq-category="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Le code de base du pixel Meta reçoit data-cq-category="marketing" ; retirez son image noscript, qui se chargerait sans JavaScript. Les balises marquées fonctionnent aussi dans le champ Site footer.

Consent Mode (la balise Google se charge avec des signaux refusés par défaut) : placez le bloc de consentement par défaut de Google comme script inline entre la balise Cookiequiet et la balise Google, comme dans le guide Google Analytics 4. Cookiequiet pousse les mêmes valeurs par défaut dès qu’il s’exécute et la mise à jour après chaque choix.

Contenus embarqués dans les articles. Les cartes d’intégration de l’éditeur (YouTube, Vimeo, X) impriment des iframes ordinaires, qui se chargent tout de suite. Pour une vidéo qui doit attendre le consentement, utilisez une carte HTML avec l’iframe écrite avec data-cq-src au lieu de src ; voir Vidéos YouTube et consentement. Les systèmes de commentaires ou widgets de newsletter ajoutés par injection de code suivent la règle du marquage.

Portal et membres. Les fonctions d’abonnement de Ghost (Portal, liens de connexion, la newsletter) sont internes et nécessaires ; listez leurs cookies sous Nécessaires dans le tableau des cookies, que le scanner de cookies remplit pour vous.

Comment ajouter le lien Préférences de cookies

Allez dans « Settings », puis « Navigation », et ajoutez un élément libellé « Préférences de cookies » à la « Secondary navigation » (navigation secondaire), que la plupart des thèmes impriment dans le pied de page, avec l’URL #cq-preferences. Ghost transforme les URL de navigation en URL absolues : le lien imprimé se termine donc par #cq-preferences au lieu d’être exactement cette chaîne ; ajoutez ce gestionnaire dans le champ « Site footer » pour que le clic ouvre quand même le centre de préférences :

html
<script>
  document.addEventListener('click', function (e) {
    var a = e.target.closest ? e.target.closest('a') : null;
    if (a && a.hash === '#cq-preferences' && window.Cookiequiet) {
      e.preventDefault();
      window.Cookiequiet.showPreferences();
    }
  });
</script>

Si vous maintenez votre propre thème, un simple <a href="#cq-preferences" data-cq-show-preferences> dans default.hbs n’a besoin d’aucun gestionnaire. Le bouton flottant de préférences dans les réglages du bandeau est la troisième option.

Comment tester

1. Ouvrez le site dans une fenêtre de navigation privée et cliquez sur « Tout refuser ».
2. Vérifiez les cookies dans les outils de développement : cq_consent et ceux de Ghost, pas de _ga, pas de _fbp.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent.
4. Cliquez sur le lien Préférences de cookies : le centre de préférences s’ouvre.
5. Consultez le registre des consentements dans le tableau de bord.

Ce qui est propre à Ghost

• Ghost(Pro) et auto-hébergé utilisent les mêmes réglages Code injection ; rien ne dépend de l’hébergement.
• L’injection de code par article existe dans les réglages de l’article ; elle est imprimée après le code header du site, une balise ajoutée là voit donc quand même la balise Cookiequiet en premier.
• Thèmes. Changer de thème conserve l’injection de code. Seul le gestionnaire du pied de page suppose que le thème imprime la navigation secondaire ; si ce n’est pas le cas, ajoutez le lien à la navigation principale ou utilisez le bouton flottant.
• Le guide officiel d’intégration Google Analytics de Ghost vous dit de coller la balise Google dans le champ Site header ; faites-le sous la balise Cookiequiet, marquée ou avec le bloc de consentement par défaut.