BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] TarteAuCitron RGPD
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet fermé[Tuto] TarteAuCitron RGPD

 Répondre Répondre
Auteur
Message
Goetheus allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 05 Juil 2015
Pays: France
Status: Inactif
Points: 125
Lien Direct à ce Post Sujet: [Tuto] TarteAuCitron RGPD
    Envoyé : 28 Dec 2018 à 17:26
Salutations à tous !

La mise en conformité RGPD est un vrai casse tête, mais heureusement, la CNIL nous a renvoyé vers tarteaucitron.js, un script complet permettant d'avertir l'utilisateur et de lui donner une belle marge de manœuvre quant à l'usage des cookies et leur placement sur son terminal. Voici donc un tutoriel pour le mettre en place sur un site réalisé sous OpenElement (1.57 R9).

La mise en place du code débute au chapitre III : Tarteaucitron

Je ne suis pas expert en la matière. J'espère néanmoins vous apporter un soutien quant à votre mise en conformité RGPD, mais ce tutoriel ne sera pas exhaustif, et il faudra forcément créer vos propres clauses et correctement gérer votre site en le connaissant sur le bout de vos petits doigts de programmeurs (en herbe, ou pas) !

Ce tutoriel est en attente de validation par la communauté.
Il est susceptible de recevoir des modifications et d'être mis à jour. Si vous avez des questions, j’essaierais autant que faire se peut de vous aider, mais je ne suis pas souvent sur le forum !

SOMMAIRE
  1. Introduction
    1. A parte sur les Cookies
    2. RGPD et consentement
    3. Liens utiles
  2. Préparation
    1. Evaluer les risques de son site
    2. Informer le visiteur
  3. Tarteaucitron
    1. C'est quoi ?
    2. Installation
      • a) Le Code Source
      • b) La Fonction d'Initialisation
      • c) Blocage d'un Service
      • d) Ouverture du panel

I/ INTRODUCTION

1) A parte sur les Cookies

Pour les plus débutants, un cookies n'est évidemment pas un gâteau mais un petit fichier texte qui se place sur le terminal de l'utilisateur lorsqu'il consulte un site internet. Ca permet d'y enregistrer des valeurs que le serveur peut lire et écrire (vérifier et modifier).

Ce sont les cookies qui sont responsables des publicités ciblées que vous avez sur Google ou Facebook. Vous venez d'aller sur un site pour des appareils photos ? Et bien c'est enregistré sur votre terminal, et ainsi Facebook et Google (entre autre) peuvent déterminer que vous êtes susceptible d'acheter un appareil photo, et donc vous propose des publicités ciblées multimédia/photo. Les sacripants !

2) RGPD et consentement

La RGPD (Règlement Général sur la Protection des Données), ou GDPR (General Data Protection Regulation), est une nouvelle loi européenne (ne concernant donc que l'UE) mis en place cette année, qui oblige les éditeurs et hébergeurs de sites internet, de protéger les données de leurs internautes (entre autre). Pour plus d'information sur le texte, voici un LIEN vers l'article wikipédia.

Concrètement pour nous, créateurs de site internet, ça nous oblige à modifier nos outils pour qu'ils respectent la vie privée et les données des utilisateurs.
Des exemples seront plus parlant. En utilisant le code de suivi de Google, les boutons de Like de Facebook, un Google Maps, ou même un simple formulaire de contact (...), dès que le visiteur arrive sur le site, son terminal est littéralement attaqué de cookies. Google va déposer jusqu'à 22 cookies rien que pour mettre en oeuvre son système de suivi (horodateur, session, nouvelle visite, pays d'origine...etc), Facebook va vérifier si l'utilisateur est connecté, Google Map va le géolocaliser...etc. et il faut reconnaître que c'est carrément insupportable d'être surveillé à ce point. Le problème c'est que ces GAFA sont protégés et intouchables, ils jouent avec les lois (et les impôts, mais c'est un autre sujet). C'est donc à nous, utilisateurs enchaînés de leurs services, de faire attention.

Par ailleurs, nous utilisons aussi nos propres services, comme le formulaire de contact. Il y a plusieurs choses à considérer ici. Premièrement, il faut savoir que l'usage d'un captcha nécessite de placer un cookie sur le terminal du visiteur. Ce n'est pas une donnée sensible, mais il doit en être informé !
Ensuite, toute donnée qu'il écrira dans ce formulaire doit être traitée de façon pragmatique (le simple fait qu'il rentre ces informations ne suffit pas à nous autoriser à en faire n'importe quoi, comme Google le fait. Mince, j'ai pas prévenu, ce tuto sera très politisé).
Il faut donc avertir le visiteur de l'usage de ces(ses) données, lui expliquer où elles vont, comment, leur durée de vie...etc. Ici on rejoint la loi existante avant la RGPD, c'est à dire avertir le visiteur.

