Comment installer tarteaucitron.js avec WordPress et pourquoi utiliser cette libraire.
Mis à jour le 06 Avril 2022
Comment installer tarteaucitron.js sans plugins et totalement gratuit avec WordPress.
Aujourd’hui nous allons voir comment installer l’outil gratuit tarteaucitron.js pour assurer la conformité RGPD de notre site internet et des sites de nos clients.
Pour aller directement aux étapes d’installation cliquez ici.
Comment installer tarteaucitron.js avec WordPress et pourquoi utiliser cette libraire.
En réalisant le site internet de notre agence (Tooltip Media), je me suis rendu compte d’un problème quand j’ai essayé certains plugins RGPD et cookies :
J’avais installé l’extension Chrome “Google Tag Assistant” pour vérifier que mon code GA (GA : Google Analytics) s’activait bien. Et surtout qu’il s’activait bien quand un visiteur cliquait sur “J’accepte les cookies”.
Mais à ma surprise quand on faisait click sur “J’accepte les cookies” le code Analytics ne chargeait pas directement. Il chargeait seulement après que l’utilisateur changeait de page.
Ce qui n’est pas idéal car on perd des données.
Une solution est forcer le rechargement de la page après le consentement de l’utilisateur mais il y a deux problèmes :
- Niveau expérience utilisateur ce n’est pas ouf 😕
- Les données de Google Analytics sont faussés, en rechargeant la page, l’utilisateur provient d’une source directe (comme s’il avait tapé directement votre adresse internet www.monsite.com) alors que ce n’est pas forcément le cas.
J’ai essayé d’autres plugins mais toujours pareil et j’ai finis par trouver une solution : tarteaucitron.js
PS : Aujourd’hui, les plugins ont évolué et il y a des meilleurs solutions qui résolvent ce problème. Sinon, de notre côté on utilise une autre solution qui s’appelle Klaro.js, je ferai un autre tutoriel si des gens sont intéressés.
Je ne fais pas de la pub pour cet outil, je sais qu’il y a une version payante mais dans ce tutoriel nous allons utiliser la librairie JavaScript de tarteaucitron, elle par contre, est gratuite.
Comment installer tarteaucitron.js sur votre site WordPress ?
Prérequis : Vous devez savoir localiser le fichier “functions.php” de votre thème actuel (ou thème enfant) et savoir l’ouvrir car nous allons le modifier !
1. Télécharger tarteaucitron.js depuis le site officiel
Pour télécharger cliquez sur le lien ci-dessus et ensuite :
- Cliquez sur « Installation manuelle et gratuite »
- Cliquez sur Github
- Ensuite téléchargez les fichiers cliquant sur “Source code (zip)”
- Décompresser les fichiers à l’aide de 7Zip, winrar ou autre logiciel.
2. Uploader le dossier tarteaucitron.js dans votre serveur
Maintenant nous allons nous connecter à notre serveur et uploader tarteaucitron.js.
Personnellement moi j’ai ajouté le dossier tarteaucitron ici :
“/wp-content/themes/[MON THEME]/inc/tarteaucitron/”
Une fois que le dossier est dans votre serveur, il faut toucher au code !
3. Ajouter ce code dans votre fichier “functions.php”
Ouvrez le fichier “functions.php” de votre thème actuel et ajoutez ce code à la fin du fichier :
/**
* Initialize tarteaucitron
*/
function tarteaucitron_init() {
?>
<script src="<?= get_stylesheet_directory_uri() ?>/lib/tarteaucitron/tarteaucitron.js"></script>
<script type="text/javascript">
tarteaucitron.init({
"privacyUrl": "", /* Privacy policy url */
"hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
"cookieName": "tartaucitron", /* Cookie name */
"orientation": "bottom", /* Banner position (top - bottom) */
"showAlertSmall": true, /* Show the small banner on bottom right */
"cookieslist": false, /* Show the cookie list */
"adblocker": false, /* Show a Warning if an adblocker is detected */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"highPrivacy": true, /* Disable auto consent */
"handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
"removeCredit": false, /* Remove credit link */
"moreInfoLink": false, /* Show more info link */
});
</script>
<?php
}
add_action('wp_head', 'tarteaucitron_init');
/**
* Add GOOGLE TAG MANAGER and other services using tarteaucitron
*/
function add_tarteaucitron_services()
{
?>
<script type="text/javascript">
tarteaucitron.user.googletagmanagerId = 'GTM-XXXXXX';
(tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
</script>
<?
}
add_action('wp_footer', 'add_tarteaucitron_services');
Dans ce code il y a deux fonctions :
- Une fonction pour ajouter la librairie tarteaucitron.js et initialiser les paramètres. Vous pouvez d’ailleurs changer les paramètres selon le résultat que vous voulez.
- Une deuxième fonction pour ajouter les services. Les services sont les codes Google Analytics, Google Tag Manager, HubSpot etc. Dans cet example, il y a seulement le service Google Tag Manager.
Vous pouvez trouver toutes les autres services dans le site internet officiel :
https://opt-out.ferank.eu/fr/install/
Les services sont dans la dernière page de l’installation.
Erreurs connus :
Erreur dans la console : « tarteaucitron not defined ».
Si vous avez l’erreur dans la console JavaScript, « tarteaucitron not defined« . C’est sûrement dû à un plugin d’optimisation (c’était mon cas avec autoptimize😋)
Assurez vous d’exclure le fichier « tarteaucitron.js » dans votre plugin d’optimisation.
Voilà ! Vous avez réussi ! 🎉
Normalement vous allez voir la fenêtre RGPD qui va apparaître sur votre site Internet avec toutes les options que vous avez choisi.
Vous pouvez modifier les couleurs de la fenêtre, la taille, la police etc. depuis le fichier /tarteaucitron/css/tarteaucitron.css.
