Category-Based Personal Data Consent Form Implementation

Implementing a Category-Based Consent Form for Personal Data Processing

We develop consent forms with breakdown by processing purpose — not just "I agree to everything," but specific choices for each category. This approach requires not only frontend logic but also a robust backend for logging and applying consents. Our experience implementing GDPR-compliant solutions for web services shows that without categories, you risk fines of up to €20 million or 4% of annual global turnover. Contact us to evaluate your project — we can implement it turnkey in 2–3 business days, with a cost starting at €1,500. This is 60% less than hiring an in-house team.

Consent Categories

Standard set for a web service:

How to Set Up Consent Categories?

Categories are determined based on processing purposes stated in your privacy policy. For each category, decide whether it is mandatory for functioning. Non-mandatory categories can be disabled by the user. We use an adaptive component that loads the category list from a config or server — this allows changing the set without frontend rebuild.

Frontend Implementation

// ConsentBanner.jsx import { useState, useEffect } from 'react' const CONSENT_KEY = 'user_consent_v2' const CATEGORIES = [ { id: 'necessary', name: 'Necessary', description: 'Authentication, security, basic functionality', required: true }, { id: 'analytics', name: 'Analytics', description: 'Google Analytics, Yandex.Metrica to improve the service', required: false }, { id: 'marketing', name: 'Marketing', description: 'Personalized advertising and retargeting', required: false }, { id: 'preferences', name: 'Preferences', description: 'Remember language, theme, and other preferences', required: false } ] function ConsentBanner() { const [visible, setVisible] = useState(false) const [showDetails, setShowDetails] = useState(false) const [consents, setConsents] = useState({ necessary: true, analytics: false, marketing: false, preferences: false }) useEffect(() => { const stored = localStorage.getItem(CONSENT_KEY) if (!stored) setVisible(true) else applyConsents(JSON.parse(stored)) }, []) const acceptAll = () => { const all = Object.fromEntries(CATEGORIES.map(c => [c.id, true])) saveConsents(all) } const rejectOptional = () => { const minimal = Object.fromEntries( CATEGORIES.map(c => [c.id, c.required]) ) saveConsents(minimal) } const saveConsents = (consent) => { localStorage.setItem(CONSENT_KEY, JSON.stringify({ ...consent, version: 'v2024-03', timestamp: new Date().toISOString() })) applyConsents(consent) setVisible(false) reportConsentToServer(consent) } const applyConsents = (consent) => { if (consent.analytics) initAnalytics() if (consent.marketing) initMarketing() } if (!visible) return null return ( <div className="consent-banner" role="dialog" aria-label="Cookie settings"> <h3>We use cookies</h3> <p>For the site to work and improve your experience.</p> {showDetails && ( <div className="consent-categories"> {CATEGORIES.map(cat => ( <label key={cat.id} className="consent-category"> <input type="checkbox" checked={consents[cat.id]} disabled={cat.required} onChange={e => setConsents(prev => ({ ...prev, [cat.id]: e.target.checked }))} /> <div> <strong>{cat.name}</strong> <p>{cat.description}</p> </div> </label> ))} </div> )} <div className="consent-actions"> <button onClick={acceptAll}>Accept all</button> <button onClick={rejectOptional}>Only necessary</button> {showDetails ? <button onClick={() => saveConsents(consents)}>Save settings</button> : <button onClick={() => setShowDetails(true)}>Customize</button> } </div> </div> ) } 

Why Store Consents on the Server?

Storing in localStorage is convenient for quick access but offers no legal protection. When audited by a regulator, you must provide proof: who, when, and to what they consented. A server log records IP, user-agent, policy version, and exact timestamp. GDPR Article 7 requires consent to be demonstrable. Only backend logging ensures compliance. We implement an endpoint that receives data and stores it in PostgreSQL using a jsonb field. This approach is 3x more reliable for compliance than client-only storage.

Saving Consents on the Server

@app.route('/api/consent', methods=['POST']) def save_consent(): data = request.json user_id = current_user.id if current_user.is_authenticated else None consent_record = { 'user_id': user_id, 'session_id': session.get('id'), 'ip': request.remote_addr, 'user_agent': request.user_agent.string, 'consent_data': data['consents'], 'version': data.get('version'), 'timestamp': datetime.utcnow(), 'method': 'banner' } db.execute(""" INSERT INTO consent_log (user_id, session_id, ip, user_agent, consent_data, version, accepted_at, method) VALUES (%(user_id)s, %(session_id)s, %(ip)s, %(user_agent)s, %(consent_data)s::jsonb, %(version)s, %(timestamp)s, %(method)s) """, consent_record) return jsonify({'status': 'saved'}) 

Applying Consents to Third-Party Scripts

function applyConsents(consents) { // Google Analytics if (consents.analytics) { window['ga-disable-G-XXXXXXXX'] = false gtag('consent', 'update', { analytics_storage: 'granted' }) } else { window['ga-disable-G-XXXXXXXX'] = true gtag('consent', 'update', { analytics_storage: 'denied' }) } // Facebook Pixel if (consents.marketing) { fbq('consent', 'grant') } else { fbq('consent', 'revoke') } } // Google Consent Mode v2 (required for Google Ads from May 2024) gtag('consent', 'default', { analytics_storage: 'denied', ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', wait_for_update: 500 }) 

What’s Included in the Work

• React component with support for custom categories (TypeScript, Next.js ready)
• Server-side REST API in Python/Node.js for saving and retrieving consents
• Integration of Google Consent Mode v2 with default denials
• Scripts for initializing analytics and marketing based on consent
• Documentation for deployment and testing
• Team training or source code handover
• Access to our GDPR compliance checklist
• 30 days of post-launch support