Mais voilà, la RGPD ne veut plus seulement qu'on l'avertisse, elle veut qu'on obtienne son consentement !

Citer
Le consentement, c'est encore un mot bien complexe, surtout sur internet. Je vous arrête immédiatement : si l'utilisateur poursuit sa visite du site, il ne donne pas pour autant son consentement. C'est donc là notre problème ! Pour le résoudre, il faut donc bloquer tous les cookies jusqu'à ce que le visiteur donne son contentement pour leur usage.
Mais là aussi, il ne doit pas faire de concession : il doit pouvoir dire oui à certains cookies et non à d'autres. Et enfin, il doit pouvoir revenir sur sa décision, à tout moment.

3) Liens utiles

- Tarteaucitron (site officiel)


II/ PREPARATION

Avant de se lancer dans une mise en place d'un script pour gérer les cookies de vos visiteurs, il faut savoir sur quoi agir. Peut être que votre site n'en n'a même pas besoin ?

Le lien sur les 6 étapes de la CNIL regorge d'informations croustillantes. Si vous voulez approfondir, n'hésitez pas à vous en abreuver. Par exemple, si le site représente un organisme public ou une entreprise qui a besoin de traiter beaucoup de données sur ses clients, vous devez posséder un service RGPD ! Il faut donc que le visiteur puisse contacter une personne, au moins par courrier et par mail, pour qu'elle l'informe sur les données que l'organisme ou l'entreprise possède sur lui. Et ainsi peut demander leur suppression.
D'ailleurs, n'importe quel utilisateur peut vous contacter pour vous demander ces informations, et éventuellement leur suppression. ATTENTION : des arnaques commencent à circuler à ce propos via des mails de phishing. Soyez prudent lorsque vous répondez à vos visiteurs !

Bref, venons-en aux faits !

1) Evaluer les risques de son site

Le problème avec cette loi, c'est que rien n'est clair, et que tout est difficile à mettre en place. Il faut donc coder son site de façon à n'utiliser qu'un minimum vital d'informations sur vos visiteurs pour ne pas être inquiété par de grosses modifications par la suite.
Si votre site est une simple vitrine ne demandant rien à vos visiteurs, pas besoin de mettre en place une solution de gestion des cookies, le navigateur du visiteur est le seul outils nécessaire : il faut cependant l'informer (voir point 2 de ce chapitre).

Que votre site soit en ligne, ou non, la première chose à faire est de vérifier les cookies générés. Pour cela, vous avez le formidable outils "Inspecter" de Google Chrome.
Il suffit de cliquer droit n'importe tout sur la page de votre site, puis sur Inspecter. La fenêtre va se rétrécir pour laisser place, à droite, à un panel. Feuilletez-le si vous ne le connaissez pas, très utile pour tester rapidement des modifications sur les feuilles CSS, les div...etc.

En haut de ce panel, vous avez un menu d'onglets avec Elements, Console, Sources...etc. Trouvez l'onglet Application qui est probablement masqué sous les deux flèches qui pointent vers la droite.


Sur la gauche du panel apparaît alors un menu vertical où vous trouverez facilement l'onglet Cookies. Il se déplie et laisse apparaître alors la source des cookies (lien internet classique). En cliquant sur cette source, on peut lister les cookies utilisés par la page avec leur nom, et la donnée qu'ils contiennent, entre autres informations.


