01 — Client
About the project
The consent banner is the only thing a visitor sees before the content. If it weighs more than the page itself and sets cookies before the click, it breaks both speed and the law.
02 — Context
The task
The site needs the Meta pixel to advertise the books. Under German practice the pixel may load only after explicit consent. Off-the-shelf banner plugins often do the opposite: they put the script in the head and then “block” it, while the cookies still manage to appear.
The second requirement is weight. Ready-made solutions pull in dozens of kilobytes of styles and scripts, separate requests and telemetry. On a site whose entire theme weighs seven kilobytes, the banner must not be the heaviest element on the page.
Third: the author runs the site herself. Settings are needed, a visual builder is not.
03 — Solution
How it works
3.1
Nothing before the choice
Service scripts are printed into the page as text/plain with a category label and come alive only after consent for that category. Iframes get their address on the same principle. Even the cookie holding the decision itself appears only after the click. The language switcher’s cookie is disabled at plugin level: the language lives in the page URL.
3.2
Three kilobytes, zero requests
One inline style and one inline script in the footer, with no separate files, dependencies or jQuery. Styles and script together: 3.2 KB gzipped. The banner is fixed at the bottom of the screen and does not shift content, so CLS is unaffected.
3.3
In line with DSK practice
First layer: “Decline” and “Accept” of the same size, below them “Customise” and a link to the Datenschutzerklärung. No close cross: closing the banner means making a choice. Nothing is pre-ticked in the settings. The decision is stored for 182 days, for consent and refusal alike; when the set of services changes, the question is asked again.
3.4
Withdrawal and proof
A “Cookie-Einstellungen” link in the footer opens the settings at any time. When marketing is switched off, the pixel’s cookies are deleted and the page reloads. The decision cookie stores the config version, the time, a random consent identifier and the chosen categories.
3.5
Accessibility
The dialog is announced to screen readers, focus moves to the banner when it appears, Tab reaches every button, Esc does not close it. Buttons are at least 44 pixels on a phone, and animation is off under prefers-reduced-motion.
3.6
For the next sites
Categories and services are configuration with filters, not hard-coded. A public JS API and a document event let the theme or another plugin ask what has been consented to. Strings are translated into four languages. The plugin is not tied to the theme and will move on to the studio’s next sites.
04 — Outcome
Result
In a clean browser profile before the click: zero cookies from the site, zero external requests. After “Necessary only”, the pixel does not load, even after a reload. After “Accept”, the pixel loads, and withdrawal via the footer switches it off again.
LCP and CLS did not change after installation. The Datenschutzerklärung describes exactly what the banner really does.