• English
CONTACT

EDIT 19/11/2018 : Mise à jour v1.2 avec alternative CDN encore plus simple !

Bonjour à tous,

Si vous lisez ce billet, c'est que vous aussi vous vous êtes demandé, dans le cadre de la RGPD, comment vous alliez pouvoir gérer facilement l'autorisation et l'interdiction de ces satanés cookies / traceurs sur votre site WordPress ou Divi... Merci la RGPD !

Dans le fond, je suis pour ce genre de réglementation, mais il faut avouer que c'est un joyeux bordel techniquement (et légalement).

Au passage, j'invite celles et ceux qui sont passés à côté de cette nouvelle loi ces dernières semaines (ou, comme moi, qui ne savaient pas par quel bout la prendre) à lire cet excellent article de la marmite sur le Règlement Général pour la Protection des Données (et WordPress). Très complet et très concret, il m'a sorti du brouillard dans lequel j'errais depuis un moment.

Et pour aller encore plus dans les détails, vous pouvez aussi visionner cette série de vidéos sur le RGPD par Deborah Donnier. La partie technique est abordée dans la dernière vidéo.

RGPD et cookies (ou traceurs)

Je ne vais pas prendre le risque de (très mal) vous l'expliquer... Je préfère vous laisser lire cette page sur le site de la CNIL qui résume concrètement ce que dit la loi sur l'utilisation des cookies et traceurs.

En deux mots, vous devez interdire sur votre site web le dépôt de cookies ou la mise en place de traceurs par certains services (comme par exemple Google Analytics pour la mesure d'audience ou l'étude de comportements) tant que le visiteur n'a pas exprimé son consentement pour leur utilisation. Ce dernier doit de plus pouvoir choisir retirer sur son consentement par la suite.

Le script tarteaucitron à la rescousse

Le script "tarteaucitron" est un gestionnaire de tags open-source conforme à la RGPD. Il est très léger et recommandé et utilisé par la CNIL.

Il permet non seulement de positionner automatiquement les balises ou marqueurs associées à différents services (mesures d'audience, réseaux sociaux...), à la manière de Google Tag Manager, mais aussi et surtout de recueillir le consentement explicite (ou le refus) du visiteur pour l'utilisation de ces marqueurs et des cookies associés. Exactement ce qu'il nous faut.

Vous pouvez consulter le guide d'installation de tarteaucitron ; j'en détaille ici les différentes étapes pour une mise en œuvre facile et propre dans WordPress ou Divi, avec une alternative via CDN afin de se faciliter la vie 🙂

Installation des fichiers

Attention, méthode alternative au guide du site !

Au lieu de télécharger le code source de tarteaucitron sur GitHub et de l'installer en local, nous allons appeler le script directement sur un CDN (Content Delivery Network).

Cette technique a plusieurs avantages :

  • c'est plus rapide installer,
  • ça n'encombre pas l'espace de stockage,
  • ça simplifie les mises à jour futures du script,
  • ça ne fait pas planter les optimiseurs de code.

DONC PAS DE TÉLÉCHARGEMENT NI D'INSTALLATION DES FICHIERS !!!

Déclaration et initialisation du script

Attention, je vous copie-colle ci-dessous le code pour la version 1.2 du script, mais il faudra récupérer le nouveau code sur le site en cas de mise à jour.

Vous remarquerez que la déclaration du script est différente de celle du guide d'installation car le script n'est pas stocké localement. On appelle une version déjà minifiée via le site jsdelivr qui héberge les fichiers sur un CDN afin de les servir rapidement aux quatre coins du monde.

Pour les futures mises à jour du script, il suffira de modifier l'appel (la première ligne) du script et l'initialisation qui suit, alors qu'avec la méthode standard il faut en plus télécharger la nouvelle version et l'installer.

Les lignes suivantes doivent donc être insérées avant la balise </head> de chaque page de votre site web :

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js"></script>
<script type="text/javascript">
  tarteaucitron.init({
    "privacyUrl": "https://pavenum.com/mentions-legales/", /* 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": true, /* 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": false, /* Disable auto consent */
    "handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
    "removeCredit": false, /* Remove credit link */
    "moreInfoLink": true, /* Show more info link */
    //"cookieDomain": ".my-multisite-domaine.fr" /* Shared cookie for subdomain */
  });
</script>

Nous allons pour cela utiliser les fonctionnalités de WordPress ou de Divi pour effectuer cette tâche automatiquement.

Version Divi

Avec Divi, c'est immédiat car il suffit de copier/coller ce bloc dans l'onglet Intégration de la page "Options" de Divi, dans la zone associée à la balise <head> :

Divi tarteaucitron head

Bien-sûr, on prendra soin d'activer le code d'en-tête, conformément à la capture d'écran ci-dessus.

Version WordPress générale

Si le back-end de votre thème ne vous permet pas d'insérer du code directement (comme par exemple ci-dessus), il faut alors passer par un thème enfant afin d'injecter le code proprement dans vos pages HTML.

Pour ce faire, ajoutez les lignes suivantes dans le fichier functions.php de votre thème enfant :

function pavenum_tarteaucitron_load() {
  wp_enqueue_script( 'tarteaucitron', 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js' );
} 
add_action( 'wp_enqueue_scripts', 'pavenum_tarteaucitron_load' );

function pavenum_tarteaucitron_init() {
  ?><script type="text/javascript">
			tarteaucitron.init({
				"privacyUrl": "https://pavenum.com/mentions-legales/", /* 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": true, /* 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": false, /* Disable auto consent */
				"handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
				"removeCredit": false, /* Remove credit link */
				"moreInfoLink": true, /* Show more info link */
			});
		</script>
<?php
}		
add_action('wp_head', 'pavenum_tarteaucitron_init');

Remarque : Il existe aussi des plugins gratuits permettant d'insérer du code dans les fichiers HTML générés par WordPress, mais je préfère les solutions minimales, légères et sans dépendance.

Ajout des services

L'activation des services se fait à peu près de la même façon. Elle est indispensable pour le fonctionnement du script, puisque sans service, il n'y a aucun cookie ou traceur à interdire.

Il faut dans un premier temps récupérer sur le guide d'installation de tarteaucitron (étape 3) les snippets de code dont vous avez besoin. Par exemple, pour Google Analytics Universal :

Tarteaucitron service Analytics


Cette capture nous indique alors que :

  • le code Analytics doit être placé à la fin de chaque page du site avant la balise </body>,
  • le marqueur officiel associé, que vous avez dû positionner auparavant pour ce service, doit être supprimé.

Le code à utiliser pour Analytics sera donc :

<script type="text/javascript">
tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
</script>

Remarque : Vous noterez que j'ai ajouté une instruction à la fonction analyticsMore() afin de rendre Analytics un peu moins indiscret (anonymisation de l'adresse IP des visiteurs).

Malheureusement, l'anonymisation de l'adresse IP n'est pas suffisante pour dispenser Google de ce consentement obligatoire.

Version Divi

Même procédure que précédemment, mais cette fois le code récupéré doit donc remplacer le marqueur officiel dans la zone associée à la balise <body>, et ce pour chaque service utilisé :

Divi tarteaucitron body

Version WordPress générale

Ajoutez ces lignes dans le fichier functions.php :

function pavenum_add_tarteaucitron_analytics() {
	?><script type="text/javascript">
		tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
		tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
		(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
	</script>
<?php
}
add_action('wp_footer', 'pavenum_add_tarteaucitron_analytics');

Ajout de plusieurs services

Si vous utilisez plusieurs services, vous pouvez coller à la suite tous les morceaux de code associés, soit dans les options de Divi, soit dans la même fonction tarteaucitron_services() pour la version thème enfant (dans ce dernier cas ce n'est pas la peine de déclarer une fonction pour chaque) :

add_action( 'wp_footer', 'tarteaucitron_services' );
function tarteaucitron_services() {
  ?><script>
        tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
        tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
        (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
        (tarteaucitron.job = tarteaucitron.job || []).push('facebook');
        tarteaucitron.user.facebookpixelId = 'PIXEL-ID';
        tarteaucitron.user.facebookpixelMore = function () { /* add here your optionnal facebook pixel function */ };
        (tarteaucitron.job = tarteaucitron.job || []).push('facebookpixel');
        (tarteaucitron.job = tarteaucitron.job || []).push('gplus');
        ETC....................
  </script>
<?php
}

Filtrage de tarteaucitron

Il est possible de désactiver tarteaucitron pour les utilisateurs connectés ou sur certaines pages, par exemple, et donc par la même occasion le dépôt des cookies pour les services déclarés.

Il vous faudra pour cela passer par la méthode du thème enfant. Par exemple, sur ce site je désactive le script et Analytics pour les utilisateurs connectés en utilisant le tag conditionnel is_user_logged_in() :

function pavenum_tarteaucitron_load() {
	if ( ! is_user_logged_in() )
		wp_enqueue_script( 'tarteaucitron', 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@V1.2/tarteaucitron.min.js' );
} 
add_action( 'wp_enqueue_scripts', 'pavenum_tarteaucitron_load' );

function pavenum_tarteaucitron_init() {
	if ( ! is_user_logged_in() ) {
		?><script type="text/javascript">
			tarteaucitron.init({
				"privacyUrl": "https://pavenum.com/mentions-legales/", /* 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": true, /* 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": false, /* Disable auto consent */
				"handleBrowserDNTRequest": false, /* If Do Not Track == 1, accept all */
				"removeCredit": false, /* Remove credit link */
				"moreInfoLink": true, /* Show more info link */
			});
		</script>
<?php
	}
}		
add_action('wp_head', 'pavenum_tarteaucitron_init');

function pavenum_add_tarteaucitron_analytics() {
	if ( ! is_user_logged_in() ) {
		?><script type="text/javascript">
			tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
			tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
			(tarteaucitron.job = tarteaucitron.job || []).push('analytics');
		</script>
<?php
	}
}
add_action('wp_footer', 'pavenum_add_tarteaucitron_analytics');

Boîte de dialogue

Une fois le consentement passé (donné ou non), une boîte est affichée en bas du site, indiquant le nombre de cookies actifs et permettant d'en voir la liste et de gérer les consentements.

Personnellement, je trouve qu'elle défigure un peu le site et je préfère ne l'afficher que sur la page de politique de confidentialité.

Le CSS suivant permet de la masquer partout ailleurs (remplacer XXXX par l'ID WordPress de votre page de confidentialité) :

body:not(.page-id-XXXX) #tarteaucitronAlertSmall {
  display: none !important;
}

Design

Pour finir avec la personnalisation, voici mon CSS associé au design général de tarteaucitron :

/*******************************************************/
/* tarteaucitron */
/*******************************************************/

#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronRoot #tarteaucitronPercentage,
#tarteaucitronAlertSmall #tarteaucitronManager #tarteaucitronDot #tarteaucitronDotGreen {
  background: #E61071 !important;
}
#tarteaucitronAlertBig {
  background-color: rgba(0,0,0,0.8) !important;
}
#tarteaucitronDisclaimerAlert, #tarteaucitronDisclaimerAlert strong, #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  color: #fff !important;
}
#tarteaucitronAlertSmall {
  background-color: rgba(0,0,0,0.5) !important;
}
#tarteaucitronAlertBig #tarteaucitronPersonalize, #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  border-radius: 3px !important;
}