Pendant que je rédige ce tuto, je découvre alors que le site OpenElement stocke mon pseudo (UID) dans un cookies ! (voir ligne surlignée en bleue sur l'image ci-dessus).

Le premier cookie que l'on voit est un cookie obligatoire, présent sur tous les sites internet sous PHP. C'est l'ID de la session. Je ne m'étends pas là dessus, mais c'est par exemple le genre de cookie non concerné par la RGPD car on ne peut tout simplement pas se mettre à expliquer à l'utilisateur à quoi il sert (on est pas là pour donner des cours de programmation), et on ne peut pas l'empêcher de s'installer sur son terminal car il est indispensable au chargement du site. Et il ne contient aucune donnée personnelle sur l'utilisateur.

En revanche, il est nécessaire d'expliquer au visiteur (mais pas de bloquer) à quoi sert le cookie généré par un captcha (je pense au captcha classique de OE qui dépose un cookie), et pourquoi le site en a besoin : pour se prémunir du spam. Pourquoi c'est inutile de la bloquer ? Car il ne recueille ou ne stocke tout simplement aucune donnée personnelle. S'en est de même avec tarteaucitron ! Et oui, ce script que nous allons voir dépose un cookie. Il faudra en avertir l'utilisateur.

J'en reviens à l'outils Inspecter de Google Chrome, car il vous permet, lorsque vous créez votre site, de vérifier par la suite si tarteaucitron bloque bien les cookies concernés. Utilisez le donc pour effectuer cette vérification.

2) Informer le visiteur

Le simple fait d'informer ne suffit pas ! Un bandeau d'information seul, sans action, est inutile si vous stockez des données personnelles dans des cookies. Il est cependant obligatoire et le minimum à avoir (même si vous ne stockez aucun cookie qui contient des données personnelles. Il doit dans ce cas renvoyer vers votre mention légale expliquant que vous ne traitez pas de données personelles).

Dans tous les cas, votre pages de Mentions Légales ou Politique de confidentialité (si vous voulez mettre ces détails à part), doit informer pleinement l'utilisateur sur l'usage des cookies fait par votre site.

Cette page doit obligatoirement (et au minimum) contenir les informations suivantes :
Citer
- Quelles données sont utilisées.
- A quoi servent ces données.
- Qui va traiter ces données.
- Combien de temps sont conservées ces données.
- Quels sont les droits de l'utilisateur sur ces données.

Voici un exemple, si vous avez juste un captcha et un formulaire de contact (exemple non exhaustif):
Citer
Le site "Mon Super Site" s’engage à ce que la collecte et le traitement de vos données, effectués à partir du site https://wwwmonsupersite.com, soient conformes au règlement général sur la protection des données (RGPD) et à la loi Informatique et Libertés.

Tout traitement des données personnelles collectées sont effectuées sous la responsabilité de : Editeur + Propriétaire du Super Site, (immatriculation, siret, capital...etc.) dont le siège social est situé au 13 rue de la liberté – 66666 Enfer, dûment représenté par Méphistophélès, en sa qualité de gérant.

DONNEES PERSONNELLES
D’une façon générale, la visite du site peut se faire sans avoir à décliner l’identité ou à fournir des informations personnelles sur l’internaute. Il est possible de désactiver tous les éléments tiers installant des cookies depuis votre navigateur.

INFORMATION SUR LES COOKIES
Un cookie ? Hélas ce n'est pas un gâteau ! Un cookie est un petit fichier texte qui peut être placé sur votre terminal à l'occasion de la consultation d'un site internet. Un fichier cookie permet à son émetteur d'identifier le terminal dans lequel il est enregistré, pendant la durée de validité ou d'enregistrement dudit cookie. Certains cookies sont indispensables à l'utilisation du site, d'autres permettent d'optimiser et de personnaliser les contenus affichés.

TRAITEMENT DES DONNÉES
Le traitement a pour objet la mise en contact avec le propriétaire du site. Il lui permet ainsi d'établir une correspondance. Le formulaire de contact est protégé par un Captcha, une technologie anti-robot, protégeant le propriétaire du site d'une prolifération de faux mails. Ce système dépose un cookie sur le terminal de l'internaute pour fonctionner. Il ne recueil cependant aucune donnée personnelle.

