Test de la solution de recueil de consentement Tarteaucitron
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>
(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