cookie consent for Lovable
Lovable builds the app and the tracking you asked for, and adds no consent step. Ask it for a banner and you get a box that shows a choice and blocks nothing. This page fixes both in ten minutes.
the rule
A default Lovable project sets analytics and marketing cookies as soon as those scripts are added. That is the exact behaviour European regulators have been fining, and the legal duty sits with you, the operator, not with the tool that generated the code.
The rule is the same everywhere in the EU and the UK: nothing beyond what is strictly necessary may be stored on or read from a visitor’s device before they have agreed. That is Article 5(3) of the ePrivacy Directive, and the agreement has to meet the GDPR’s definition of consent: freely given, specific, informed and unambiguous, with a refusal that is as easy as the acceptance. The UK keeps the same rule in PECR, with narrow exemptions for low-risk statistics since 5 February 2026. California and the other US state laws work the other way round: no opt-in, but an opt-out link and support for the Global Privacy Control signal.
Three things follow for a website. Analytics, advertising and social scripts have to wait for a choice. The choice has to be recorded in a way you can show later, because Article 7(1) puts the burden of proof on you. And withdrawing has to be as easy as agreeing, which means a control that reopens the banner on every page. A banner that shows two buttons and loads Google Analytics anyway fails the first test, and that is the failure regulators have been fining, from the CNIL’s decisions against Google and SHEIN to the Dutch and Belgian authorities’ sweeps.
how it works
Lovable generates a React app on Vite with Tailwind and shadcn/ui, usually with Supabase behind it, and publishes it on a lovable.app subdomain or your own custom domain. The consent runtime belongs in the one file every Vite app has: index.html, first in the head. Lovable edits that file when you ask it to, and it keeps the change across later prompts.
What Lovable will not do on its own is block anything. If you ask for “a cookie banner”, the model writes a component that shows two buttons and stores a boolean, while the Google Analytics or Meta Pixel snippet it added earlier keeps running on every page load. That is worse than no banner: it looks compliant and is not. The prompt below does the two things that matter, in the right order: the runtime first, then every tracker turned into a consent-gated script.
After that, the scanner takes over. It loads your published app in a real browser, in each consent state, and lists what still fires before consent, if anything. Because Lovable apps are single-page, the scan follows the client-side routes it can discover from the rendered DOM; add start URLs in the dashboard for routes it cannot reach from the home page. The consent log records every choice from the moment the banner is live.
set-up
Ten minutes, one prompt, no npm.
Sign up, add the domain your app is published on, and copy the production key from Install. The free plan covers two domains.
It puts the tag first and turns every tracker into a consent-gated script. Read the diff it makes; nothing else should change.
Add this script tag as the very first element inside <head> of index.html:
<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
data-cc-site="pk_live_…"
data-cc-env="production"></script>
Then change every analytics, advertising and social script (Google Analytics, gtag, Meta Pixel, TikTok, Hotjar, HubSpot) to type="text/plain" and add data-cc-category="analytics" or data-cc-category="marketing" to each one. Do not change anything else.Publish the app. In the dashboard, run the first scan: it loads the live app in a real browser and lists what still fires before consent, if anything.
File each vendor under a category, set your imprint and privacy links, publish. The banner is live and the consent log is recording.
It loads your page like a visitor and confirms the banner ran before any tracker. That tick is the proof.
Lovable projects with Google Ads or GA4 get the Consent Mode defaults from the runtime before those tags load, so the measurement keeps working for the visitors who say yes.
Google Consent Mode v2 is the signalling layer between the banner and Google’s tags. Before any tag runs, seven signals (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) are set to denied for visitors in the EEA, the UK and Switzerland. The moment someone chooses, the runtime updates them and Google’s tags adjust. Since 15 June 2026, Google uses ad_storage as the controlling signal for Ads data, so getting the default right matters more than it used to.
CookieCrumbs sets the defaults synchronously, ahead of any tag manager, updates them on every decision, and ships a Google Tag Manager template so the consent triggers exist without hand-written listeners. In advanced mode, Google’s cookieless pings keep modelled conversions working for the visitors who said no. What it does not do is pretend to be a Google-certified CMP: for AdSense, Ad Manager or AdMob in the EEA you still need one with IAB TCF, and CookieCrumbs is not that today.
watch out
Each one shows up in the first scan as a tracker that fired before consent.
before you ship
Eight lines. The dashboard ticks the last two from real data.
type="text/plain" with a category, or the host is in the block map from the scan.what you get
Two domains, 100 subpages scanned a month per domain, every regulation, the CLI, the SDKs and the MCP server.
Every page, in each consent state, in a real browser. Cookies, pixels, iframes and storage keys, with the page and script that set them. Re-scanned on a schedule.
The cookie declaration writes itself from the result.
Tags stay inert until their category is granted. Reject all is as visible as Accept all. Seven layouts, 25 languages, Consent Mode v2, and the right rule per region.
21 kB, one file, no third-party requests of its own.
Each choice is stored with a timestamp, the banner version and a hash of the texts shown, chained to the record before it. Exports are signed. Hosted in Frankfurt.
Article 7(1), on the free plan.
free check
The homepage HTML, matched against the tracker database. No account, nothing stored. The full scan in the dashboard does the same for every page, in a real browser.
questions
next step
Free plan, two domains, no card. Scan the live app first if you want to see what it loads today.