Données personnelles, politique de confidentialité, consentement… Autant de mots que vous avez dû rencontrer au détour de vos recherches pour créer votre WordPress. En effet, tous ces éléments doivent être obligatoirement pris en compte depuis 2018 et la mise en vigueur du RGPD. Or, la Commission Nationale de l’Informatique et des Libertés (CNIL) recommande un outil en particulier : Tarteaucitron. Problème : il n’est peut-être pas aussi accessible que d’autres comme Complianz, par exemple. Mais, tant qu’à faire, nous allons découvrir ensemble comment l’installer simplement et sans risque sur WordPress pour faire plaisir à tout le monde !

Vous avez dit RGPD ?

Mais peut-être vous ai-je déjà perdu ? RGPD, données personnelles, cookies… Mais qu’est-ce donc que tout ce charabia ? Eh bien depuis 2018, l’Union Européenne a instauré un Règlement Général sur la Protection des Données (RGPD). Celui-ci oblige notamment à lister toutes les données recueillies sur votre site web. Et ce qu’elles soient données sciemment à travers un formulaire d’inscription, par exemple, ou via des cookies installés sur votre WordPress. Mais le RGPD vous oblige aussi à demander le consentement de l’utilisateur pour récupérer ces données. Ainsi, un bandeau doit apparaître lors de la première visite de l’utilisateur demandant clairement et explicitement s’il accepte ou refuse les cookies. En cas de refus, cliquer sur le bouton correspondant doit désactiver ces cookies automatiquement.
Et c’est là que le bât blesse ! Vous avez besoin d’un outil supplémentaire pour cela. Vous avez peut-être testé Cookie Notice, Complianz ou encore GDPR Framework. Mais voilà, ce ne sont pas ceux recommandés par la CNIL. Bien que Complianz soit très pratique, convenons-en.

Installer tarteaucitron manuellement sur votre WordPress

Nous allons donc voir comment installer Tarteaucitron sur votre WordPress manuellement. Attention ! Cela va vous obliger à mettre les mains dans le code de votre thème. Rien de bien méchant, rassurez-vous ! Toutefois, comme vous allez modifier votre thème, il est extrêmement recommandé d’avoir un thème enfant ! Qu’est-ce qu’un thème enfant et comment l’installer ? Je vous explique tout cela ici. Si vous n’avez pas de thème enfant, je vous conseille vivement d’y jeter un oeil avant de vous lancer dans l’installation manuelle de Tarteaucitron.

Les fondations de Tarteaucitron sur WordPress

L'installation manuelle de Tarteaucitron est gratuite et relativement simple à réaliser

Dans un premier temps, rendons-nous sur le site officiel de Tarteaucitron. Sur la page d’accueil, cliquez sur “Guide d’installation”. Sur l’écran suivant, allez directement sur “Installation manuelle gratuite”.

N'ayez pas peur de vous rendre sur Github pour obtenir l'archive

Sur l’écran qui s’affiche, vous avez deux choses à faire. La première est de cliquer sur le gros bouton “Github” qui vous emmène ici. Là, vous pourrez télécharger la dernière version disponible de Tarteaucitron au format zip.

Si le contenu du dossier est clé en main, il a besoin d'un petit renommage

Une fois téléchargée, décompressez l’archive et renommez-la tout simplement "tarteaucitron". Pour cela, un simple clic droit sur le dossier puis la sélection de l’option “Renommer” suffit.

Un petit glisser/déposer en FTP et Tarteaucitron est mis sur votre WordPress

Ensuite, connectez-vous en FTP à votre site web. Pour cela, vous avez besoin des accès fournis par votre hébergeur et d’un client FTP. Ici, nous utiliserons Filezilla. Pour installer et utiliser Filezilla, nous vous expliquons tout de A à Z par ici. Cependant, sachez que, si vous avez la chance d’être client WPServeur, vous disposez d’un accès FTP depuis votre console qui vous dispense de cette petite corvée. À bon entendeur…
Maintenant que vous êtes connecté à vos fichiers en FTP, vous pouvez glisser/déposer le dossier “tarteaucitron” sur votre WordPress. Mettez-le juste au-dessus des dossiers wp-admin, wp-content et wp-includes à la racine.