Données traitées :
- Adresse mail de l'internaute
- Nom de l'internaute

Les données sont issues de l'enregistrement par la personne souhaitant établir une correspondance avec le propriétaire du site.

Les données récoltées dans le formulaire de contact sont conservées à l'abri de tous tiers, pour une durée de cinq (5) ans, dans une boîte mail sécurisée et ne font l'objet d'aucun traitement informatisé.  

Conformément à la loi informatique et libertés l'internaute peut exercer un droit d'accès, de suppression ou de modification des données récoltées, par lettre recommandée avec avis de réception. Nous pouvons néanmoins accéder à cette requête directement par mail.

Il est possible d'ajouter le nom des cookies et leur usage précis si vous le désirez.
J'ai noté que certains sites proposaient même un formulaire de contact spécifique afin que l'internaute puisse exercer son droit à la consultation et la suppression de ses données personnelles. Ce formulaire comporte l'import d'une image (la carte d'identité de l'internaute est alors demandée). Il doit aussi pouvoir le faire par courrier : il faut donc renseigner une adresse postale valide.

Bon, vous savez désormais un peu comment tout ça fonctionne et se réglemente. Seulement, ce n'est pas tout, il faut que l'internaute puisse agir pour protéger ses données.

PS: Je n'ai pas précisé qu'un site https est fortement recommandé dans le respect de la RGPD. Le site de la CNIL regorge d'information, alors n'hésitez pas à vous y rendre.

Passons maintenant aux choses sérieuses...

III/ Tarteaucitron

Ca me donne fin ! Mais je préfère les tartes aux pommes à vrai dire...

1) C'est quoi ?

Tarteaucitron est un script complet permettant de gérer les cookies de son site internet de façon individuelle et selon les normes de la RGPD.
Le créateur est français ! Une aubaine pour nous, car si vous avez un problème, vous pouvez directement contacter le développeur via Github et déposer une Issue (report). Voici le GitHub de AmauryC pour tarteaucitron.

Concrètement, tarteaucitron c'est trois éléments principaux :
- Un bandeau d'avertissement avec deux boutons (Accepter, Personnaliser).
- Un menu pour gérer l'activation/désactivation des cookies.
- Un accès au menu disponible à tout moment via une box au premier plan.

2) Installation

Il y a trois étapes dans l'installation du script :
- Obtenir le code source et le mettre à la racine de votre site internet.
- Activer le code source depuis le code de votre site internet.
- Cibler les zones de code où un cookie est actif afin de le bloquer à l'avance.

a) Le code source

Le code source est à télécharger juste ICI. Prenez la version zip.

Une fois téléchargé, vous pourrez directement extraire le dossier (tarteaucitron.js-1.2 dans sa version actuelle au moment de la rédaction du tuto) à la racine de votre site internet (par défaut : C:\Users\VotreNom\Documents\openElement\VotreSite

Renommez ce dossier "tarteaucitron" sans majuscule.
Ce qui donne : C:\Users\VotreNom\Documents\openElement\VotreSite\tarteaucitron

Décortiquons un petit peu ce dossier maintenant. Voici l'arborescence que vous devriez avoir :
  • VotreSite
    • tarteaucitron
      • css
        • tarteaucitron.css
      • lang
        • tarteaucitron.cs.js
        • tarteaucitron.de.js
        • tarteaucitron.el.js
        • tarteaucitron.en.js
        • tarteaucitron.es.js
        • tarteaucitron.fr.js
        • tarteaucitron.it.js
        • tarteaucitron.nl.js
        • tarteaucitron.pl.js
        • tarteaucitron.pt.js
        • tarteaucitron.ru.js
      • advertising.js
      • LICENSE
      • package.json
      • README.md
      • tarteaucitron.js
      • tarteaucitron.services.js
Le dossier css contient un fichier css. Il vous permettra de customiser le visuel de l'ensemble des éléments de tarteaucitron. Tout est modifiable à souhait.

Le dossier lang contient bien évidemment les 11 traductions possibles. Ce sera la version fr qui nous intéressera. Elle est déjà complète, mais vous pouvez l'ajuster selon vos envies.

A priori vous n'aurez pas à modifier d'autre fichier à la main. Mais il faut savoir que le fichier tarteaucitron.js contient tout le script avec quelques éléments visuels (comme les croix) qu'il est possible d'enlever. Et surtout que le fichier tarteaucitron.services.js contient tous les services pouvant être bloqués (83 au total). Il est possible de créer un service custom selon ses besoins. Mais c'est un peu plus complexe.

Dans un soucis de bien faire, je vous suggère d'utiliser le logiciel gratuit NotePad++ afin d'éditer ces fichiers, ou tout autre logiciel d'édition de texte avancé.

b) La fonction d'initialisation

