Zgoda na cookies dla React,
jeden tag i jeden komponent

Aplikacja React typu SPA ładuje analitykę w main.tsx, zanim istnieje jakikolwiek interfejs. Komponent banera dodany później pokazuje wybór, ale nie może cofnąć tego, co już się wykonało.

Zasada jest taka sama w całej UE i w Wielkiej Brytanii: bez zgody nie wolno zapisywać na urządzeniu odwiedzającego ani odczytywać z niego niczego poza tym, co ściśle niezbędne. To artykuł 5 ust. 3 dyrektywy ePrivacy, a zgoda musi spełniać definicję z RODO: dobrowolna, konkretna, świadoma i jednoznaczna, z odmową równie łatwą jak akceptacja. Wielka Brytania utrzymuje tę samą zasadę w PECR, z wąskimi wyjątkami dla statystyk niskiego ryzyka od 5 lutego 2026 r. Kalifornia i inne prawa stanowe USA działają odwrotnie: bez opt-in, ale z linkiem opt-out i obsługą sygnału Global Privacy Control.

Dla strony wynikają z tego trzy rzeczy. Skrypty analityczne, reklamowe i społecznościowe muszą poczekać na decyzję. Decyzję trzeba zapisać tak, aby dało się ją później pokazać, bo artykuł 7 ust. 1 przerzuca ciężar dowodu na Ciebie. A wycofanie zgody musi być równie łatwe jak jej udzielenie, co oznacza element na każdej stronie, który ponownie otwiera baner. Baner, który pokazuje dwa przyciski i mimo to ładuje Google Analytics, oblewa pierwszy test, i właśnie za to organy nadzoru nakładają kary, od decyzji CNIL wobec Google i SHEIN po kontrole organów holenderskiego i belgijskiego.

SPA w React ma jeden plik HTML i tam musi zaczynać się zgoda. Runtime trafia do index.html jako pierwszy skrypt w head, przed bundle’em Vite lub Webpacka. Instaluje swój interceptor synchronicznie, jeszcze przed pobraniem Twojej konfiguracji, więc wszystko, co bundle spróbuje później wstrzyknąć, zostaje przechwycone.

W drzewie masz dwa narzędzia. ConsentGate renderuje dzieci tylko wtedy, gdy kategoria jest przyznana, a w przeciwnym razie pokazuje Twój fallback, co jest właściwym sposobem montowania widżetu czatu, osadzonego wideo lub providera analityki. API runtime na window, opakowane przez @cookiecrumbs/react w hook, mówi każdemu komponentowi o aktualnym stanie, reżimie, języku i identyfikatorze zgody i daje mu open(), by ponownie otworzyć baner z linku w stopce.

Popularne wzorce React, na których ludzie się potykają: provider analityki na szczycie drzewa odpalający przy montowaniu, router wysyłający odsłony przy każdej nawigacji i useEffect wstrzykujący piksel. Każdy z nich albo trafia do gate’a, albo sprawdza isGranted("analytics"), zanim cokolwiek zrobi. Skan wdrożonej strony pokazuje, które z nich nadal odpalają przed zgodą, wraz ze skryptem, który to zrobił.

Aplikacje React z Google Ads zwykle dodają gtag.js w index.html. Zostaw go tam, poniżej runtime, a wartości domyślne Consent Mode są już „denied”, gdy się ładuje.

Google Consent Mode v2 to warstwa sygnałów między banerem a tagami Google. Zanim uruchomi się jakikolwiek tag, siedem sygnałów (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) jest ustawianych na „denied” dla odwiedzających z EOG, Wielkiej Brytanii i Szwajcarii. Gdy tylko ktoś dokona wyboru, runtime je aktualizuje, a tagi Google się dostosowują. Od 15 czerwca 2026 r. Google używa ad_storage jako sygnału decydującego o danych Ads, więc właściwa wartość domyślna liczy się bardziej niż kiedyś.

CookieCrumbs ustawia wartości domyślne synchronicznie, przed jakimkolwiek menedżerem tagów, aktualizuje je przy każdej decyzji i dostarcza szablon Google Tag Manager, dzięki czemu wyzwalacze zgody istnieją bez ręcznie pisanych listenerów. W trybie zaawansowanym bezcookie’owe pingi Google utrzymują modelowane konwersje dla odwiedzających, którzy odmówili. Czego nie robi: nie udaje CMP certyfikowanego przez Google. Do AdSense, Ad Managera lub AdMob w EOG nadal potrzebujesz takiego z IAB TCF, a CookieCrumbs dziś nim nie jest.