KATLA JA REACT

React-evästesuostumus, joka elää komponenttipuussasi.

Provider, kourallinen tyypitettyjä hookeja ja kaksi tyylittelemätöntä komponenttia. Päätös on tilaa, jota komponenttisi lukevat ja jonka muuttuessa ne renderöityvät uudelleen, evästevahti lisätään puolestasi, ja banneri on sinun tyyliteltäväksesi tai korvattavaksesi kokonaan.

Lue React-opasAloita ilmaiseksi
@katla.app/sdk/reactReact 18 ja 19Vite, CRA, mikä tahansa 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 lisää evästevahdin ja suostumussillan itseKoko opas →
SUOSTUMUKSEN SUDENKUOPAT: REACT

Suostumuksen tila ja Reactin tila ovat sama ongelma, ratkaistuna kahdesti.

ONGELMABanneri on kolmannen osapuolen skripti, joka muokkaa DOMia Reactin ulkopuolelta, ja uudelleenrenderöinti tai reitinvaihto palauttaa sen ennalleen.
KATLALLASen sijaan provider ja tyypitetyt hookit. Suostumus elää kontekstissa, ja sitä lukevat komponentit renderöityvät uudelleen kuten kaikki muukin puussasi.
ONGELMATagit ladataan index.html-tiedostosta ennen kuin React on mountannut, joten päätös saapuu kauan evästeiden jälkeen.
KATLALLAKatlaProvider lisää evästevahdin mountatessaan. Eväste, jonka luokkaa ei ole sallittu, torjutaan document.cookie-tasolla, yritti sitä asettaa mikä tagi tahansa.
ONGELMAIsännöity banneri ei välitä designjärjestelmästäsi, ja sen uudelleentyylittely on taistelua jonkun toisen tyylitiedostoa vastaan.
KATLALLACookieBanner ei tuo mukanaan lainkaan CSS:ää: semanttinen merkintä vakailla katla-*-luokkanimillä, render prop, joka korvaa sen kokonaan, ja useConsentManager(), jos et halua merkintää lainkaan.
KÄYTTÖÖNOTTO

Neljä vaihetta, yksi provider.

  1. Asennanpm install @katla.app/sdk. Headless-tilassa siirtokoko on noin 4 kt.
  2. Kääri sovellusLaita KatlaProvider komponenttipuusi ympärille sivustosi Site ID:llä ja lisää googleConsentMode, jos käytät GA4:ää tai Google Adsia.
  3. Kytke tagit suostumukseenLue useKatlaConsent() ja lataa analytiikka- tai markkinointiskriptit vasta, kun niiden luokka on sallittu.
  4. Julkaise banneriLisää CookieBanner ja tyylittele se omalla CSS:lläsi, tai rakenna oma useConsentManager()-hookin avulla.
TEHTY ALUSTALLE REACT

Hookit ja komponentit, eikä mitään, mitä et pyytänyt.

useKatlaConsentNykyinen päätös luokittain, reaaliajassa päivittyvänä window.KatlaConsent-oliosta, ja onChange-tilaus, joka palauttaa oman unsubscribe-funktionsa.
useKatlaCookiesSkannattu evästeluettelosi lataus- ja virhetiloineen. Käynnissä olevat pyynnöt yhdistetään, joten kymmenen yhtä aikaa mountattavaa komponenttia tekee silti vain yhden haun.
useConsentManagerKoko banneri tilana (ready, hasDecision, availableCategories, toggleCategory, acceptAll, rejectAll, saveSelection) eikä yhtäkään renderöityä elementtiä.
Tyylittelemättömät komponentitCookieBanner ja CookieCatalog renderöivät semanttista HTML:ää, jossa on katla-*-luokkanimet, render prop sekä luokka- ja evästekohtaiset ohitukset.
Consent Mode v2Yksi googleConsentMode-prop ohjaa signaaleja ad_storage, analytics_storage, ad_user_data ja ad_personalization. Oletuksena evätty, päivittyy päätöksen myötä.
Ei hakuja mountattaessakatla pull kirjoittaa evästeluettelon ja evästevahdin hakemistoon .katla/. Välitä ne initialCookies- ja guardScript-arvoina, niin selain ei pyydä yhtään mitään.
CORE WEB VITALS

Keksi saa murentua. Hakukonesijoituksesi ei.

Suostumusskripti on sivun ensimmäinen kolmas osapuoli, ja siksi se näkyy Core Web Vitals -raportissa. React-sisääntulopisteen siirtokoko on 4 kt, se ei renderöi käyttöliittymää, jota et ole pyytänyt, eikä varaa tilaa asettelusta, ja buildissa luoduilla initialCookies-tiedoilla se ei tee yhtään pyyntöä.

Näin headless-tila toimii →
4 kBSiirtomääräEvästevahti ja suostumus-API, brotli
0 msLCP-lisäysVerrattuna samaan sivuun ilman sitä
0Asettelun siirtymäBanneri ei varaa tilaa sivun rakenteesta
2PyyntöYksi skripti, välimuistissa CDN:n reunalla

Omat mittauksemme, tehty : näin ne tehtiin.

Usein kysyttyä: React

Kannattaako tätä käyttää Next.js:ssä?
Käytä sen sijaan pakettia @katla.app/sdk/next. KatlaNextProvider kantaa client-rajan, joten muu puusi pysyy Server Componentteina, ja getCachedCookies() hakee evästeluettelon valmiiksi palvelimella. Hookit ja komponentit ovat samat.
Onko CookieBanneria pakko käyttää?
Ei. Se ottaa render propin, joka korvaa sen merkinnän kokonaan, ja useConsentManager() antaa saman tilan ilman merkintää lainkaan. Provider ei renderöi banneria itsestään.
Mitkä React-versiot ovat tuettuja?
18 ja 19, peer-riippuvuutena. Hookit ja funktiokomponentit kauttaaltaan, joten se toimii Viten, Create React Appin tai minkä tahansa muun selainpuolen React-ympäristön kanssa.
Voinko välttää pyynnön sivun latautuessa?
Kyllä. katla pull kirjoittaa evästetiedot, käytännöt ja guard.js-tiedoston hakemistoon .katla/ buildin aikana. Välitä ne providerille initialCookies- ja guardScript-arvoina, niin sivun latautuessa ei haeta mitään.
KATLA ALUSTOILLE
Katla ja Next.jsKatla ja TypeScriptKatla ja WordPressKatla ja Google Tag ManagerKatla ja LovableKatla ja WixKatla ja SquarespaceKatla ja WebflowKatla ja FramerKatla ja GhostKatla ja HubSpotKatla ja KajabiKatla ja JoomlaKatla ja Shopify (tulossa)

Kääri sovelluksesi kerran, niin evästeet odottavat vuoroaan.

Ilmaispaketti skannaa React-sivustosi ja luo evästekäytännön ilman korttia.

Aloita ilmaiseksi