Une fois le dossier bien déposé où il faut, ouvrez votre site sous OpenElement !

Pour l'usage de tarteaucitron, je vous recommande fortement de créer un site internet reposant sur un même calque "base". C'est le cas de la plupart des templates. Ca vous évitera de copier/coller le code sur toutes les pages du site. Car effectivement, l'initialisation et la liste des services devra être copiée sur chaque page.

Dans l'espace code de votre calque de base (ou de la page concernée), cliquez sur le + afin d'ajouter un nouveau bloc de code, ou, glissez l'élément Bloc de Code (Source) dans votre page :

Citer
Nom : tarteaucitron
Type : Html
Emplacement : Header

Ajoutez ensuite le code suivant (le code vierge d'origine est disponible ICI).

<script type="text/javascript" src="/tarteaucitron/tarteaucitron.js"></script>

<script type="text/javascript">
    tarteaucitron.init({
        "privacyUrl": "https://votrePageDeMentionLegale.htm",

        "hashtag": "#tarteaucitron", /* Ouvre le panel */
        "cookieName": "tartaucitron", /* Nom du cookie lié à tarteaucitron.js */

        "orientation": "bottom", /* Position du bandeau : top (haut) ou bottom (bas) */
        "showAlertSmall": false, /* Affiche la petite box en bas à droite pour ouvrir le panel */
        "cookieslist": true, /* Affiche la liste des cookies dans le panel */

        "adblocker": false, /* Affiche un avertissement si adblock est activé */
        "AcceptAllCta" : true, /* Afficher le bouton "Tout accepter" même si highPrivacy est sur true */
        "highPrivacy": true, /* Désactive l'auto-consentement par scrolling de la page */
        "handleBrowserDNTRequest": false, /* Prend en compte l'option "ne pas suivre" des navigateurs */

        "removeCredit": true, /* Enlever le lien Crédit dans le panel */
        "moreInfoLink": true, /* Afficher le lien plus d'info sur les cookies */
    });
</script>

Ce code est déjà personnalisé, mais vous noterez qu'il est commenté entre les balises /* */ ainsi vous pourrez le modifier à votre guise.

Comment ça fonctionne ?

<script type="text/javascript" src="/tarteaucitron/tarteaucitron.js"></script>
Ici on indique qu'il faut aller chercher le script tarteaucitron.js où il se situe à la racine de votre site internet, dans le dossier tarteaucitron.

<script type="text/javascript">
    tarteaucitron.init({
Ici, on demande dès le chargement du site (puisqu'on est dans le header, c'est chargé au tout début), d'initialisé le script dont on a donné l'accès juste au dessus.
Il s'agit d'une fonction, et donc, les données que l'on met après sont des arguments. Ils permettent de la personnaliser. Vous avez le détail des éléments qui sont directement commentés dans le code plus haut.

Ce code ne suffit pas. En effet, si on test son site, rien ne se produit. C'est tout simplement car nous n'avons renseigné aucun service à bloquer.
Tarteaucitron n'est donc pas un simple bandeau d'information. Il n'existe que pour bloquer certains éléments du site générant des cookies, au bon vouloir de l'internaute.

c) Blocage d'un service

Pour bloquer un service, il faut vous référer à cette PAGE. En effet, les 83 services sont détaillés. Renseignez un service dans la barre de recherche, par exemple Google.
Un certain nombre d'éléments apparaissent : Google jsapi, Google Maps, Google Analytics, Google AdSense...etc.

Le principe de tarteaucitron c'est de recréer le service (ici Google), à l'emplacement où il apparaît dans le site. Et de le lier à un système push.
Concrètement, le fichier tarteaucitron.services.js contient un service. Ce service est appelé par un push au chargement de la page. Et vous avez une div (un bloc de code visuel pour nous) qui réceptionne le contenu du service pour l'afficher sur le site (ou pas).

On va installer deux services ensemble pour vous expliquer. On prendra l'exemple de Google Analytics et de Facebook (page like).

Donc commençons par google analytics. Allez dans la liste des services du site de tarteaucitron, cliquez sur Google Analytics (gtag.js).

Vous constatez alors qu'il faut remplacer votre code habituel de Google Analytics par un autre !

Le code classique que vous mettez sur votre calque de base, ou dans toutes les pages dont vous désirez effectuer le suivi, c'est celui là :
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');

  // your optionnal gtag()
</script>

Bon et bien vous pouvez l'oublier. Récupérer votre Tag, le UA-XXXXXXXX-X. Et placez le code suivant dans un nouveau bloc de code (source), en replaçant bien le Tag UA.

Pour se faire, glissez un nouveau Bloc de Code (Source) sur votre page, avec une nouvelle configuration : 

Citer
Nom : googlegtag
Type : Html
Emplacement : EndBody

Et insérer le code suivant :
<script type="text/javascript">
        tarteaucitron.user.gtagUa = 'UA-XXXXXXXX-X';
        tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };
        (tarteaucitron.job = tarteaucitron.job || []).push('gtag');
</script>
Vous pouvez insérer aussi le gtag optionnel pour les suivi personnalisé. Si vous n'en n'avez pas, ne mettez rien.

Désormais. Si vous lancez un prévisualisation de votre site, le bandeau va apparaître (en bas de page si vous n'avez pas modifié l'initialisation du script que nous avons vu plus haut).

Vous pouvez cliquer sur Personnaliser pour voir le détail, et ainsi voir le service de Google Analytics.

Le service ne s'est pas lancé ! Tarteaucitron l'a bloqué en attendant une décision de l'utilisateur. C'est là où l'on respecte enfin la RGPD !
Vous pouvez accepter/refuser mais aussi laisser sans agir, et ouvrir l'Inspecteur de Google Chrome que nous avons utilisé tout à l'heure pour regarder la liste des cookies placés sur votre terminal. Vous constaterez que le cookie n'est présent que si l'on accepte son placement.

Citer
Astuce !
Vous avez cliquez trop vite sur "J'accepte" ? Pour l'instant, impossible de modifier votre choix. Il faudra donc effacer votre historique et les cookies de votre navigateur pour effectuer plus de tests.

Passons désormais à l'exemple avec Facebook, qui demande un petit bout de code supplémentaire. Ainsi, vous aurez vu les deux exemples possibles.

Tapez "Facebook" dans la barre de recherche du site de tarteaucitron et cliquez sur Facebook sans rien d'autre entre parenthèses.

Vous pouvez d'ores et déjà supprimer le JDK facebook à mettre sur votre site habituellement, ou les iframe que vous utilisez pour ça, si vous l'aviez mis en place.

Le code JDK facebook à enlever (pour rappel) :
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.0";
    fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>

Premièrement, on va comme pour google, appeler le service correspondant. Créez encore un Bloc de Code (Source) sur votre page, nommez le facebooklike, toujours en html, et à la fin du body, et enfin insérez le code suivant :
<script type="text/javascript">
        (tarteaucitron.job = tarteaucitron.job || []).push('facebook');
        </script>

Pour finir, il faut remettre un bout de code sur votre site là où vous aviez affiché (ou, où vous voulez afficher) votre bouton like.

Ce code diffère selon l'esthétique voulue. Ils sont tous détaillés avec une image sur le site de tarteaucitron. Prenons le premier qui s'affiche pour ce test, et qui permet d'avoir les boutons Aimer, Partager, et le nombre de personnes qui aime la page, le tout horizontalement.

Pour l'afficher sur le site, prenez cette fois-ci le Bloc de Code (Visuel) et placez le à l'endroit désiré.

A l'intérieur du bloc de code visuel (en cliquant sur la clef à molette), vous mettrez le code suivant :
<div class="fb-like" data-href="https://votrePageFacebook.com" data-layout="standard" data-action="like" data-share="true"></div>

Le code est assez simple. La class permet de relier le code au service. Le data-layout est la forme de placement des boutons et du texte. Data-action est le type de bouton principal quand data-share permet d'afficher ou non le bouton partager.

Désormais, lorsque vous lancer une prévisualisation de votre site, non seulement le panel contient le détail du cookie lié à Facebook, mais en plus, par défaut ou si vous le bloquer, l'élément n'apparaîtra plus sur la page et sera remplacé par une boîte stipulant que l'élément Facebook est bloqué, mais qu'il est possible de le réactiver en cliquant sur le bouton "Autoriser". Ainsi l'internaute peut autoriser Facebook à se lancer directement à l'emplacement de l'élément, en plus du panel de gestion des cookies.

d) Ouverture du panel

