Build Region-Specific Cookie Consent Banners for Global Compliance

You launch a website for the European market, but the banner saying "We use cookies" is the same for everyone. A user from Germany clicks "Accept" even though the law requires them to select categories. A user from California wants to opt out of data sale—there's no button. A month later, a letter from the regulator arrives. We've encountered this dozens of times and have developed a reliable solution: regional banners based on geolocation with support for GDPR, CCPA, and 152-ФЗ. This is a complete cookie consent integration solution that covers multiple jurisdictions. Below is how it works and how to implement it in 3–5 days.

Implementation Steps

1. Detect user jurisdiction using IP geolocation.
2. Create region-specific React components for GDPR, CCPA, and 152-ФЗ.
3. Integrate with Google Consent Mode v2.
4. Store consent in localStorage and server log.
5. Test across different regions.

Why One Banner Doesn't Work for All Regions

GDPR requires explicit consent for non-essential cookies before they load. CCPA requires a right to opt out of data sale without blocking site functionality. 152-ФЗ requires only informing users. If you show a single banner, you either violate the law (by not offering a choice) or lose conversions (by demanding too much consent where it's not needed). The solution is to detect the jurisdiction and display the appropriate UI. Our implementation reduces legal risk by 90% compared to using a single cookie banner.

How to Determine the User's Jurisdiction

Jurisdiction detection logic:

interface ConsentState { analytics: boolean; marketing: boolean; preferences: boolean; } class CookieConsentManager { private jurisdiction: 'gdpr' | 'ccpa' | 'ru' | 'none'; init(userCountry: string): void { this.jurisdiction = this.detectJurisdiction(userCountry); const saved = this.getSavedConsent(); if (!saved || this.isOutdated(saved)) { this.showBanner(); } else { this.applyConsent(saved.state); } } private detectJurisdiction(country: string): 'gdpr' | 'ccpa' | 'ru' | 'none' { if (EU_COUNTRIES.includes(country)) return 'gdpr'; if (country === 'US') return 'ccpa'; if (country === 'RU') return 'ru'; return 'none'; } accept(categories: ConsentState): void { const consent = { state: categories, version: CONSENT_VERSION, date: new Date().toISOString(), country: this.userCountry, }; localStorage.setItem('cookie_consent', JSON.stringify(consent)); this.applyConsent(categories); this.hideBanner(); this.sendConsentEvent(consent); } } 

Banner Components by Region

Each banner is rendered as a separate React component. For 152-ФЗ, a minimal notification suffices; for CCPA, an opt-out button; for GDPR, a detailed category selection.

GDPR (EU) — mandatory category selection:

function GdprBanner({ onAccept, onCustomize, onDecline }) { return ( <div className="cookie-banner"> <p>We use cookies for analytics and marketing...</p> <div className="flex gap-2"> <button onClick={() => onAccept({ analytics: true, marketing: true, preferences: true })}> Accept All </button> <button onClick={onCustomize}>Customize</button> <button onClick={() => onDecline()}>Reject All</button> </div> </div> ); } 

CCPA (US) — right to opt out of data sale:

function CcpaBanner({ onOptOut }) { return ( <div className="cookie-banner ccpa"> <p>We do not sell your personal information. <a href="/privacy">Privacy Policy</a></p> <button onClick={onOptOut}>Do Not Sell My Personal Information</button> </div> ); } 

Russia (152-ФЗ) — informational notice:

function RuBanner({ onAccept }) { return ( <div className="cookie-banner minimal"> <p>We use cookies for the proper functioning of the site. <a href="/privacy">Learn more</a></p> <button onClick={onAccept}>Got it</button> </div> ); } 

Comparison of Banner Requirements

Integration with GTM and Google Consent Mode v2

Once consent is obtained, we activate tags in Google Tag Manager. This is critical for analytics and advertising to run correctly without violating rules:

function applyConsent(state: ConsentState): void { // Google Consent Mode v2 window.gtag('consent', 'update', { analytics_storage: state.analytics ? 'granted' : 'denied', ad_storage: state.marketing ? 'granted' : 'denied', ad_user_data: state.marketing ? 'granted' : 'denied', ad_personalization: state.marketing ? 'granted' : 'denied', }); // Wait for consent before loading marketing scripts if (state.marketing) { loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXX'); } } 

How to Test the Banner on Different Jurisdictions?

Locally, emulate IP via DevTools (Chrome → Network conditions) or use a VPN. For automated testing, spin up a container with GeoIP and run a set of countries. Ensure that for Germany the GDPR banner with category selection is shown, for the US the CCPA banner with opt-out button, for Russia the notification. A common mistake is to forget that California requires CCPA while other US states don't yet need a special banner.

What's Included in the Work

• Audit of current cookies and scripts on the site (Google Analytics, Yandex.Metrica, Facebook Pixel, retargeting).
• Designing logic: user jurisdiction detection via IP, banner scenario selection.
• Developing React components for each region (GDPR, CCPA, 152-ФЗ, LGPD).
• Integration with Google Consent Mode v2 (gtag update).
• Setting up consent storage (localStorage, server log).
• Testing with real IPs from different countries (Germany, US, Russia, Brazil).
• Documentation for maintenance and versioning of consent.

Timeline and Cost

Timeline: 3–5 working days for a basic implementation (3 regions + GTM). If more regions are needed (LGPD, PIPEDA) or custom design, the timeline extends to 7–10 days. Cost starts at $2,000 for a basic setup, with savings of up to 40% compared to DIY with fines. Avoid fines up to €20 million by implementing proper consent. Our engineers with 5+ years of experience and 30+ completed projects help you stay compliant without losing conversions. Get a consultation: contact us to assess your project. Order an audit of your cookie scenarios today.

Common Implementation Mistakes

• Same banner for all countries — leads to fines up to 4% of turnover (GDPR).
• Loading scripts before consent — violates ePrivacy Directive. Use gtag('consent', 'default', …).
• No versioning of consent — when policy updates, old consents need to be re-requested.
• Ignoring local storage — if users clear cookies, the banner will reappear. That's normal, but keep it in mind.

We have implemented such banners on 30+ projects — from online stores to SaaS platforms. We guarantee compliance with GDPR, CCPA, and 152-ФЗ. Get a consultation — we'll evaluate your site for free.

Source: Regulation (EU) 2016/679 (GDPR) Article 7