Badge Webflow Award Winner 2023

Manage Webflow Cookie Consent - Finsweet X Cloudflare

Published on 
19/1/2024
-
Amended on 
29/8/2024
Reading time: 5 min
Webflow Cookie Consents Storage Webflow Finsweet and Cloudflare
Written by
Photo of Thibaut Legrand wearing a black t-shirt Digidop

Thibaut Legrand

Webflow Developer & SEO

Transform your website into a model of RGPD compliance with Finsweet Cookie Consent and Cloudflare, offering a seamless and secure user experience.

Key points to remember

When you own a website, depending on the information you collect and your location, you need to comply with various regulations. One of the best-known regulations concerns data protection for users in the European Union: the RGPD.

In this article, we'll explore one of the essential rules for being RGPD compliant: storing cookie consents. We'll look at how, on our Webflow site, it's possible to store cookies using Finsweet Cookies Consents and Cloudflare completely free of charge to comply with the current standards.

RGPD, Cookies, Storage and Website Compliance?

General rule

If you are a business or other entity based in the European Union (EU) and own a website, you must comply with the GDPR(General Data Protection Regulation). This requirement also applies to companies or entities based outside the EU, but collecting data on users residing in the European Union.

The RGPD imposes numerous rules to preserve and guarantee users' personal information. If you manage a website and have to comply with the RGPD, you'll inevitably find yourself faced with the issue of making your website's cookies compliant.

Definition - Cookies : small text files that websites store on your browser to remember your preferences and offer you a more personalized online experience.

These cookies represent information, data collected by websites about you. Under the RGPD, they must be protected and stored. But why store cookie consents? It's much more than ticking boxes to comply with the law. Here's why it's crucial, in a few key points:

  • Respect for privacy: storing consents means you respect your users' private space, a bit like knocking on the door before entering.
  • Building trust: Users want to be sure that their data is in safe hands. By storing consent, you establish a relationship of trust.
  • Avoid legal trouble: Poor data management can lead to legal problems. Properly storing consents means avoiding legal trouble - a legal shield for your site.
  • Anonymizing IP addresses: Let's not forget IP addresses. By anonymizing them, you strengthen data protection, a bit like scrambling the map to protect the treasure.

New 2024 regulations

Since March 2024, regulations have changed for managing cookie consents with Google tools. If you use solutions such as Google Analytics or Google Ads, you'll need to use a cookie management solution compatible with Google Consent Mode V2.

Guide to Google Consent Mode V2

How do I store consent for cookies on my Webflow site?

1 - Requirements for storing cookie consent data

Before getting down to the nitty-gritty, there are a few things you'll need to consider in advance:

2 - Creating a Cloudflare account

If you're new to Cloudflare, let's find out how to create an account quickly.

Tool - Cloudflare: Cloudflare is a cloud services platform offering solutions for security, performance and content distribution, helping to improve the availability and protection of websites.

To get started, go to the Cloudflare registration page. In the "Developer platform" tab, select the"Workers: free offer".

Free Workers Plan Cloudflare

Next, you'll be taken to a page where you can create your account by providing an e-mail address and password.

Cloudflare account verification

Once you've created your account, be sure to verify it according to the instructions provided.

Cloudflare account verification

3 - Configuring data logging - Technical part

3.1 - Creating a Cloudflare Worker

Once your Cloudflare account has been validated, go to the"Workers & Pages" section and create a new"Worker" by clicking on"Overview" then"Create Worker".

Definition - Worker: a small program that runs directly on Cloudflare servers, allowing custom features to be added to websites without having to modify the original server code.
Workers Cloudflare overview

After clicking on the button to create the Worker, give it a name, preferably an explicit one. Then, further down the page, click on"Deploy" to deploy the newly created Worker.

Cloudflare Worker creation

3.2 - Creating a namespace for KV Cloudflare

Once the Worker has been created, access the"KV" tab (still in the "Workers & Pages" submenu).

Definition - KV (Key-Value store): short for key-value store, this is a database that stores information in pairs (key-value, where a key is associated with a value), offering a fast and efficient way of storing and retrieving data. It is often used with Cloudflare Workers to manage information dynamically.

