tarteAuCitron - prise en charge

tarteAuCitronSi vous utilisez tarteAuCitron pour être en conformité avec les règles du RGPD, UP (depuis la version 2.4) génère automatiquement un code conforme à celui attendu par tarteAuCitron.

Les étapes :

  1. mise en place des scripts tarteAuCitron en indiquant les services utilisés.
    Une méthode, utilisant LM-Custom-site version 2.5, est proposée à la fin de cet article
  2. indiquer sa prise en charge dans les paramètres du plugin UP
  3. c'est tout, le reste est automatique

Le résultat :

Si le visiteur n'a pas autorisé les cookies globalement ou pour un service, un bandeau le signalera

La copie d'écran ci-dessus montre la page de démo pour l'action media-youtube.

On peut voir que la vidéo n'est pas affichée. Il faudra accepter globalement (Tout accepter) ou pour certains services (Personnaliser) pour voir la vidéo.
On peut aussi cliquer sur le bouton "autoriser" à l'emplacement de la vidéo

Les actions concernées

Pour chacune des actions concernées, je vais indiquer

  • le code Javascript d'initialisation à ajouter pour la prise en charge globale du service
  • les restrictions et difficultés rencontrées

media-youtube

(tarteaucitron.job = tarteaucitron.job || []).push('youtube');

L'option play-on-visible ne fonctionne pas avec tarteAuCitron

ico-danger le script tarteAuCitron utilise l'URL youtube-nocookie.com pour afficher les vidéos. Cela peut être génant pour les sites qui filtrent au niveau des http headers

media-vimeo

(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');

L'option play-on-visible ne fonctionne pas avec tarteAuCitron

media-plyr

Vous pouvez l'utiliser sans souci pour les vidéos et mp3 hébergés sur votre serveur.

Comme il n'est pas possible d'adapter cette action pour empêcher Youtube et Vimeo de déposer des cookies, je vous déconseille de l'utiliser dans ces cas. Utilisez plutôt media-youtube et media-vimeo

bg-video

(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');

Les vidéos Youtube et Vimeo sont prises en charge. Une option height a été ajoutée pour gérer la hauteur de la vidéo uniquement dans ces 2 cas. Je vous conseille d'utiliser des vidéos hébergées sur votre serveur pour ne pas perturber le rendu de la page.

gmap

(tarteaucitron.job = tarteaucitron.job || []).push('googlemapssearch');

iframe

Il vous incombe de vérifier que vos iframes ne déposent pas de cookies.

Vous pouvez remplacer l'action iframe par div pour saisir le code proposé par tarteAuCitron.
N'oubliez pas d'initialiser le service. Pour un cas exceptionnel, vous pouvez utiliser localement une action addscript.

Les actions non concernées

Aussi bizarre que cela puisse paraître, les actions suivantes ne déposent pas de traceur

Si vous trouvez des actions qui déposent des cookies, n'hésitez pas à me le signaler

Mise en place de tarteAuCitron

Si votre template ne permet pas l'ajout de code Javascript, vous pouvez utiliser la version 2.5 site mon module LM-Custom disponible sur cette page : https://lomart.fr/extensions/lm-custom

Etape 1 : mise place du module LM-Custom

Une fois téléchargé et installé, il faut l'activer sur toutes les pages en position debug pour qu'il soit appelé en fin de page (juste avant la balise </body>)

Etape 2 : appel du script tarteAuCitron

Il suffit d'ajouter les codes indiqués ci-dessous.
Modifier uniquement les XXXX par vos valeurs et supprimer les commentaires pour alléger la page.

Tarteaucitron js

 Le paramétrage se passe dans l'onglet Javascript de LM-Custom

Fichier JS HEAD

On indique le chemin vers le fichier de tarteAuCitron.

Personnellement, j'utilise une version sur un CDN

https://cdnjs.cloudflare.com/ajax/libs/tarteaucitronjs/1.8.5/tarteaucitron.js
ou 
https://cdn.jsdelivr.net/gh/AmauriC/tarteaucitron.js@1.8/tarteaucitron.js

Vous pouvez aussi télécharger le dossier comme indiqué sur cette page et le copier sur votre site. Si le dossier est en racine et se nomme tarteaucitron, il faudra mettre dans cette zone

tarteaucitron/tarteaucitron.js

Code JS HEAD

On ajoute un script pour initialiser tarteaucitron.

Je ne mentionne que les options pour lesquelles je n'utilise pas la valeur par défaut. Vous trouverez toutes les options sur cette page

var tarteaucitronForceLanguage = 'fr'; 
tarteaucitron.init({
 "privacyUrl": "XXXX",  // <=== URL absolue vers votre page mentions légales
 "readmoreLink": "XXXX", // <=== URL relative vers la page de votre site pour le bouton "En savoir plus" dans la liste des services
 "orientation": "bottom",
 "showAlertSmall": true,
 "cookieslist": true,
 "showIcon" : true,
 "iconPosition": "BottomLeft", 
 "adblocker": true, 
 "removeCredit": true, 
});
var tarteaucitronForceLanguage = 'fr'; /*forcer la langue - merci woluweb */

tarteaucitron.init({
 "privacyUrl": "URL absolue vers votre page mentions légales", /* pour le bouton "Politique de confidentialité" */
 "readmoreLink": "/fr/privacy", /* URL relative vers la page de votre site pour le bouton "En savoir plus" dans la liste des services */
 "orientation": "bottom", /* emplacement bandeau (top - middle - bottom) */
 "showAlertSmall": true, /* la petite bannière */
 "cookieslist": true, /* Afficher la liste des cookies */
 "showIcon" : true, /*  la petite icone */
 "iconPosition": "BottomLeft", /* emplacement de la petite icone : BottomRight, BottomLeft, TopRight and TopLeft */
 "adblocker": true, /* Afficher un avertissement si un adblocker est détecté */
 "removeCredit": true, /* Supprimer le lien de crédit */
});
voir la version documentée du codereplier

Code JS BODY

C'est la partie la plus délicate, car elle varie en fonction des services que vous utilisez. Je mets ci-dessous, les services utilisés par les démos de UP. A vous d'ajouter les vôtres comme indiqué à la dernière étape du guide d'installation sur cette page

tarteaucitron.user.gtagUa = 'UA-XXXX';
tarteaucitron.user.gtagMore = function () { /* XXXX */ };
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');
(tarteaucitron.job = tarteaucitron.job || []).push('googlemapssearch');
tarteaucitron.user.gtagUa = 'UA-9999999-99';
tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };
(tarteaucitron.job = tarteaucitron.job || []).push('gtag');
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');
(tarteaucitron.job = tarteaucitron.job || []).push('googlemapssearch');
voir la version documentée du codereplier

Pour plus d'infos, vous pouvez vous référer à la présentation de Marc Dechèvre (woluweb)

Détails