KATLA DLA REACT
Zgoda na pliki cookie dla Reacta, która żyje w drzewie komponentów.
Provider, kilka typowanych hooków i dwa komponenty bez stylów. Decyzja to stan, który Twoje komponenty czytają i na który reagują ponownym renderowaniem, blokada cookies jest wstrzykiwana za Ciebie, a baner możesz przestylować albo całkiem zastąpić.
@katla.app/sdk/reactReact 18 i 19Vite, CRA, dowolny bundler
src/App.tsxVite + React
import { useEffect } from 'react'
import {
KatlaProvider,
CookieBanner,
useKatlaConsent,
} from '@katla.app/sdk/react'
function Analytics() {
const { consent } = useKatlaConsent()
useEffect(() => {
if (consent?.analytics) loadAnalytics()
}, [consent])
return null
}
export default function App() {
return (
<KatlaProvider siteId="your-site-id" googleConsentMode>
<Analytics />
<CookieBanner />
</KatlaProvider>
)
}Provider sam wstrzykuje blokadę cookies i most zgodyPełny przewodnik →
DLACZEGO STRONY NA REACT MAJĄ KŁOPOT ZE ZGODĄ
Stan zgody i stan Reacta to ten sam problem, rozwiązywany dwa razy.
PROBLEMBaner to zewnętrzny skrypt, który modyfikuje DOM spoza Reacta, a ponowne renderowanie albo zmiana trasy cofa jego zmiany.
Z KATLĄZamiast tego provider i typowane hooki. Zgoda żyje w kontekście, a komponenty, które ją czytają, renderują się ponownie jak wszystko inne w Twoim drzewie.
PROBLEMTagi ładują się z index.html, zanim React się zamontuje, więc decyzja przychodzi długo po plikach cookie.
Z KATLĄKatlaProvider wstrzykuje blokadę cookies już przy montowaniu. Plik cookie, którego kategoria nie ma zgody, zostaje odrzucony na poziomie document.cookie, niezależnie od tego, który tag próbował go zapisać.
PROBLEMHostowany baner ignoruje Twój design system, a zmiana jego wyglądu to walka z cudzym arkuszem stylów.
Z KATLĄCookieBanner nie dostarcza żadnego CSS: semantyczny markup ze stabilnymi nazwami klas katla-*, render prop, który całkowicie go zastępuje, i useConsentManager(), jeśli nie chcesz żadnego markupu.
KONFIGURACJA
Cztery kroki, jeden provider.
- Instalacjanpm install @katla.app/sdk. W trybie headless to około 4 KB transferu.
- Opakuj aplikacjęUmieść KatlaProvider ze swoim Site ID wokół drzewa i dodaj googleConsentMode, jeśli używasz GA4 lub Google Ads.
- Zabezpiecz tagiCzytaj useKatlaConsent() i ładuj skrypty analityczne lub marketingowe dopiero wtedy, gdy ich kategoria dostanie zgodę.
- Wdróż banerWstaw CookieBanner i ostyluj go własnym CSS albo zbuduj własny baner na useConsentManager().
STWORZONE DLA REACT
Hooki i komponenty. Nic ponad to, o co prosisz.
useKatlaConsentBieżąca decyzja dla każdej kategorii, aktualizowana na żywo z window.KatlaConsent, z subskrypcją onChange, która zwraca własną funkcję do jej anulowania.
useKatlaCookiesZeskanowany spis plików cookie ze stanami ładowania i błędu. Trwające żądania są deduplikowane, więc dziesięć komponentów montowanych naraz nadal pobiera dane tylko raz.
useConsentManagerCały baner jako stan: ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection. I ani jednego wyrenderowanego elementu.
Komponenty bez stylówCookieBanner i CookieCatalog renderują semantyczny HTML z nazwami klas katla-*, render prop oraz nadpisania dla każdej kategorii i każdego pliku cookie.
Consent Mode v2Jeden prop googleConsentMode steruje ad_storage, analytics_storage, ad_user_data i ad_personalization. Domyślnie odmowa, aktualizacja po decyzji.
Nic nie jest pobierane przy montowaniukatla pull zapisuje spis plików cookie i blokadę do .katla/. Przekaż je jako initialCookies i guardScript, a przeglądarka nie wyśle ani jednego żądania.
CORE WEB VITALS
Ciasteczka się kruszą. Twoje SEO nie musi.
Skrypt zgody to pierwsza usługa zewnętrzna na stronie, dlatego pojawia się w raporcie Core Web Vitals. Punkt wejścia dla Reacta to 4 KB transferu, nie renderuje interfejsu, o który nie prosisz, i nie zajmuje miejsca w układzie strony, a z initialCookies z buildu nie wysyła żadnego żądania.
Jak działa tryb headless →4 kBTransferBlokada i API zgody, brotli
0 msWzrost LCPW porównaniu z tą samą stroną bez niego
0Przesunięcie układuBaner nie rezerwuje miejsca w układzie strony
2ŻądanieJeden skrypt, cache’owany na brzegu sieci
Nasze własne pomiary z : jak je wykonaliśmy.
Pytania od zespołów pracujących z React
- Czy mam tego używać w Next.js?
- Użyj zamiast tego @katla.app/sdk/next. KatlaNextProvider bierze na siebie granicę klienta, więc reszta drzewa pozostaje komponentami serwerowymi, a getCachedCookies() pobiera spis plików cookie z wyprzedzeniem na serwerze. Hooki i komponenty są te same.
- Czy muszę używać CookieBanner?
- Nie. Przyjmuje render prop, który całkowicie zastępuje jego markup, a useConsentManager() daje ten sam stan bez żadnego markupu. Sam provider nie renderuje banera.
- Które wersje Reacta?
- 18 i 19, jako peer dependency. W całości hooki i komponenty funkcyjne, więc działa z Vite, Create React App i każdą inną konfiguracją Reacta po stronie klienta.
- Czy da się uniknąć żądania przy ładowaniu strony?
- Tak. katla pull zapisuje dane o plikach cookie, polityki i guard.js do .katla/ w czasie buildu. Przekaż je providerowi jako initialCookies i guardScript, a przy ładowaniu strony nic nie zostanie pobrane.
Opakuj aplikację raz, a pliki cookie poczekają na swoją kolej.
Darmowy plan skanuje Twoją stronę na React i generuje politykę cookies, bez podawania karty.