Fully Custom & Compliant Consent Mode Cookie Banner

The Challenge

The client had been through three different cookie consent platforms in eighteen months. The first (a free Shopify app) was not compliant at all — it displayed a banner but did not actually prevent any scripts from firing. The second (CookieBot) was compliant but caused significant performance issues, adding 340ms to page load time and intermittently failing to load on mobile Safari, which left tags in an indeterminate state. The third (a newer CMP) broke their Google Ads conversion tracking entirely because it miscategorised the Google tag as “analytics” rather than “advertising.”

Beyond the technical failures, every off-the-shelf CMP they tried required compromises. None of them supported Google Consent Mode V2 correctly out of the box — specifically, the distinction between ad_storage, analytics_storage, ad_user_data, and ad_personalisation was either conflated or missing. And customising the appearance to match the site’s design system required fighting against the CMP’s own CSS, resulting in a banner that looked like it belonged to a different website.

The client needed a consent solution that was genuinely compliant, properly integrated with Consent Mode V2, performant, and visually consistent with their brand.

Our Approach

We built the cookie banner from scratch as a standalone JavaScript module — no dependencies, no framework, under 8KB gzipped. It initialises synchronously before any other scripts, setting default consent states via the Google consent API (gtag('consent', 'default', {...})) so that Google’s tags know the consent posture from the very first event.

The banner manages four distinct consent categories mapped directly to Google’s Consent Mode V2 signals: strictly necessary (always on), analytics (analytics_storage), advertising (ad_storage and ad_user_data), and personalisation (ad_personalisation). Each category has a clear, jargon-free description written by the client’s legal team, and users can toggle each independently.

Consent state is stored in a first-party cookie with a 365-day expiry, and the banner checks this cookie on every page load to determine whether to show the prompt or silently apply saved preferences. When preferences change, the module fires gtag('consent', 'update', {...}) calls and dispatches a custom event that other scripts listen for — this is how we coordinate with GTM tags, third-party widgets, and the analytics layer.

We also built a consent audit log. Every consent interaction (accept all, reject all, or custom selection) is written to a lightweight endpoint that stores the timestamp, consent state, user agent, and page URL. This gives the client a defensible record if they ever face a regulatory enquiry.

The Results

Page load performance improved measurably. The custom banner adds 12ms to page load versus the 340ms their previous CMP imposed — a 96% reduction. Time to interactive improved by 0.4 seconds on mobile, which had a knock-on positive effect on Core Web Vitals scores.

Google Ads conversion tracking now works correctly in all consent states. When users grant advertising consent, conversions are tracked with full attribution. When they decline, Google’s consent-aware modelling kicks in, and the client still receives modelled conversion data rather than a complete blackout. Their reported conversion volume increased by 16% simply because the tracking was no longer being broken by CMP misconfiguration.

The consent audit log has already proved its worth. When a competitor filed a spurious GDPR complaint, the client was able to produce timestamped consent records for the specific visitor in question, and the complaint was dismissed within a week.