Pour terminer, une petite astuce pour ouvrir le panel. En effet, je n'utilise personnellement pas la petite box au premier plan en bas à droite que j'ai désactivé dans nos exemples, qui normalement permet d'ouvrir le panel de gestion des cookies. J'ai plutôt opté pour un lien depuis mon footer, qui s'appelle "Gestion des Cookies", plus discret.

Si vous désirez créer votre propre lien pour accéder au panel de gestion des cookies, c'est très simple. Créez donc votre lien (un texte par exemple, ou une image), et dans la configuration du lien, il faudra simplement mettre un code javascript au lieu d'un lien http(s):// classique.

A côté de l'emplacement où l'on met normalement les liens classiques, il y a une petite boîte avec une flèche, cliquez dessus pour sélectionner "JS", au lieu de HTTP par défaut, et mettez le lien suivant :

tarteaucitron.userInterface.openPanel();


Cliquez sur valider sans effectuer d'autres modifications, et le tour est joué, votre panel s'ouvrira lorsque vous cliquerez sur votre lien !

Pensez à vérifier que les cookies sont bien supprimés via l'Inspecteur de Google Chrome lorsque vous effectuez vos tests. Et sachez que tout fonctionne en local !

Bon courage à tous ! Et j'espère que tout ceci vous aidera !
Bisous ! <3


