Si 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 :
- 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 - indiquer sa prise en charge dans les paramètres du plugin UP
- 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
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.
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.jsVous 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.jsCode 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 */
});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');Pour plus d'infos, vous pouvez vous référer à la présentation de Marc Dechèvre (woluweb)