React Cookie Compliance Spain: Consent Implementation & Testing Guide

Introduction

*Updated for 2026 compliance practices.*

Website owners operating React applications in Spain face a unique compliance landscape shaped by the GDPR and the Spanish Data Protection Authority (AEPD) guidelines. This guide provides a practical, technical walkthrough for implementing and testing cookie consent in React, ensuring your site meets Spanish and EU requirements. We focus on actionable steps, verification with GDPRChecker, and common pitfalls—without legal advice.

Requirements and Compliance Expectations in Spain

Spain enforces GDPR through the AEPD, which has issued strict guidance on cookie use. Key requirements include:

**Prior consent**: Non-essential cookies (analytics, marketing, social media) must not be set or read before the user gives explicit consent. This is particularly challenging in React SPAs, where route changes can trigger new scripts.
**Granular consent**: Users must be able to accept or reject cookies by category. A "reject all" option must be as prominent as "accept all."
**Clear information**: A cookie banner must link to a detailed cookie policy explaining each cookie's purpose, duration, and third-party access.
**Consent proof**: You must be able to demonstrate when and how consent was obtained. GDPRChecker's consent records (on paid plans) can help.
**Regular reviews**: Consent mechanisms should be re-verified after any site update, especially in React where component changes can introduce new trackers.

For Google services like Analytics or Ads, Google Consent Mode v2 is now mandatory for EU users. It allows tags to adjust behavior based on consent state, sending cookieless pings when consent is denied. React implementations must integrate Consent Mode v2 via `gtag` or Google Tag Manager, ensuring the default consent state is set to 'denied' before any tags fire.

How to Implement Step by Step in React

Implementing cookie consent in React requires careful handling of the consent lifecycle. Below is a step-by-step approach.

1. Choose a Consent Management Platform (CMP) or Build a Custom Solution

You can use a third-party CMP that provides a React component, or build a custom consent banner. GDPRChecker offers a managed consent banner on paid plans, which can be embedded in React. If building custom, ensure:

The banner is the first interactive element and blocks all non-essential scripts.
Consent state is stored (e.g., in a cookie or localStorage) and respected across page navigations.
The banner reappears if consent state is missing or expired.

2. Set Default Consent State to Denied

Before any tags load, set the default consent state to 'denied'. With Google Consent Mode v2, this is done via:

```javascript window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', { 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'analytics_storage': 'denied' }); ```

Place this script in the `<head>` of your React app's `index.html`, or inject it early in the component lifecycle. This ensures no tags fire with full data collection until consent is given.

3. Build a Consent Banner Component

Create a React component that:

Displays a banner with accept/reject buttons and a link to the cookie policy.
On user action, updates the consent state and calls `gtag('consent', 'update', {...})` with the appropriate permissions.
Hides the banner and stores the choice.

Example consent update:

```javascript const handleAcceptAll = () => { gtag('consent', 'update', { 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted', 'analytics_storage': 'granted' }); // Store consent in localStorage localStorage.setItem('cookie_consent', 'granted'); setBannerVisible(false); }; ```

4. Conditionally Load Scripts Based on Consent

In React, you can dynamically load third-party scripts only after consent is granted. Use the `useEffect` hook to check consent state and inject scripts:

```javascript useEffect(() => { if (consentGiven) { const script = document.createElement('script'); script.src = 'https://example.com/tracker.js'; document.body.appendChild(script); } }, [consentGiven]); ```

For Google Tag Manager, ensure the GTM container respects Consent Mode. If using a custom CMP, you may need to push consent updates to the data layer.

5. Handle React Router Navigation

SPAs don't reload the page, so consent state must persist across route changes. Use React context or a state management library to make consent state globally available. Ensure that any new scripts injected on route change also check consent.

6. Implement a Reject Flow

A "reject all" button must be as easy to use as "accept all." When rejected, ensure all non-essential cookies are blocked and Consent Mode signals are set to 'denied'. Test that no tracking requests are sent.

7. Link to a Detailed Cookie Policy

Your banner must include a link to a privacy/cookie policy page that lists all cookies, their purposes, and third-party recipients. GDPRChecker's legal-page workflows (Growth plan) can help generate and maintain this.

Common Mistakes and How to Avoid Them

Many React sites fail compliance due to these pitfalls:

**Pre-consent network requests**: Scripts like Google Analytics or Facebook Pixel firing before consent. Always set default consent to denied and block script injection until consent.
**Banner not blocking cookies**: A banner that merely informs but doesn't prevent cookies is non-compliant. Use technical blocking (e.g., script delay, Consent Mode).
**Missing reject option**: A banner with only an "accept" button violates GDPR. Include a clear reject button.
**Consent not persistent**: In SPAs, consent state can be lost on navigation if not stored properly. Use localStorage or a cookie and rehydrate on app load.
**Ignoring Consent Mode v2**: Without it, Google tags may still set cookies even when consent is denied. Implement Consent Mode v2 and verify with GDPRChecker's Google Consent Mode v2 checker.
**Incomplete cookie disclosure**: Not listing all cookies in the policy. Use GDPRChecker's cookie scanner to inventory all cookies and trackers.

How to Validate with GDPRChecker

GDPRChecker provides a suite of tools to verify your React cookie compliance. Here's how to use them:

**Pre-consent scan**: Run a scan to see if any network requests are made before consent. GDPRChecker flags early requests to known tracking domains.
**Banner behavior check**: Verify that the consent banner appears correctly and that cookies are only set after user action.
**Consent Mode diagnostics**: Use the Google Consent Mode v2 checker to ensure default and update commands are correctly implemented.
**Cookie inventory**: Scan your site to get a complete list of cookies and trackers, including those set by third-party scripts.
**Policy link verification**: GDPRChecker checks that your banner links to a valid cookie policy.
**Post-change re-scan**: After any React update, re-scan to catch new trackers or broken consent flows.

For ongoing compliance, GDPRChecker's paid plans offer managed consent banners, runtime monitoring, and consent records—essential for demonstrating compliance to Spanish authorities.

Implementation Checklist

Use this checklist to ensure your React site meets Spanish cookie compliance:

Set default consent state to 'denied' for all Google consent types.
Implement a consent banner with accept and reject options, equally prominent.
Ensure the banner blocks all non-essential cookies and trackers before consent.
Link to a detailed cookie policy from the banner.
Store consent choice persistently (localStorage/cookie) and reapply on navigation.
Dynamically load third-party scripts only after consent is granted.
Implement Google Consent Mode v2 and verify with GDPRChecker.
Test reject flow: no tracking cookies or requests should be sent.
Run a GDPRChecker pre-consent scan to catch early network requests.
Inventory all cookies with GDPRChecker and update your policy.
Set a consent expiration and prompt for renewal periodically.
Document consent logs (available on GDPRChecker paid plans) for compliance evidence.

FAQ

What is React cookie compliance Spain cookie consent implementation and testing guide? It's a practical guide for website owners using React to implement cookie consent that meets Spanish and EU GDPR requirements. It covers technical steps like setting default consent to denied, building a consent banner, and testing with GDPRChecker to ensure no cookies fire before consent.

Do I need React cookie compliance Spain cookie consent implementation and testing guide for GDPR? Yes, if you operate a React website serving users in Spain, you must comply with the GDPR and AEPD guidelines. This guide helps you implement the necessary technical measures to obtain valid consent and avoid fines.

How do I implement React cookie compliance Spain cookie consent implementation and testing guide? Start by setting Google Consent Mode v2 defaults to denied, build a React consent banner that blocks scripts, conditionally load trackers after consent, and persist consent state across navigations. Then test with GDPRChecker.

How can I verify React cookie compliance Spain cookie consent implementation and testing guide with a scanner? Use GDPRChecker to scan your site for pre-consent network requests, verify banner behavior, check Consent Mode implementation, and inventory all cookies. Re-scan after any site changes to maintain compliance.

What are common React cookie compliance Spain cookie consent implementation and testing guide mistakes? Common mistakes include scripts firing before consent, missing reject button, consent state not persisting in SPAs, not implementing Consent Mode v2, and incomplete cookie disclosures. Use GDPRChecker to identify these issues.

Which cookies and trackers should I check for React cookie compliance Spain cookie consent implementation and testing guide? Check all non-essential cookies: analytics (e.g., Google Analytics), marketing (e.g., Facebook Pixel), and social media widgets. GDPRChecker's scanner will list all detected cookies and trackers on your site.