Edité par Goetheus - 29 Dec 2018 à 19:06
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 28 Dec 2018 à 18:43
Salut,

Je vais lire avec attention ton tuto (bravo en tout cas de t'y être mis). Même si certains points peuvent être interprétés (après une première lecture), l'essentiel est bien là et suffira à 99% des visiteurs/concepteurs d'OE que je vois régulièrement.
Pour informations, j'ai quelques sites validés par la CNIL au niveau RGPD, en fonction d'une deuxième et troisième lecture, je donnerai quelques informations complémentaires si réellement pertinents. mais comme j'ai une partie (apayante) de mise en conformité RGPD (avec tous les dossiers à insérer etc), je verrai bien.

En tout cas, bravo pour ton travail qui demande toujours énormément de temps et de structure.


Edité par brolysan - 28 Dec 2018 à 18:44
Haut de la page
Goetheus allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 05 Juil 2015
Pays: France
Status: Inactif
Points: 125
Lien Direct à ce Post Envoyé : 28 Dec 2018 à 19:06
Salut Brolysan !

Ca doit bien être la première fois que je fais un tuto, c'est peut être pas optimal. Je suis tout ouïe pour l'améliorer ! Mais effectivement ça a pris plus de temps que je ne l'aurais cru :o

Ah ce serait top de nous partager les sites validés par la CNIL niveau RGPD ! Il y a tellement de clauses et de sous articles, que c'était compliqué de tout citer dans le tuto, j'ai vraiment effleuré l'essentiel à ce niveau, et je ne connais absolument pas tout :/

Merci pour ta contribution !
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 29 Dec 2018 à 09:57
Bravo et merci !
Je n'ai pas tout lu mais ça a l'air très clair et sans fautes d'orthographe ! ;-)
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 29 Dec 2018 à 10:56
Message posté par Goetheus Goetheus a écrit:

Salut Brolysan !

Ca doit bien être la première fois que je fais un tuto, c'est peut être pas optimal. Je suis tout ouïe pour l'améliorer ! Mais effectivement ça a pris plus de temps que je ne l'aurais cru :o

Ah ce serait top de nous partager les sites validés par la CNIL niveau RGPD ! Il y a tellement de clauses et de sous articles, que c'était compliqué de tout citer dans le tuto, j'ai vraiment effleuré l'essentiel à ce niveau, et je ne connais absolument pas tout :/

Merci pour ta contribution !

Ho rassures toi, selon les "personnes" qui te répondent (quand ils répondent en plus) de la CNIL, les réponses peuvent légèrement varier et certaines règles sont à interprétation parfois même.
Alors ton tuto est déjà une excellente chose, crois moi.
Peut être approfondir la partie googlemap, je pense que selon les templates (les miens par exemple), c'est l'autre plugin qu'il faut prendre, mais je vais étudier les différentes options sur le site tarteaucitron néanmoins.
Haut de la page
Goetheus allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 05 Juil 2015
Pays: France
Status: Inactif
Points: 125
Lien Direct à ce Post Envoyé : 29 Dec 2018 à 19:04
@Bridet Super ! J'espère que ça te seras utile :)
@Brolysan Oui, la loi est encore sujette à multiples interprétations et mises en application, vu qu'il n'y a aucune jurisprudence. On pourra s'adapter correctement qu'au fil des procès... Et suite aux modifications du texte aussi.

Je n'ai pas mis d'exemple avec Google Map dans le tuto, il en faudrait un tu penses ? Ou c'est le Google Tag (code de suivi) qui n'est pas suffisamment complet ?
Haut de la page
baiawaiii allez vers le bas
Groupie
Groupie


Depuis le: 13 Dec 2018
Status: Inactif
Points: 40
Lien Direct à ce Post Envoyé : 30 Dec 2018 à 14:03
Beau Tuto ;)

