docs · pour les développeurs

Installer le snippet

Une balise script met la bannière sur votre site et retient chaque traceur non essentiel jusqu’à la décision du visiteur. Il y a deux règles, et c’est tout le travail.

La balise

Copiez la balise depuis Paramètres du site → Installation dans le tableau de bord. Elle porte la clé publique de votre site et l’environnement qu’elle doit charger :

<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
        data-cc-site="pk_live_…"
        data-cc-env="production"></script>

Chaque site a deux clés : la clé de production pour les vrais visiteurs et la clé preview, qui charge ce qui est publié en prévisualisation pour que vous puissiez tester sur une page de staging sans toucher personne.

Règle un : la balise va en premier

Placez la balise comme premier script dans <head>, avant tout autre script. Tout ce qui s’exécute avant peut poser un cookie pendant que le visiteur décide encore, et le runtime ne peut pas le reprendre. Le runtime installe son intercepteur de façon synchrone, avant même de récupérer votre configuration, si bien que rien de non essentiel ne s’exécute avant qu’un choix existe.

Règle deux : les scripts soumis au consentement deviennent inertes

Les scripts qui exigent le consentement sont marqués pour que la bannière puisse les libérer une fois leur catégorie accordée :

<script type="text/plain"
        data-cc-category="analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

Un script type="text/plain" ne fait rien tout seul. Quand le visiteur accorde la catégorie, le runtime recrée le script dans l’ordre du document et il s’exécute normalement. Les scripts inline fonctionnent de la même façon : donnez-leur type="text/plain" et un data-cc-category.

Scripts non balisés : la liste de blocage

Vous n’avez pas à tout baliser. Les traceurs enregistrés dans votre tableau de bord portent des motifs d’hôte, compilés en carte de blocage à la publication. Tout <script src> ou <iframe src> non balisé dont l’hôte correspond est neutralisé sur place (les scripts deviennent text/plain, les iframes sont retenues avec leur source garée dans data-cc-src) et libéré quand sa catégorie est accordée. Les iframes bloquées affichent un texte de remplacement, modifiable par langue sous Bannière → Textes.

Systèmes de gestion de contenu

WordPress : Apparence → Éditeur de fichiers du thème → header.php, avant wp_head(), ou utilisez un plugin de scripts d’en-tête.
Shopify : Boutique en ligne → Thèmes → Modifier le code → layout/theme.liquid, première ligne dans <head>.
Webflow : Paramètres du projet → Custom code → Head code.

La réserve sur les gestionnaires de balises

Ne chargez pas la balise CookieCrumbs via un gestionnaire de balises. La balise doit s’exécuter avant le gestionnaire ; une balise de consentement déclenchée depuis le gestionnaire arrive trop tard pour retenir quoi que ce soit. Collez-la directement dans la page, au-dessus du gestionnaire, et laissez Consent Mode porter les décisions dans vos balises (voir le guide Consent Mode).

La vérification d’installation

La vérification d’installation du tableau de bord charge votre page dans un vrai navigateur, accepte une fois et rapporte ce qu’elle a réellement vu. Rien n’est pris sur parole. Elle regarde :

le snippet est présent dans la page et placé avant les autres balises,
les valeurs par défaut de Consent Mode sont fixées avant l’exécution de toute balise Google,
la bannière s’est affichée, et la clé publique de la page appartient à ce site,
un cookie de consentement est écrit après acceptation,
__tcfapi n’est pas fourni : CookieCrumbs n’implémente pas l’IAB TCF aujourd’hui.

Chaque vérification en échec s’accompagne d’une phrase de verdict nommant l’étape suivante, par exemple : « Le snippet est là, mais d’autres balises s’exécutent avant. Déplacez la balise au-dessus de tout autre script du head, puis relancez la vérification. » Une vraie décision de consentement d’un visiteur compte aussi comme preuve que l’installation fonctionne.

Vous préférez un paquet ?

Si votre site est construit avec Next.js, React, Astro, Nuxt ou SvelteKit, les SDK pour frameworks placent la balise pour vous, et npx cookiecrumbs init détecte votre framework et écrit la config.