Maintenant revenez sur tarteaucitron.io et copiez cette partie du code affiché :

<script src="https://2wpserveur-1278.kxcdn.com/tarteaucitron/tarteaucitron.js"></script> <script type="text/javascript"> tarteaucitron.init({ "privacyUrl": "", /* Privacy policy url */ "bodyPosition": "bottom", /* or top to bring it as first element for accessibility */ "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */ "cookieName": "tarteaucitron", /* Cookie name */ "orientation": "middle", /* Banner position (top - bottom) */ "groupServices": false, /* Group services by category */ "showDetailsOnClick": true, /* Click to expand the description */ "serviceDefaultState": "wait", /* Default state (true - wait - false) */ "showAlertSmall": false, /* Show the small banner on bottom right */ "cookieslist": false, /* Show the cookie list */ "closePopup": false, /* Show a close X on the banner */ "showIcon": true, /* Show cookie icon to manage cookies */ //"iconSrc": "", /* Optionnal: URL or base64 encoded image */ "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 */ "mandatoryCta": true, /* Show the disabled accept button when mandatory on */ //"customCloserId": "" /* Optional a11y: Custom element ID used to open the panel */ }); </script>

Une fois le code inclus, une icône Tarteaucitron apparaît

Retournez dans les fichiers de votre thème et ouvrez header.php. Si vous n'avez pas de fichier header.php dans votre thème enfant, je vous suggère tout simplement de copier celui de votre thème parent dans le dossier de votre thème enfant. Ensuite, collez ce code juste avant la balise </head>.
Désormais, en vous rendant sur la page d’accueil de votre site, vous avez une icône Tarteaucitron qui apparaît en bas à gauche de votre écran.

Adaptez Tarteaucitron aux services de votre WordPress

Tarteaucitron a besoin de renseigner des services pour fonctionner pleinement

Mais il n’y a toujours pas de bandeau ! Eh non. Pas encore ! Mais cela ne saurait tarder. En effet, pour le moment, vous ne traitez aucun cookie. Il faut référencer tous les services tiers susceptibles de traiter des données personnelles sur votre site. Donc imaginons que vous ayez ajouté un bouton “j’aime” Facebook sur certaines de vos pages. Il vous faut ajouter un petit script pour cela. Retournons donc sur tarteaucitron.io puis cliquez sur “Next Step” sous le script que vous avez copié dans le header.php de votre thème.

Des centaines de services sont reconnus

Dans la barre de recherche qui s’affiche, tapez “Facebook”. Une liste de tous les services Facebook supportés par Tarteaucitron s’affichent. Choisissez “like box”.

En cliquant sur “installer”, un popup apparaît vous indiquant le code à copier dans votre thème. Si nous suivons bien le même processus, il devrait s'agir de celui-ci :

<script type="text/javascript">
        (tarteaucitron.job = tarteaucitron.job || []).push('facebooklikebox');
        </script>

Rendez-vous alors à nouveau dans votre fichier header.php et collez-le sous la balise <body>. Si vous revenez sur votre site, la magie opère !

Le bandeau apparaît dès que des services sont ajoutés sur votre WordPress

Ainsi, il ne vous reste plus qu’à ajouter un à un les scripts correspondant aux services que vous utilisez (Google Analytics, Matomo, X, Instagram etc…).

Une solution assez personnalisable

Un certain nombre de personnalisations sont possibles sur ce bandeau ! Pour cela, retournez dans le fichier header.php de votre thème enfant. Ensuite, placez-vous au niveau du premier script que nous avons inclus dans la balise <head>.

Environ vingt-cinq lignes se trouvent dans ce script avec chacune une fonction bien particulière. Pour ce qui nous intéresse, nous allons nous pencher principalement sur cinq d'entre elles : "privacyUrl", "orientation", "closePopup", "showIcon" et "iconPosition".

La première ligne "privacyUrl" prévoit déjà un champ vide entre deux guillemets. Vous pouvez y renseigner l'adresse complète de votre politique de confidentialité. Il s'agit d'une page que vous aurez remplie au préalable. Vous avez juste à inclure quelque chose comme https://www.votresite.com/politique-de-confidentialite. Ceci aura pour effet de faire apparaître un lien dans votre bandeau vers cette page.

Un lien vers la politique de confidentialité apparaît automatiquement s'il est configuré. Vous aurez aussi remarqué sur cette image que le bandeau se retrouve en bas de de l'écran. C'est parce que nous avons indiqué "bottom" sur la ligne "orientation" alors qu'elle était encore réglée sur "middle", précédemment. Vous pouvez aussi fixer le bandeau en haut de l'écran en indiquant "top".

Vous pouvez inclure un lien vers votre politique de confidentialité

La ligne "closePopup" vous permet d'ajouter un bouton de suppression du bandeau pour l'utilisateur. Ceci sans qu'il n'ait manifesté un quelconque choix. D'après les règles du RGPD, l'utilisateur doit accepter que ses données soient collectées. Supprimer le bandeau vaut donc un refus.

Ajoutez un bouton de fermeture à votre bandeau

Vous pouvez aussi agir sur l'icône Tarteaucitron qui apparaît en bas à votre droite. Vous pouvez le masquer en réglant la ligne "ShowIcon" sur "false". Mais vous pouvez aussi modifier la position avec la ligne "IconPosition". Par défaut, elle est réglée sur "BottomRight" (bas à droite). Vous pouvez placer l'icône à gauche (BottomLeft) ou en haut de votre écran avec le paramètre "TopRight" ou "TopLeft" comme ci-dessous.

Déplacez ou masquez l'icône Tarteaucitron comme bon vous semble

D'autres lignes peuvent aussi être très intéressantes en terme de personnalisation : "adblocker" et "cookieslist".

La première option, comme son nom l'indique, vous permet de détecter si un bloqueur de publicités est installé sur le navigateur de l'utilisateur. Si tel est le cas, un popup apparaît pour demander à l'utilisateur de désactiver cet outil ou de partir. Pour cela le réglage de cette ligne doit être "true".

La ligne "cookielist" fonctionne en binôme avec "showAlertSmall". Si les deux sont activées, lorsque les cookies sont acceptés, une case apparaît en bas à gauche de l'écran indiquant le nombre de cookies traités sur votre site. Si cela peut être intéressant à titre d'information pour vos utilisateurs, cela peut l'être aussi pour vous. En effet, cela vous permet de connaître de façon fiable l'ensemble des cookies traités sur votre site y compris par les outils tiers (plugins, scripts etc...) que vous utilisez. Ceci afin de créer la politique de confidentialité la plus en règle avec le RGPD.

Affichez tous les cookies présents sur votre site avec Tarteaucitron

Tarteaucitron n’est peut-être pas aussi simple que d’autres solutions clé en main comme Complianz, certes. Cependant, ce désagrément cache souvent un avantage de taille. En effet, ceci rend Tarteaucitron modulable. Ainsi, il peut s’adapter à tout changement de service au gré de l’évolution de votre WordPress. Il peut même s’adapter au fait que vous optiez pour une autre solution que WordPress ! C’est un plus là où d’autres solutions se limitent à notre CMS préféré ou peuvent causer des erreurs si des services sont ajoutés alors qu’elles ne sont pas configurées à la base pour. Parfois, la reconfiguration n’est pas possible et demande de tout reprendre à zéro. Ce n’est pas le cas de Tarteaucitron… De plus, vous êtes assuré d’utiliser un outil reconnu et attesté par la CNIL qui est l’organe officiel dans le domaine en France. Au moins, vous serez tranquille de ce côté là. Il ne vous reste plus qu’à faire le travail !

Si votre hébergeur a un gentil support comme celui de WPServeur, celui-ci pourra sûrement vous accompagner dans l’installation de Tarteaucitron et sa configuration sur votre WordPress. Si ce n’est pas le cas, je ne saurais que trop vous conseiller de jeter un oeil aux offres WPServeur dans lesquelles le support est toujours inclus.