Cela permet d'harmoniser le bandeau et la boite de dialogue avec le reste du site. Je vous laisse le soin de l'adapter, sauf si vous voulez ajouter un peu de rose à votre site !

Mise en cache et optimisation

Le super-bonus, c'est qu'avec la méthode alternative de chargement du script, je n'ai plus aucun conflit avec les optimiseurs de code ou systèmes de cache 🙂

En effet, avec la recopie du script en local, ces derniers rendaient impossibles les appels directs des sous-scripts de tarteaucitron.js (par exemple l'initialisation des traductions) car ils déplaçaient les fichiers optimisés dans des dossiers spécifiques.

Remarque : Vous pourriez objecter qu'avec cette méthode, les scripts ne sont pas optimisés... C'est vrai... Même si j'appelle une version minifiée du script principal sur le CDN, celui-ci appelle des versions non minifiées des scripts annexes. De plus, les scripts ne sont pas combinés.

Mais malgré tout, je suis resté à 100% sur Pagespeed 😉

De plus, avec la méthode d'installation locale, l'optimisation ne fonctionne pas et il faut exclure les scripts des outils d'optimisation ! Donc pas mieux !

Spoiler : L'auteur du plugin prévoit des améliorations dans le chargement et les dépendances des scripts...

Conclusion

Grâce au travail d'Amauri Champeaux, qui fournit de surcroit gratuitement ce script avec les services les plus courants, le contrôle des cookies et traceurs est un jeu d'enfant pour WordPress et Divi.

Je le remercie également chaudement pour l'astuce du CDN qui n'est pas (encore ?) documentée.

60 commentaires sur cet article

  1. Bonjour,

    Merci pour le tutoriel. Il y a quand même un truc que je ne m'explique pas : j'ai voulu insérer le code des deux manières (sur deux sites différents, l'un utilisant Divi et pas l'autre) : j'ai à chaque fois une erreur de type "Uncaught TypeError: Cannot set property 'push' of undefined". Histoire de ne pas passer mon temps à tester le thème et les plugins, j'ai refait une install propre sans rien, et j'ai toujours l'erreur...

    Je vois aussi que ton script tarteaucitron.js est différent de celui que j'ai téléchargé du site officiel. Est-ce que tu aurais des conseils sur la manière de le mettre en place (j'écume GitHub depuis quelques jours à ce sujet...) ?

    1. Salut Stéphane,
      Ton erreur indique que l'appelant de la méthode 'push' n'est pas défini, donc on dirait un problème d'init du script, peut-être parce que tu n'as pas copié les bouts de code au bon endroit.
      Le premier doit être copié entre les balises <head> et </head> des pages HTML, le second (les services) à la fin des pages HTML avant la balise </body>. Donc avec Divi, via l'onglet intégration des options, et pour WordPress sans Divi, via le thème enfant.
      Et si tu utilises des plugins d'optimisation, il se peut que les scripts soient déplacés et que leur ordre d'exécution soir modifié. C'est pour cette raison que je conseille d'exclure le script de ces outils.
      Par rapport au script original, j'ai simplement supprimé 'type="text/javascript"', qui est inutile, et une ligne dédiée aux multi-sites, inutile aussi dans le cas général (d'ailleurs en commentaire dans le script).

      1. Bonjour Yan, merci de ta réponse. C'est bien ce qui me surprend, c'est que j'ai suivi le truc à la lettre sur mon installation toute neuve : aucun plugin installé, juste le thème Divi et Divi-child (j'ai même laissé volontairement le fichier function.php vide, si on oublie l'appel du css parent). Le seul truc que j'ai réglé dans ce WordPress, ce sont les permaliens. Je vais continuer d'enquêter... Si tu veux voir par toi-même : https://test.perspective.marketing

        1. Hello,
          Sur ta page, il y a bien le script dans l'entête, mais aucun service dans le pied de page.
          As-tu bien déclarer au moins un service ? Sinon le script ne fait rien 😉
          Et si oui, vérifie qu'il est bien collé dans la deuxième boîte de la rubrique Intégration des options Divi.

  2. Ca y est, c'est bon, j'ai pigé le truc 🙂
    Une véritable erreur de débutant : je viens de déployer Google Tag manager sur mes sites, mais je suis tellement habitué à Universal Analytics que j'ai inséré le service Analytics à la place de l'API Google Tag Manager. Y'a des jours, faut que je reste couché. Merci en tout cas de tes réponses, ça m'a permis d'aller sur la bonne voie 🙂

  3. Bonjour Yan !

    J'ai un soucis avec la tarteaucitron ... elle n'est apparemment pas faite pour s'accompagnée de WP Rocket ! 🙁

    Le support de WP Rocket me dit : "...nous avons déjà testé et pas possible de faire du chargement différé ou de la concaténation avec ce script..."

    Je sais pas ce que ça veux dire ... ça vous parle ? O_o
    Une piste ?

    1. Bonjour,
      Je n'utilise pas WP Rocket, mais comme je l'explique dans l'article, s'il y a des soucis avec les plugins d'optimisation, il faut exclure le script de leurs traitements. Il doit y avoir une option dans WP Rocket pour exclure des fichiers de la mise en cache et des optimisations.

      1. Bonjour,
        Aucune possibilité dans les paramètres de WP Rocket d'exclure les fichiers JS du cache.
        On peut exclure des fichiers JS de l'optimisation mais pas du cache.

        1. Salut Nicolas,
          Merci pour l'info.

          Entre temps, j'ai réussi à résoudre mon problème de cache en patchant le script qui faisait un mauvais appel du fichier de langue... Du moins un appel faussé par le cache qui modifie le chemin des scripts puisqu'il les déplace dans des dossiers "maison".

          Concrètement, j'ai ajouté cette ligne au début du script principal tarteaucitron.js :

          var tarteaucitronForceCDN = window.location.protocol + '//' + window.location.host + '/tarteaucitron/';

          Et plus besoin d'exclure du cache car je force le chemin d'accès au script appelé.

          J'ai fait part de ce correctif à l'auteur, et il m'a proposé une solution plus générale à partir d'un CDN :

          var tarteaucitronForceCDN = 'https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@1.1/ ';

          Il ajoute :
          "Une meilleure gestion des différentes dépendances est en cours de développement, plus d'infos rapidement ; )"

  4. Bonjour,

    pour analytics, à Ua = 'UA-XXXXXXXX-X doit-on remplacer le texte?
    pour googlemapsKey = 'API KEY'; doit-on également replacer le texte?

    Merci

    1. Salut,
      Oui, les marqueurs associés doivent être supprimés, et dans les services tarteaucitron ajoutés, il faut remplacer tous les codes par les vôtres.

    1. Hello,
      Les codes source des services sont sur le site de tarteaucitron (la page est mentionnée dans l'article).

  5. Bonjour,
    Merci, cela fonctionne nickel (avec Divi).

    Sommes-nous obligé de garder la petite box "Gestion des services" sur l'écran ?
    Je trouve qu'une fois que nous avons accepté ou refusé, elle devrait disparaître.
    J'ai mis : "showAlertSmall" à False mais rien ne change.
    Une idée ?
    Merci.

    1. Bonjour,
      Cela marche très bien pour moi.
      Essayez d'effacer les cookies ou de vider le cache si ce n'est déjà fait...?

      Par contre la loi RGPD impose de donner la possibilité au visiteur de modifier ses consentements à tout moment.
      Donc il faudrait au moins le laisser sur la page de politique de confidentialité 😉
      C'est ce que j'ai fait pour ce site avec le CSS suivant :
      body:not(.page-id-XXXX) #tarteaucitronAlertSmall {
      display: none !important;
      }
      (XXXX étant l'ID de votre page de politique de confidentialité)

      1. Bonjour Yan,
        Oui, autant pour moi, cela fonctionne.
        Effectivement, c'était bien une histoire de cache et/ou de navigation en mode privé, merci.
        Oui, tu as raison.
        Par contre, le CSS, tu le mets où (Divi ou WordPress) ?
        Encore merci.
        Denis

        1. Si tu utilises un thème enfant, dans ton fichier style.css.
          Sinon avec Divi, tu peux ajouter du CSS en bas de la page d'options principale, et plus généralement avec WordPress dans la personnalisation du thème.

  6. Salut

    Petite question rapide, peut on changer la langue des avertissements ou carrément entrer du texte manuellement ?

    Merci en tout cas pour ce tuto

    1. Hello,
      Je pense que le script détecte automatiquement la langue du navigateur pour adapter les messages.
      Sinon tu peux le forcer avec une option dédiée : https://opt-out.ferank.eu/en/install/, rubrique "Step 2", Options (lien rouge).
      Pour personnaliser le texte, il faudra modifier le script.

  7. Où sont passé les anciens commentaires ?
    Je voulais retrouver les anciens commentaire sur WP Rocket car il y avait des infos intéressantes et actualisés avec la version CDN ... mais ils ont disparus ! 🙁

    C'est dommage de les avoir supprimés !
    Je comprends pas bien l'utilité de la manip' ... O_o

    1. Hello,
      Désolé mais j'ai installé il y a peu un plugin qui a mélangé les commentaires de mes articles (un bug), et je pense que vous ne voyiez pas les bons...
      Tout est rétabli.
      Je n'ai évidemment rien supprimé et heureusement, grâce à votre message j'ai pu corriger le bug avant qu'il n'y ait pleins de messages laissés sur les mauvais posts !

  8. Bonjour,

    J'ai un soucis avec le CSS, c'est tjs celui par défaut qui est utilisé et non le CSS personnalisé.

    J'ai testé via une partie pour le custom CSS de mon thème ou en ajoutant le CSS dans le fichier styles.css de mon thème enfant. Rien à faire.

    Quand j'utilise l'inspecteur, je vois que c'est tjs le fichier tarteaucitron.css via le CDN qui est utilisé ! 🙁

    Je cale !

    1. Hello,

      C'est normal que le fichier CSS de tarteaucitron soit toujours appelé, et c'est indispensable. Le CSS que je propose doit juste être ajouté de façon à écraser certaines propriétés.

      Si tu l'ajoutes au CSS additionnel du customizer ou dans ton thème enfant, il n'y a pas de raison qu'il ne soit pas pris en compte.
      As-tu bien vidé tous les caches (Divi, navigateur, serveur) ?
      Essaie de désactiver les options minify et combine de Divi et de les réactiver, idem pour les fichiers statiques. Parfois ça résout ce genre de problème.

      Sinon perso j'ai souvent des soucis de synchro de ce genre avec les options d'optimisation activées, et souvent bizarrement tout se remet en place au bout de quelques minutes (une sorte de temps de propagation ?), même sans vider les caches...

      1. Bonjour Yan,

        J'avoue que ça reste un mystère ... je vide tous les caches que je peux (site via wp-rocket, navigateurs, ...) test sur des navigateurs que j'utilise peu... pour être sûr que cela n'est pas un reste de fichiers stockés en local... etc ... mais j'a tjs le css par default alors que ce devrai être ton css en exemple qui devrai être pris en compte.
        J'ai même testé en ajoutant le CSS dans le fichier style.css du thème parent ... mais rien à faire ! 🙁 ...

        1. Envoie-moi l'URL en privé si tu veux, mais à l'aveugle je ne peux pas vraiment t'aider pour ce genre de choses.

  9. Bonjour
    j'ai noté que la version 1.2 de jsdeliver n'était pas exactement la version de la master de github. Par exemple dans le fichier services, calameo a la valeur needConsent = false dans la dernière version mais true sur le cdn... et personnellement je n'ai pas réussi à overrider cette valeur. Je suis donc revenu à la version téléchargée. Rien ne vous empêche de minifier le script...

    1. Hello Plancton,
      Merci pour l'info, ça peut servir !
      Pour ma part je n'ai pas eu de problème avec la version CDN (mais j'avoue ne pas utiliser beaucoup de services/cookies sur mes sites), et comme je préfère avoir le moins de dépendances en local, cette solution me convient.
      Pour l'optimisation, oui je suis d'accord ce serait possible, mais pour moi le gain ne justifie pas de tout rapatrier en local quand une version est dispo sur CDN.
      Yan

    1. Bonjour,
      Les fichiers de traduction sont dans le dossier "lang".
      Si la langue souhaitée ne s'y trouve pas, il suffit de dupliquer et renommer un des fichiers avec le bon suffixe, et de modifier les traductions.
      La langue est normalement chargée automatiquement.
      Bon courage !

        1. Directement dans le dossier tarteaucitron.
          Par contre c'est vrai qu'avec la version CDN, il est impossible d'y ajouter un fichier.
          Donc il faut suivre la procédure classique et copier le dossier en local : https://opt-out.ferank.eu/fr/install/
          Et là, vous pourrez ajouter un fichier dans le sous-dossier lang.

          1. Je n'ai pas de dossier tarteaucitron.
            A quel endroit devrais être ce dossier ?

            Merci d'avance !

    1. Il faut suivre la procédure décrite dans le lien que je vous copié ci-dessus ; tout est expliqué. Je ne peux pas fournir le support pour lui.
      Indice : Vous trouverez le dossier sur GitHub 😉

      1. Super merci !
        J'avais fait tout votre tuto sans installer le dossier tarteaucitron.js-1.2 à la racine de mon site. Maintenant c'est fait.

        Là je suis dans le dossier lang et il y a le fichier tarteaucitron.fr.js. Sur le site, la langue reste en anglais. Comment modifier cela pour que le français s'affiche ?
        Dois-je installer un logiciel pour modifier du js sur mon pc (si oui pouvez-vous me conseiller un logiciel) ?

        Merci d'avance et désolé pour mes multiples questions, vous m'êtes d'une grande aide.

  10. J'ai réussi en ajoutant cette ligne dans le functions.php du thème enfant dans le script :

    var tarteaucitronForceLanguage = 'fr';

    Merci beaucoup pour ton aide !

    1. C'est étrange car normalement la langue est détectée automatiquement.
      Il faudrait voir si le navigateur ne la force pas... ou un autre élément quelque part ailleurs sur le site.

  11. Bonjour,

    Je reviens vers vous après plusieurs semaines. J'ai installé le script + dossier sur plusieurs sites parfaitement.

    Je cherche aujourd'hui à savoir comment exporter les données des personnes ayant accepté les cookies sur le site. Comment fait-on cela ?

    Merci d'avance !

    1. Bonjour,
      Je ne pense pas que ce soit prévu par le script, car le RGPD ne l'impose pas (au contraire des données personnelles transmises par les formulaires de newsletter ou autres inscriptions et stockées sur le site ou un système externe).

    1. Bonjour,
      GitHub est un service plutôt orienté "versioning", donc pour les développeurs qui souhaitent maintenir un code ou le partager, ou même permettre à des tiers de développer aussi ou de créer des branches à partir d'une même base.
      NPM est un gestionnaire de paquets qui permet, entre autres, d'accéder à des modules JS, de gérer leurs dépendances, etc.
      Les deux systèmes permettent d'accéder au code de tarteaucitron, et pour moi ça ne fait aucune différence dans ce contexte.
      Mais je ne suis pas un spécialiste...

  12. Bonjour,

    Merci beaucoup pour ces explications. J'ai découvert tarteaucitron grâce aux recommandations de la CNIL mais je trouvais leur explications pas très claires étant donné que j'ai uniquement des connaissances de bases dans ce domaine.

    Grâce à vous j'ai enfin pu mettre en place ce bandeau, merci ! Cela fais une semaine que je m'occupe du RGPD sur mon site, c'est assez chiant pour les administrateurs de sites mais c'est plutôt une bonne nouvelle pour nos tous en tant qu'utilisateurs.

    1. Bonjour Nicolas, et merci pour ton retour.
      Et je suis bien d'accord avec ta dernière remarque.
      Personnellement, je n'administre que des petits sites ; je n'ose imaginer le calvaire avec des gros sites communautaires ou d'entreprise !

  13. Bonjour,

    Je n'arrivais pas à afficher le bandeau du Tarteaucitron, normal, je n'avais ajouté aucun service.

    OK là j'ai un site qui n'a aucun service, mais j'ai quand même des cookies dit "nécessaire / obligatoire" des cookies internes.

    Comment ça se passe ?

    Bien Cordialement,

    RV

    1. Bonjour Hervé,
      Le RGPD n'exige pas à ma connaissance le consentement du visiteur pour les cookies strictement nécessaires au fonctionnement du site.
      Personnellement je n'affiche pas de bandeau si je n'en utilise pas d'autres.
      En revanche je l'explique en deux lignes dans les mentions légales ou la politique de confidentialité.

  14. Bonjour, est-il possible de gérer Google Map si l'api KEY n'est pas utilisée dans le cas d'un copier-coller de code issu du site Gmap ? Merci

  15. Bonjour,

    Merci pour ce tuto' 🙂 !

    Je suis sous WordPress et je me demandais où retirer les marqueurs officiels ? ^^'

    1. Bonjour,
      Eh bien ça dépend comment ils ont été ajoutés 😉
      Parfois c'est un plugin, parfois dans le thème enfant (fichier functions.php), parfois dans les options du thème.
      Par exemple, avec Divi on le fait souvent dans l'onglet Intégration de la page Options.
      Mais c'est différent pour chaque thème, et surtout chaque développeur de site.

  16. Bonjour,
    D'abord merci.
    Savez-vous comment ajouter un bouton "Interdire tous les cookies" directement sur le bandeau ?
    Il me semble que cela soit la nouvelle obligation cookies.
    Merci.
    Denis

    1. Bonjour,
      Non désolé, il faudrait pour cela modifier le plugin lui-même.
      Je ne suis pas au courant de cette nouvelle obligation, vous avez une source ?

  17. Bonjour, j'ai tout installer, déclarer google tag manager, dans le corps du code
    rien ne s'affiche. La console affiche : net::ERR_BLOCKED_BY_CLIENT
    sur certaines lignes di tarteaucitron.js.

    Avez vous eu affaire à ce genre de problème ? je suis sous DIVI

    1. Bonjour Mikael,
      Je pense que le message ERR_BLOCKED_BY_CLIENT est associé à un blocage par votre navigateur (protection contre le pistage) ou par un bloqueur de publicité.
      Difficile de vous en dire plus à l'aveugle 😉

Répondre à Yan Annuler la réponse

Votre adresse IP ne sera pas collectée.
Vous pouvez renseigner votre prénom ou votre pseudo si vous êtes un humain ;-)