On the KV page, create anamespace by clicking on"Create a namespace". Assign a name to your namespace, then click on"Add".

Definition - Namespace: a storage space dedicated to a specific set of data within Cloudflare's Key-Value (KV) database. It allows data to be organized and structured separately, providing better management and isolation of the information stored in the KV store.
Creating a Cloudflare namespace / KV

Your namespace has now been successfully created.

KV Cloudflare Created

3.3 - Modifying your Worker with the Finsweet Cookie Consents Script

Now return to the"Overview" section to locate your"Worker". Click on it to access editing.

Cloudflare workers overview

In the Worker editing interface, locate the"Quick edit" button in the top right-hand corner and click on it.

Edition worker cloudflare

Once in the code section, delete the existing code.

Default script Worker

Then paste the code from the Finsweet Cookie Consents script:


!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})}}]);

Finally, click on the "Save and deploy" button in the top right-hand corner.

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

3.4 - Linking the "Worker" to the "KV

After saving and deploying the Worker, return to the Worker editing interface.

Now go to the"Settings" section, then"Variables".

Cloudflare Worker Settings Variables

Moving down a little, look for the section entitled"KV Namespace Bindings".

Linking KV namespace and a Cloudflare worker

Click on the"Add binding" button. Please note that :

  • For variable names, use"CONSENTS" in uppercase.
  • For "KV", select the "KV" you created earlier.
Edit Variables to link the worker with the correct KV for cookies

Finally, click on"Save and deploy"!

KV and Worker well linked in Cloudflare with Cookie Consent from Finsweet

3.5 - Recovering your Worker's Endpoint URL

When you're in your Worker editor, at the very top of the page, look for a preview link. This is your endpoint URL.

Definition - Endpoint: a specific URL or single access point in an API (Application Programming Interface) or web service. It represents the destination where requests can be sent to interact with an application or access specific functionality. Endpoints are defined to perform operations such as retrieving, modifying, adding or deleting data from a resource via the API. In short, an endpoint is a specific address enabling applications or services to communicate with each other via HTTP or similar protocols.
Link to preview cloudflare worker endpoint URL

In this step, you will :

  1. Open the endpoint URL in a new tab (IMPORTANT).
  2. Copy the endpoint URL from the new tab.
Retrieve the endpoint URL of the worker cookie consent

3.6 - Setting up the Finsweet Cookie Consent script in your Webflow project

The last step in this tutorial is to return to your Webflow project and access your project's"custom code"(the place where you integrated the Finsweet Cookie Consent script).

Finsweet Cookie Consent Script in Webflow

Modify this script by adding fs-cc-endpoint="[URL endpoint Cloudflare]" inside, replacing [URL endpoint Cloudflare] with the URL you previously copied.

Finsweet Cookie Consent Script in Webflow with endpoint URL Cloudflare

Publish your Webflow project, and that's it! You now have a mechanism that retrieves cookie consents from your site's users.

Retrieve my Webflow site's cookie consents in Cloudflare

Now that everything's set up, let's see how to access cookie consent records.

To do this, go to Cloudflare, then to the "KV" tab.

All KV Cloudflar

Then click on the"view" button to access all the consents submitted from your website.

List of cookie consents submitted from the Webflow site to a KV Cloud

You can obtain detailed information on each value by clicking on "view". The key points to remember are as follows:

  • "Allow" means that the user has accepted all cookies.
  • "Deny" means that the user has rejected all cookies.
  • "Submit" means that the user has changed their cookie preferences (you can find details of accepted cookies in the information).
Information from a KV key value in Cloudflare about a modified cookie consent

Conclusion

Congratulations, you're now ready to ensure your website's RGPD compliance by storing cookie consents thanks to Finsweet Cookie Consent and Cloudflare. For an in-depth exploration, we recommend you consult the full Finsweet Cookie Consent documentation. In particular, you'll find details if you plan to use your own endpoint API instead of Cloudflare to store these consents.

By equipping yourself with these powerful tools, you not only strengthen the protection of your users' data, but also build solid trust with your audience. Don't forget to keep abreast of legislative developments and best practices to maintain ongoing compliance.

If you use Axeptio, learn how to translate your banners according to the language of your page.

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop