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

Transformez votre site Web en un modèle de conformité RGPD avec Finsweet Cookie Consent et Cloudflare, offrant une expérience utilisateur transparente et sécurisée.

Publié le 
19/1/2024
Modifié le 
19/1/2024
5 min
Webflow Cookie Consents Stockage Webflow Finsweet et 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 ?

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.

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 :

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".

Plan Workers Gratuit Cloudflare

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.

Vérification Compte Cloudflare

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

Vérification Compte Cloudflare

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.
Workers Vue d'ensemble Cloudflare

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éé.

Création Worker Cloudflare

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.
Création d'un namespace / KV Cloudflare

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

KV Cloudflare Créé

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.

Overview des workers Cloudflare

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

Édition worker cloudflare

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

Script par défaut Worker

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"

script finsweet cookie consents pour worker cloudflare
Save and deploy worker Cloudflare

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".

Cloudflare Worker Settings Variables

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

Lier KV namespace et un worker Cloudflare

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.
Édition des Variables pour lier le worker avec le bon KV pour les cookies

Enfin, cliquez sur "Save and deploy" !

KV et Worker bien lié dans Cloudflare avec Cookie Consent de Finsweet

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.
Lien pour prévisualiser l'endpoint URL du worker cloudflare

Dans cette étape, vous devrez :

  1. Ouvrir l'URL endpoint dans un nouvel onglet (IMPORTANT).
  2. Copier l'URL endpoint à partir du nouvel onglet.
Récuperer l'URL endpoint du worker cookie consent

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).

Finsweet Cookie Consent Script dans Webflow

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.

Finsweet Cookie Consent Script dans Webflow avec endpoint URL Cloudflare

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".

Tous les KV Cloudflar

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

Liste des consentements de cookies soumis depuis le site Webflow dans un KV Cloud

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).
Informations d'une valeur d'une clé d'un KV dans Cloudflare à propos d'un consentement de cookies qui a été modifié

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

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !