Gérer les Consentements de Cookies Webflow - Finsweet X Cloudflare

Lorsque vous possédez un site web, en fonction des informations que vous collectez et de votre emplacement, vous devez vous conformer à divers règlements. L'un des règlements les plus connus concerne la protection des données des utilisateurs de l'Union européenne : le RGPD.

Dans cet article, nous allons explorer l'une des règles essentielles pour être en conformité avec le RGPD : le stockage des consentements de cookies. Nous allons examiner comment, sur notre site Webflow, il est possible de stocker les cookies en utilisant Finsweet Cookies Consents et Cloudflare de manière totalement gratuite pour respecter les normes en vigueur.

RGPD, Cookies, Stockage et Conformité d'un site web ?

Règle générale

Si vous êtes une entreprise ou une autre entité basée dans l'Union Européenne (UE) et que vous possédez un site web, vous devez vous conformer au RGPD (Règlement Général sur la Protection des Données). Cette exigence s'applique également aux entreprises ou entités basées hors de l'UE, mais qui collectent des données sur des utilisateurs résidant dans l'Union européenne.

Le RGPD impose de nombreuses règles pour préserver et garantir les informations personnelles des utilisateurs. Si vous gérez un site web et devez respecter le RGPD, vous vous retrouverez inévitablement confrontés à la question de la mise en conformité des cookies de votre site internet.

Définition - Cookies : petits fichiers texte que les sites web déposent sur votre navigateur pour se souvenir de vos préférences et vous offrir une expérience en ligne plus personnalisée.

Ces cookies représentent des informations, des données collectées par les sites web à votre sujet. Selon le RGPD, ils doivent être protégés et stockés. Mais pourquoi stocker les consentements de cookies ? C'est bien plus que cocher des cases pour se conformer à la loi. Voici pourquoi c'est crucial, en quelques points clés :

• Respect de la vie privée : Stocker les consentements, c'est signifier que vous respectez l'espace privé de vos utilisateurs, un peu comme frapper à la porte avant d'entrer.
• Établir la confiance : Les utilisateurs veulent être certains que leurs données sont entre de bonnes mains. En stockant les consentements, vous établissez une relation de confiance.
• Éviter les ennuis légaux : Une mauvaise gestion des données peut entraîner des problèmes juridiques. Stocker correctement les consentements, c'est éviter des ennuis légaux - un bouclier légal pour votre site.
• Anonymisation des adresses IP : N'oublions pas les adresses IP. En les anonymisant, vous renforcez la protection des données, un peu comme brouiller la carte pour protéger le trésor.

Nouvelle réglementation 2024

Depuis mars 2024, la réglementation a évolué pour la gestion des consentements de cookies avec les outils Google. Si vous utilisez des solutions comme Google Analytics ou Google Ads, vous devrez utiliser une solution de gestion de cookies compatible au Google Consent Mode V2.

Guide sur le Google Consent Mode V2

Comment stocker les consentements des cookies de mon site Webflow ?

1 - Pré-requis pour stocker les données relatives au consentements des cookies

Avant d'entrer dans le vif du sujet, vous devrez prévoir quelques éléments en amont :

• Posséder un projet Webflow.
• Intégrer la solution Finsweet Cookie Consent dans votre projet (Veuillez noter que cet article ne présente pas comment intégrer la solution Finsweet Cookie Consent dans Webflow, mais plutôt comment stocker les consentements une fois que la solution est déjà en place).
• Avoir un compte Cloudflare (gratuit).

2 - Création de compte Cloudflare

Si vous êtes nouveau dans l'univers de Cloudflare, découvrons ensemble comment créer rapidement un compte.

Outil - Cloudflare : Cloudflare représente une plateforme de services cloud offrant des solutions pour la sécurité, les performances, et la distribution de contenu, contribuant ainsi à améliorer la disponibilité et la protection des sites web.

Pour commencer, rendez-vous sur la page d'inscription de Cloudflare. Dans l'onglet "Plateforme pour développeurs", optez pour l'offre gratuite "Workers : offre gratuite".

Ensuite, vous serez dirigé vers une page où vous pourrez créer votre compte en fournissant une adresse e-mail et un mot de passe.

Une fois votre compte créé, assurez-vous de le vérifier conformément aux instructions fournies.

3 - Configurer l'enregistrement des données - Partie Technique

