Comment ajouter un bandeau cookies à un site Carrd

Où coller la balise dans Carrd

Carrd ajoute du code personnalisé via l’élément Embed, disponible à partir de l’offre Pro Standard.

1. Dans l’éditeur, cliquez sur « Add Element » et sélectionnez « Embed ».
2. Réglez « Type » sur « Code » et collez la balise dans le champ « Code ». Un « Label » comme « Cookiequiet » vous aidera à le retrouver.
3. Réglez « Style » sur « Hidden » (masqué) et « Location » sur « Head », puis cliquez sur « Done ».
4. « Publish ». Carrd documente qu’un embed masqué ne produit rien dans l’éditeur ; vous ne voyez le résultat que sur le site publié.

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

Les embeds masqués placés dans le Head sont publiés dans la section head de la page, quel que soit l’endroit où l’élément se trouve dans la mise en page : vous pouvez donc garder l’élément là où cela vous arrange. Quand vous avez plusieurs embeds de head, gardez celui de Cookiequiet en premier dans la liste des éléments et vérifiez une fois le code source de la page publiée : cq.js doit venir avant vos balises.

Comment gérer les balises que vous ajoutez

Carrd ne dépose lui-même aucun cookie de mesure d’audience sur votre site ; tout ce qui exige un consentement vient des embeds que vous ajoutez. Deux façons de les brancher, toutes deux dans un second embed Head masqué placé après celui de Cookiequiet :

Marquage (rien ne se charge avant le consentement). Changez la balise d’ouverture de chaque script :

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", et son image noscript doit être retirée ; les détails sont dans le guide Meta Pixel.

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 au-dessus de la balise Google dans le même embed, comme dans le guide Google Analytics 4. Cookiequiet envoie la mise à jour après chaque choix.

Vidéos et cartes. L’élément Video de Carrd imprime une iframe de lecteur ; pour une vidéo qui doit attendre le consentement, utilisez un Embed inline avec l’iframe écrite avec data-cq-src au lieu de src, et Cookiequiet la charge après le consentement. Les formulaires connectés à Mailchimp ou à des services similaires n’envoient des données que lorsque le visiteur les soumet et n’ont pas besoin de marquage.

Comment ajouter le lien Préférences de cookies

Ajoutez à la section de votre pied de page un élément Embed avec « Type » réglé sur « Code » et « Style » sur « Inline », contenant :

html
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Un embed inline imprime le HTML là où se trouve l’élément, le lien apparaît donc dans le pied de page ; stylez-le avec un petit attribut style inline pour l’accorder à votre texte. Vous pouvez aussi activer le bouton flottant de préférences dans les réglages du bandeau.

Comment tester

1. Publiez, puis ouvrez le site publié 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 rien d’autre.
3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les balises marquées s’exécutent et leurs cookies apparaissent.
4. Consultez le registre des consentements dans le tableau de bord Cookiequiet.

Ce qui est propre à Carrd

• Offre. Les embeds exigent Pro Standard ou plus ; l’offre gratuite et Pro Lite ne peuvent pas ajouter de code. Les réglages avancés (Pro Plus) ne sont pas nécessaires pour un embed de head.
• Sites d’une page. Un site Carrd est un seul document ; le bandeau se charge une fois et le choix s’applique à toutes les sections.
• Domaines personnalisés et adresses carrd.co fonctionnent tous les deux ; le bandeau ne se soucie pas de l’hôte.
• Plusieurs embeds. Chaque embed Head masqué est imprimé séparément ; gardez les balises qui dépendent les unes des autres, comme la balise Google et ses extraits d’événement, dans le même embed pour fixer leur ordre.
• Republication. Toute modification d’un embed n’atteint les visiteurs qu’après une nouvelle publication ; rechargez la fenêtre privée après avoir publié, avant de tester de nouveau.
• Le ciblage géographique sur chaque offre permet à une landing page de n’afficher le bandeau qu’aux visiteurs des pays réglementés ; voir faut-il un bandeau cookies.