How often should I review React cookie compliance Spain cookie consent implementation and testing guide? Review after every significant site update, especially when adding new React components or third-party integrations. Also, periodically (e.g., quarterly) re-scan to catch any drift. Spanish authorities expect ongoing compliance.

What evidence should I keep for React cookie compliance Spain cookie consent implementation and testing guide? Keep records of consent logs showing when and how users consented. GDPRChecker's paid plans provide consent records. Also retain scan reports and policy versions to demonstrate your compliance efforts.

Next Steps: Close Your Compliance Gaps with GDPRChecker

Implementing cookie consent in React is just the first step. Continuous verification is critical. GDPRChecker helps you close the Consent Mode gap, the Google CMP gap, the Cookie Banner gap, the Privacy Policy gap, and the Cookie Scanner gap—all in one platform.

**Scan your React site now**: Run a free GDPRChecker scan to see what cookies and trackers are firing before consent.
**Explore related guides**: For broader compliance, see our [GDPR checklist for small businesses](/guides/gdpr-checklist-for-small-businesses) and [Google Analytics GDPR compliance guide](/guides/google-analytics-gdpr-compliance).
**Master Consent Mode**: Dive deeper with our [Google Consent Mode v2 guide](/guides/google-consent-mode-v2-guide) and understand the differences in [Consent Mode v2 vs Google Certified CMP](/guides/consent-mode-v2-vs-google-certified-cmp).
**Check your CMP needs**: If you're unsure, read [Do I need a CMP if I do not run Google Ads?](/guides/do-i-need-a-cmp-if-i-do-not-run-google-ads) and use our [Google Consent Mode v2 checker](/guides/google-consent-mode-v2-checker) to diagnose your setup.

Start your scan today and ensure your React site is fully compliant with Spanish cookie laws.

Next step

Run a GDPRChecker scan to validate consent behavior, trackers, and disclosures after you implement the checklist above.

Comparison: common implementation approaches

| Approach | Best for | Evidence to retain | Trade-off | | --- | --- | --- | --- | | A shared consent record | Smaller sites with one banner and a limited set of tags | Consent choice, timestamp, policy version, and affected pages | Requires a reliable process when the banner changes | | A tag-manager based record | Teams that control analytics and advertising tags centrally | Consent defaults, trigger conditions, publish history, and test results | Can miss scripts added outside the tag manager | | A CMP or external consent platform export | Sites with multiple domains, vendors, or regional workflows | Vendor configuration, consent events, retention settings, and audit exports | Adds provider configuration and recurring review work |

Choose the approach that matches the site's tracking complexity, then verify that the stored evidence can explain what a visitor saw and what tags were allowed at that time.

Practical examples

Example 1: A small ecommerce site

A shop changes its cookie banner wording before a seasonal campaign. The operator records the previous and new banner version, tests Reject all and Accept all, and stores screenshots plus the resulting network checks. That creates a clear before-and-after record without relying on memory.

Example 2: A B2B lead-generation site

A marketing team adds a form analytics tag through its tag manager. Before publishing, it documents the consent category, the tag trigger, the privacy notice update, and a test showing that the request does not fire after a visitor rejects optional cookies.

Example 3: A multi-page content site

An editor notices that a new embedded video adds a third-party request. The team scans the affected pages, compares the result with the last scan, updates the cookie disclosure if necessary, and keeps the scan report with the deployment reference.

> This guide is technical implementation guidance for website owners. It is not legal advice.

Article schema

```json { "@context": "https://schema.org", "@type": "Article", "headline": "React Cookie Compliance in Spain: Cookie Consent Implementation and Testing Guide", "description": "Practical guide for React cookie compliance in Spain. Step-by-step consent implementation, testing with GDPRChecker scanner, and avoiding common mistakes. Ensure GDPR compliance for your React site.", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.gdprchecker.online/guides/react-cookie-compliance-in-spain-cookie-consent-implementation-and-testing-guide" }, "publisher": { "@type": "Organization", "name": "GDPRChecker", "url": "https://www.gdprchecker.online" } } ```

Copyright and editorial notice

This original AI-assisted editorial draft was selected, reviewed, and published by GDPRChecker. All rights are reserved where protected by applicable law. Do not reproduce the article without permission.