mais j'ai plus facile lol

J'ai enfin retrouvé le lien ouf ! : 

Pour personnaliser votre bandeau vous meme ;) 


Bloc de code source -> HTML -> Header -> à poser sur toutes les pages devant être affectés
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Lien Direct à ce Post Envoyé : 30 Dec 2018 à 14:11
Pas la même approche du tout baiawaiii, le plugin tarteaucitron regroupe une majorité de script pour certains cookies, à adapter selon le site en question et des scripts intégré (comme googleanalytics, etc).
Alors que ton lien permet de personnaliser un bandeau pour accéder à une page que vous devez vous même réaliser et respecter pour la mise en conformité du RGPD.

Mais bien de le souligner, libre à chacun de faire comme il veut aussi.
Haut de la page
Goetheus allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 05 Juil 2015
Pays: France
Status: Inactif
Points: 125
Lien Direct à ce Post Envoyé : 03 Jan 2019 à 17:58
Salut à tous !

Oui baiawaiii, cookieconsent offre aussi la possibilité de bloquer les cookies, mais ça demande encore plus de travail au final, car c'est à toi de cibler les cookies et les services gênant pour les indiquer à cookiesconsent.

De base, cookieconsent ne fait que prévenir l'internaute qu'il y a des cookies. Il ne peut que les accepter (puisqu'à peine connecté, il en est déjà la cible en fait). Du coup, j'ai bien que ce soit insuffisant pour te protéger de la RGPD.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Lien Direct à ce Post Envoyé : 07 Mai 2019 à 19:34
Notes: 

Ce tutoriel est maintenant verrouillé.  Pour toute question sur l'application sur votre projet ouvrez un nouveau sujet.

Si vous jugez qu'une modification doit être faite au tutoriel, demandez à un membre de l'Admin group pour qu'il soit temporairement déverrouillé.

Merci
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.105 secondes.