React cookie consent: baner, który naprawdę blokuje skrypty
Baner zgody na cookies w React
React cookie consent: baner, który wstrzymuje skrypty | We.Inc
Zbuduj baner zgody na cookies w React: zapisz wybór, wczytuj analitykę dopiero po akceptacji, wysyłaj aktualizacje Consent Mode. Do tego propsy pakietu react-cookie-consent.
Przechowuj wybór odwiedzającego w stanie React, zapisz go w cookie własnej domeny lub w pamięci przeglądarki i renderuj skrypty analityczne lub reklamowe tylko wtedy, gdy odpowiednia kategoria ma zgodę. Wystarczy mały hook i jeden komponent banera. Jeśli wolisz gotowy pakiet, react-cookie-consent daje gotowy baner z propsami dla przycisków odmowy, nazwy cookie i czasu ważności.
Dwa sposoby na dodanie zgody do strony w React
Własna implementacja
Pakiet react-cookie-consent
Kategorie (analityka, reklamy)
Tak, dowolne, których potrzebujesz
Domyślnie jedna wartość: akceptacja lub odmowa
Przycisk odmowy
Tak
Domyślnie wyłączony; włącza go enableDeclineButton
Gdzie zapisywany jest wybór
Cookie lub pamięć przeglądarki, jak wolisz
Domyślnie cookie o nazwie CookieConsent
Domyślny czas ważności
Ustalasz go sam
365 dni
Licencja
Twój własny kod
MIT
Najtrudniejszą częścią banera zgody nie jest okienko na ekranie, tylko dopilnowanie, aby nic nieobowiązkowego nie uruchomiło się, zanim odwiedzający powie tak. W React to problem stanu: jedno źródło prawdy dla wyboru i komponenty, które sprawdzają je przed wstawieniem tagu script. Demo na żywo poniżej robi dokładnie to, więc zobaczysz, jak skrypt analityczny pozostaje wyłączony, dopóki nie zaakceptujesz.
Hook useConsent przy starcie aplikacji odczytuje zapisany wybór i udostępnia go razem z funkcjami do jego zmiany.
Baner renderuje się tylko wtedy, gdy nie ma zapisanego wyboru, i oferuje Akceptuj wszystkie, Odrzuć wszystkie oraz przełączniki kategorii, domyślnie wyłączone.
Loadery skryptów sprawdzają hook przed dodaniem tagu script, więc odmowa oznacza, że tag nigdy nie zostanie dodany.
Jeśli używasz tagów Google, ta sama funkcja wysyła aktualizację Consent Mode z kategoriami, na które jest zgoda.
Link Ustawienia cookies w dowolnym miejscu aplikacji czyści zapisany wybór, więc baner pojawia się ponownie.
Renderuj baner z głównego layoutu, aby pojawiał się na każdej trasie, także przy bezpośrednich wejściach na głębokie podstrony.
Przy renderowaniu po stronie serwera odczytuj zapisany wybór tylko w efekcie po stronie klienta, aby render serwera i pierwszy render klienta były zgodne.
Nadaj banerowi role=dialog lub oznaczony region i zadbaj, aby każdy przycisk był dostępny z klawiatury.
Zapisuj razem z wyborem numer wersji; gdy dodasz nową kategorię, podbij go, aby zapytać ponownie.
Nigdy nie chowaj odmowy w widoku ustawień; umieść Odrzuć wszystkie obok Akceptuj wszystkie.
Najczęściej zadawane pytania
Czy react-cookie-consent blokuje za mnie skrypty?
Nie. Jego README opisuje baner, który zapisuje odpowiedź odwiedzającego w cookie i wywołuje onAccept lub onDecline. Wczytanie lub pominięcie analityki to nadal Twoje zadanie, na przykład przez sprawdzenie getCookieConsentValue przed dodaniem skryptu.
Jak dodać przycisk odmowy w react-cookie-consent?
Ustaw prop enableDeclineButton; domyślnie ma wartość false. Tekst przycisku to domyślnie I decline i można go zmienić przez declineButtonText, a onDecline uruchamia się po jego kliknięciu.
Jak pozwolić odwiedzającym zmienić zdanie?
Przy własnym hooku wyczyść zapisaną wartość, a baner wróci. W pakiecie wywołaj resetCookieConsentValue, przekazując tę samą nazwę cookie, którą nadałeś banerowi, jeśli zmieniłeś domyślną.
Czy zapisywać zgodę w cookie, czy w pamięci przeglądarki?
Dla przeglądarki oba sposoby działają. Cookie może odczytać także Twój serwer, co pomaga, jeśli to serwer decyduje, które tagi wypisać. Pamięć przeglądarki nie dołącza wartości do każdego żądania. Oba są dozwolone do zapamiętania samego wyboru.
Gdzie w React umieścić wywołania Consent Mode?
Domyślne ustawienie gtag consent default umieść w sekcji head HTML przed jakimkolwiek tagiem Google, poza React, aby uruchomiło się jako pierwsze. gtag('consent', 'update', ...) wywołuj z obsługi przycisku akceptacji wewnątrz React.
Dlaczego wstrzymywanie jest lepsze niż ukrywanie
Baner, który po kliknięciu Odrzuć tylko się chowa, podczas gdy fragment analityki w index.html już się wykonał, i tak rejestruje wizytę. Rozwiązaniem jest przeniesienie tego fragmentu do komponentu, który renderuje się dopiero po zgodzie.
Dla tagów, których nie możesz przenieść, na przykład wstrzykiwanych przez platformę, użyj ustawienia zgody tej platformy lub Consent Mode, aby tag działał w trybie ograniczonym, dopóki nie przyjdzie aktualizacja.
Testowanie banera
Otwórz stronę w oknie prywatnym, otwórz narzędzia deweloperskie przeglądarki i sprawdź panel Network: zanim cokolwiek klikniesz, nie powinny pojawić się żadne żądania analityczne ani reklamowe. Potem zaakceptuj i potwierdź, że się zaczynają.
Powtórz z Odrzuć wszystkie i przeładuj drugą stronę, aby potwierdzić, że odmowa została zapamiętana.
Własna implementacja: hook, baner i wstrzymany skrypt
Trzy małe elementy. Nie używają żadnej biblioteki, działają w każdej aplikacji React 18 lub 19 i odpowiadają demu powyżej.
Hook useConsent
Odczytuje zapisany wybór raz po stronie klienta, a każdą zmianę zapisuje i rozgłasza.
Komponent ConsentBanner
Akceptuj i Odrzuć są obok siebie; pola kategorii są domyślnie niezaznaczone.
Wczytanie skryptu dopiero po zgodzie
Tag script powstaje tylko wtedy, gdy kategoria ma zgodę, więc przy odmowie nigdy nie istnieje.
Korzystanie z pakietu react-cookie-consent
Zainstaluj go poleceniem npm install react-cookie-consent. Oto propsy i funkcje pomocnicze opisane w jego README, z wartościami domyślnymi, stan na październik 2026.
Propsy react-cookie-consent i wartości domyślne
Prop lub funkcja
Domyślnie
Do czego służy
"bottom"
Gdzie znajduje się pasek: góra, dół lub brak
buttonText
"I understand"
Tekst przycisku akceptacji
enableDeclineButton
Pokazuje przycisk odmowy
declineButtonText
"I decline"
Tekst przycisku odmowy
cookieName
"CookieConsent"
Nazwa cookie, w którym zapisywana jest odpowiedź
Liczba dni do wygaśnięcia cookie
onAccept / onDecline
Uruchamiają Twój kod, gdy odwiedzający odpowie
getCookieConsentValue(name)
Odczytuje zapisaną odpowiedź
resetCookieConsentValue()
Usuwa zapisaną odpowiedź, więc pasek pojawia się ponownie
Baner z przyciskiem odmowy
Akceptacja wczytuje analitykę; odmowa nie uruchamia niczego opcjonalnego. Sprawdzenie przy pierwszym wczytaniu obsługuje powracających odwiedzających.
Demo na żywo: baner zgody, który wstrzymuje skrypty
Przykładowa strona
Używamy cookies do analityki i reklam tylko za Twoją zgodą.
Akceptuj wszystkie
Odrzuć wszystkie
Wybierz
Zapisz wybór
Analityka
Reklamy
Niezbędne (zawsze włączone)
Co zostałoby wczytane
{c}: skrypt dodany
{c}: zablokowane
Brak wyboru, więc nic opcjonalnego się nie wczytuje.
Ustawienia cookies
Wysłana aktualizacja Consent Mode
Jeszcze brak.
Demo zapamiętuje Twój wybór tylko w tej przeglądarce. Nic nie jest nigdzie wysyłane.