Comment installer tarteaucitron.js avec WordPress et pourquoi utiliser cette libraire.

tarteaucitron.js + 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.

Pourquoi utiliser tarteaucitron au lieu d’un autre plugin WordPress ?

En réalisant le site internet de notre agence (Agence web Tooltip), 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, car dans ces données, 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

Je vous rassure, 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, que 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 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 à 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="/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.

Important !

Si vous avez des erreurs dans la console JavaScript, comme par example « tarteaucitron not defined » etc. C’est sûrement dû à un plugin d’optimisation (c’était mon cas 😋)

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.

Des questions ? Nous sommes là pour vous aider 🧐 :

bonjour@agencewebtooltip.com