Moins encombrant que l'outil de recueil de consentement Quantcast (je n'en peux plus de ces sites qui vous balancent des popups à la gueule !), Tarteaucitron est également gratuit, mais sans obliger à créer un compte. Il a été créé en 2018 par Amauri Champeaux. En outre, il propose à l'utilisateur de modifier son choix à tout moment, grâce à une petite icône de biscuit toute mignonne qui flotte en bas à droite de votre site.

Un panneau de gestion des cookies vous permet de décider précisément quel service vous autorisez à déposer des cookies.

Et surtout, il a un nom rigolo…

En revanche, pour l'installation, ça va être beaucoup plus prise de tête qu'avec Quantcast…

Installation

Je me suis basée sur le tuto officiel que vous pouvez retrouver ici…

Télécharger le zip sur le dépôt Git

Copier les fichiers tarteaucitron.js et tarteaucitron.services.js dans votre répertoire de javascripts (dans mon exemple, ce répertoire s'appelle /js).

Faites le lien vers tarteaucitron.js

<script type="text/javascript" src="js/tarteaucitron.js"></script>

Puis coller le code d'initialisation

<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* Privacy policy url */

"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
"cookieName": "tarteaucitron", /* Cookie name */

"orientation": "middle", /* Banner position (top - bottom) */

"showAlertSmall": false, /* Show the small banner on bottom right */
"cookieslist": false, /* Show the cookie list */

"showIcon": true, /* Show cookie icon to manage cookies */
"iconPosition": "BottomRight", /* BottomRight, BottomLeft, TopRight and TopLeft */

"adblocker": false, /* Show a Warning if an adblocker is detected */

"DenyAllCta" : true, /* Show the deny all button */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */

"handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */

"removeCredit": false, /* Remove credit link */
"moreInfoLink": true, /* Show more info link */

"useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
"useExternalJs": false, /* If false, the tarteaucitron.js file will be loaded */

//"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for multisite */

"readmoreLink": "", /* Change the default readmore link */

"mandatory": true, /* Show a message about mandatory cookies */
});
</script>

C'est pas fini ! Dans votre répertoire de javascripts créer (s'ils n'existent pas déjà) deux sous-répertoires /lang et /css, y placer respectivement tarteaucitron.fr.js et tarteaucitron.css

Si vous observez des caractères bizarres dans votre popup, ouvrir /lang/tarteaucitron.fr.js et supprimer les caractères passés au paramètre middleBarHead, sinon ça va toujours essayer de s'enregistrer en UTF8.

Paramétrage

Paramètres du code d'initialisation

La version par défaut s'étale en plein milieu, avec une ombre monstrueuse, c'est intrusif et pas beau du tout… Si vous voulez placer le bandeau en bas, dans le tarteaucitron.init({}), mettez le paramètre « orientation » à « bottom ».

Dans le paramètres privacyUrl, indiquez le lien vers votre page de politique de confidentialité.

Le nom du cookie qui stocke le consentement de l'utilisateur est « tartaucitron » par défaut, mais vous pouvez le changer grâce au paramètre « cookieName ». Ce cookie dure 1 an.

Exemple de contenu de ce cookie (pour les curieux) : !gtag=false!facebook=false

Choix des services pouvant déposer des cookies

C'est toujours pas fini ! Ensuite, il faut

• recenser et choisir manuellement les services utilisés sur votre site…
• ajouter du code à la suite du script d'initialisation précédent (le tarteaucitron.init)
• supprimer le code qui appelle habituellement ces services

Bon courage si vous avez un gros site qui utilise plein de services dont vous avez oublié l'existence de la moitié…

Exemple :

(...)  
  "readmoreLink": "", /* Change the default readmore link */

  "mandatory": true, /* Show a message about mandatory cookies */
});

tarteaucitron.user.gtagUa = 'UA-0000000-XX';
tarteaucitron.user.gtagMore = function () { };
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
(tarteaucitron.job = tarteaucitron.job || []).push('facebook');

</script>

Voici plus en détail quelques exemples de services couramment utilisés…

Google Analytics

tarteaucitron.user.gtagUa = 'UA-0000000-XX';
tarteaucitron.user.gtagMore = function () { };
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');

Et supprimer (ou commenter) le code que vous utilisez habituellement (c'est à dire <script async src= »https://www.googletagmanager.com/gtag/js?id=UA-5267002-14″></script>
<script>window.dataLayer = window.dataLayer || [];…)

Google Fonts

tarteaucitron.user.googleFonts = ['Ubuntu', 'Roboto Condensed'];
(tarteaucitron.job = tarteaucitron.job || []).push('googlefonts');

Youtube

(tarteaucitron.job = tarteaucitron.job || []).push('youtube');

Remplacer votre code embed habituel par un div portant la class youtube_player. Dans l'attribut videoID mettre l'id de votre video (le paramètre que vous trouvez après /embed/ ou après le ?v= dans l'URL de la vidéo sur Youtube… Dans mon exemple c'est IBnshjEceKA)

<div class="youtube_player photo_article" videoID="IBnshjEceKA" width="600" height="338" theme="light" rel="1" controls="1" showinfo="1" autoplay="0" mute="0"></div>

Facebook

(tarteaucitron.job = tarteaucitron.job || []).push('facebook');

Et supprimer/commenter le bloc de code qui commence par <div id= »fb-root »></div>
<script>(function(d, s, id) {…

Cas de Google Adsense

Pour Adsense, il faut également remplacer le code fourni par Adsense par celui de Tarteaucitron. Problème : il ne gère pas le cas du code pour la annonces automatiques (celui qu'on place dans le head du site). Autre problème : il bloque complètement la pub au lieu de proposer l'alternative sans personnalisation ! Votre site se trouve donc complètement démonétisé, ce qui n'est pas vraiment le but…

A éviter donc si vous essayez de rentabiliser votre site avec Adsense…

Personnaliser la CSS

Ça se passe dans le fichier tarteaucitron.css, et vous allez vraiment avoir besoin de l'inspecteur F12. Ainsi que d'une bonne dose de patience quand le cache s'en mêle et qu'aucune modification ne semble s'appliquer…

Par exemple, dans la version 20201017 de Tarteaucitron, la couleur du fond du bandeau est définie vers la ligne 491 (#tarteaucitronRoot #tarteaucitronAlertBig), la couleur du bouton « accepter » (de couleur verte) se trouve vers la ligne 530 (classes .tarteaucitronCTAButton et .tarteaucitronAllow et id #tarteaucitronPersonalize2), celle du bouton « refuser » vers la ligne 541 (classes .tarteaucitronCTAButton et .tarteaucitronDeny et id #tarteaucitronAllDenied2)…

Sources

Mode d'installation pour Tarteaucitron

Implémenter tarteaucitron.js avec Google Tag Manager

TarteAuCitron RGPD sur le forum OpenElement