3.1 - Créer un Worker Cloudflare

Une fois votre compte Cloudflare validé, dirigez-vous vers la section "Workers & Pages" et créez un nouveau "Worker" en cliquant sur "Overview" puis "Create Worker".

Définition - Worker : un petit programme qui s'exécute directement sur les serveurs de Cloudflare, permettant d'ajouter des fonctionnalités personnalisées aux sites web sans avoir à modifier le code du serveur d'origine.

Après avoir cliqué sur le bouton de création du Worker, attribuez-lui un nom, de préférence explicite. Ensuite, plus bas sur la page, cliquez sur "Deploy" pour déployer le Worker nouvellement créé.

3.2 - Créer un namespace pour KV Cloudflare

Après la création du Worker, accédez à l'onglet "KV" (toujours dans le sous-menu "Workers & Pages").

Définition - KV (Key-Value store) : abréviation de stockage de clé-valeur, c'est une base de données qui stocke des informations sous forme de paires (clé-valeur, où une clé est associée à une valeur), offrant une manière rapide et efficace de stocker et de récupérer des données. Elle est souvent utilisée avec les Workers de Cloudflare pour gérer des informations de manière dynamique.

Sur la page KV, créez un "namespace" en cliquant sur "Create a namespace". Attribuez ensuite un nom à votre namespace, puis cliquez sur "Add".

Définition - Namespace : un espace de stockage dédié à un ensemble spécifique de données au sein de la base de données Key-Value (KV) de Cloudflare. Il permet d'organiser et de structurer les données de manière distincte, offrant une meilleure gestion et isolation des informations stockées dans le KV store.

Votre namespace a alors été créé avec succès.

3.3 - Modifier votre Worker avec le Script Finsweet Cookie Consents

À présent, retournez à la section "Overview" pour localiser votre "Worker". Cliquez dessus pour accéder à l'édition.

Dans l'interface d'édition du Worker, repérez le bouton "Quick edit" en haut à droite et cliquez dessus.

Une fois dans la partie du code, supprimez le code existant.

Puis, collez le code du script Finsweet Cookie Consents :

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.corsHeaders=void 0,t.corsHeaders={"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET,HEAD,POST,OPTIONS","Access-Control-Allow-Headers":"Content-Type","Access-Control-Allow-Credentials":"true","Access-Control-Max-Age":"86400"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=n(2);addEventListener("fetch",e=>{e.respondWith(r.handleRequest(e.request))})},function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.handleRequest=void 0;const o=n(3),s=n(4),u=r(n(5)),l=o.Router();l.post("/",u.default),l.options("*",s.handleOptions),l.get("*",()=>new Response("Not found",{status:404})),t.handleRequest=e=>l.handle(e)},function(e,t){e.exports={Router:(e={})=>new Proxy(e,{get:(t,n,r)=>"handle"===n?async(n,...r)=>{for([p,hs]of[t.all||[],t[(n.method||"GET").toLowerCase()]||[]].flat())if(m=(u=new URL(n.url)).pathname.match(p))for(h of(n.params=m.groups,n.query=Object.fromEntries(u.searchParams.entries()),hs))if(void 0!==(s=await h(n,...r)))return s;if(e.else)return e.else(n,...r)}:(o,...s)=>(t[n]=t[n]||[]).push([`^${(e.base||"")+o.replace(/(\/?)\*/g,"($1.*)?").replace(/\/$/,"").replace(/:([^\/\?\.]+)(\?)?/g,"$2(?<$1>[^/.]+)$2")}/*$`,s])&&r})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.handleOptions=void 0;const r=n(0);t.handleOptions=e=>{const t=e.headers,n=t.get("Origin"),o=t.get("Access-Control-Request-Method"),s=t.get("Access-Control-Request-Headers");if(null!==n&&null!==o&&null!==s){const e=new Headers({...r.corsHeaders,"Access-Control-Allow-Headers":s});return new Response(null,{headers:e})}return new Response(null,{headers:{Allow:"GET, HEAD, POST, OPTIONS"}})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=n(0);t.default=async e=>{const{id:t,action:n,url:o,userAgent:s,consents:u,bannerText:l}=await e.json();if(!(t&&n&&o&&s&&u&&l))return new Response("Some parameter is missing",{status:400,headers:r.corsHeaders});const a=(new Date).toISOString(),c=[n,(e.headers.get("x-real-ip")||"").replace(/\d*$/,"0"),a,o,s,Object.entries(u).reduce((e,[t,n])=>(n&&e.push(t),e),[]).join(","),l].join(";");await CONSENTS.put(t,c);const i={...r.corsHeaders,"Content-type":"application/json"};return new Response(c,{status:200,headers:i})}}]);

Enfin, cliquez sur le bouton en haut à droite "Save and deploy"

3.4 - Lier le "Worker" au "KV"

Après avoir sauvegardé et déployé le Worker, retournez à l'interface d'édition du Worker.

Maintenant, dirigez-vous vers la section "Settings" puis "Variables".

En descendant un peu, repérez la section intitulée "KV Namespace Bindings".

Cliquez sur le bouton "Add binding". Soyez attentif car :

• En nom de variable, utilisez "CONSENTS" en majuscules.
• Pour "KV", sélectionnez le "KV" que vous avez créé précédemment.

Enfin, cliquez sur "Save and deploy" !

3.5 - Récupérer l'URL Endpoint de votre Worker

Lorsque vous êtes dans l'éditeur de votre Worker, tout en haut de la page, repérez un lien de prévisualisation. C'est votre URL endpoint.

Définition - Endpoint : une URL spécifique ou un point d'accès unique dans une API (Interface de Programmation d'Application) ou un service web. Il représente la destination où les requêtes peuvent être envoyées pour interagir avec une application ou accéder à des fonctionnalités spécifiques. Les endpoints sont définis pour effectuer des opérations telles que la récupération, la modification, l'ajout ou la suppression de données à partir d'une ressource via l'API. En résumé, un endpoint est une adresse spécifique permettant à des applications ou des services de communiquer entre eux via le protocole HTTP ou d'autres protocoles similaires.

Dans cette étape, vous devrez :

1. Ouvrir l'URL endpoint dans un nouvel onglet (IMPORTANT).
2. Copier l'URL endpoint à partir du nouvel onglet.

3.6 - Paramétrer le script Finsweet Cookie Consent de votre projet Webflow

La dernière étape de ce tutoriel consiste à retourner sur votre projet Webflow et à accéder au "custom code" de votre projet (l'endroit où vous avez intégré le script Finsweet Cookie Consent).

Modifiez ce script en ajoutant fs-cc-endpoint="[URL endpoint Cloudflare]" à l'intérieur, en remplaçant [URL endpoint Cloudflare] par l'URL que vous avez préalablement copiée.

Publiez votre projet Webflow, et c'est tout ! Vous disposez maintenant d'un mécanisme qui récupère les consentements des cookies des utilisateurs de votre site.

Retrouver les consentements des cookies de mon site Webflow dans Cloudflare

Maintenant que tout est configuré, voyons comment accéder aux enregistrements liés aux consentements des cookies.

Pour ce faire, rendez-vous sur Cloudflare, puis dans l'onglet "KV".

Cliquez ensuite sur le bouton "view" pour accéder à l'ensemble des consentements soumis depuis votre site web.

Vous pouvez obtenir des informations détaillées sur chaque valeur en cliquant sur "view". Les points essentiels à retenir sont les suivants :

• "Allow" signifie que l'utilisateur a accepté tous les cookies.
• "Deny" signifie que l'utilisateur a rejeté tous les cookies.
• "Submit" signifie que l'utilisateur a modifié ses préférences de cookies (vous pouvez obtenir des détails sur les cookies acceptés dans les informations).

Conclusion

Félicitations, vous êtes désormais prêt à assurer la conformité RGPD de votre site web en stockant les consentements de cookies grâce à Finsweet Cookie Consent et Cloudflare. Pour une exploration approfondie, nous vous recommandons de consulter la documentation complète de Finsweet Cookie Consent. Vous y trouverez notamment des détails si vous envisagez d'utiliser votre propre API endpoint à la place de Cloudflare pour stocker ces consentements.

En vous dotant de ces outils puissants, vous renforcez non seulement la protection des données de vos utilisateurs, mais vous établissez également une confiance solide avec votre audience. N'oubliez pas de rester informé des évolutions législatives et des bonnes pratiques pour maintenir une conformité continue.

Si vous utilisez Axeptio, apprenez à traduire vos bandeau selon la langue de votre page