KATLA FOR TYPESCRIPT
Cookiesamtykke for TypeScript: et API, ikke en skripttagg.
Én typet klient for cookie-oversikten, de genererte erklæringene og den besøkendes valg. Ikke noe rammeverk, ikke noe grensesnitt og ingen udokumentert global å gjette seg fram til: kategoriene, samtykketilstanden og språkene for erklæringene er typer editoren din allerede kjenner.
@katla.app/sdk4 KB headlessAlle bundlere, alle rammeverk
src/consent.tsUten rammeverk
import { createKatlaClient, type ConsentState } from '@katla.app/sdk'
const katla = createKatlaClient({ siteId: 'your-site-id' })
// Refuse non-consented cookies before anything can set one
await katla.injectGuard()
// The scanned inventory, grouped and typed by category
const { cookies } = await katla.getCookies()
cookies.marketing.forEach((c) => console.log(c.name, c.platform))
// Every decision, for as long as you listen
const off = katla.onConsentChange((consent: ConsentState) => {
if (consent.analytics) loadAnalytics()
})onConsentChange returnerer sin egen avmeldingsfunksjonHele guiden →
HVORFOR TYPESCRIPT-NETTSTEDER SLITER MED SAMTYKKE
Et banner er et UI-problem. Samtykke er et dataproblem.
PROBLEMETPlattformen leverer en widget, og alt bak den (hvilke informasjonskapsler (cookies) som finnes, hva de gjør, hva den besøkende valgte) er låst inne i noen andres iframe.
MED KATLASDK-et er de dataene. getCookies() returnerer oversikten, getPolicy() returnerer det genererte dokumentet som markdown, og onConsentChange() returnerer valget. Grensesnittet er den valgfrie delen.
PROBLEMETSamtykkeglobalen er udokumentert og forskjellig på hver plattform, så hver integrasjon er en gjetning som feiler i det stille i produksjon.
MED KATLAwindow.KatlaConsent er typet som KatlaConsentAPI, og ConsentState, CookieCategory, CookieData og de tretten språkene for erklæringene eksporteres sammen med den. Et feil kategorinavn er en kompileringsfeil, ikke en supportsak.
PROBLEMETÅ blokkere sporere betyr å gå gjennom hvert skript for hånd, og gjennomgangen er utdatert ved neste deploy.
MED KATLAinjectGuard() redefinerer document.cookie og holder tilbake alt i en kategori som ikke er tillatt. Skanningen holder oversikten oppdatert, så listen er ikke noe du må vedlikeholde.
OPPSETT
Installer, opprett en klient, legg taggene bak samtykke.
- Installernpm install @katla.app/sdk. Omtrent 4 KB overført, typer inkludert.
- Opprett en klientcreateKatlaClient({ siteId }) er hele oppsettet. Send med baseUrl bare hvis du serverer CDN-et fra ditt eget domene.
- Sett inn vaktenawait client.injectGuard(). Fra da av blir en cookie i en kategori som ikke er tillatt, aldri skrevet.
- Legg taggene bak samtykkeAbonner med onConsentChange(), og last analyse- eller annonseskript når kategorien deres blir true.
BYGGET FOR TYPESCRIPT
Dette får du for én avhengighet.
Oversikten, typetgetCookies() returnerer hver skannede cookie og piksel gruppert etter kategori, med leverandør, behandlingsansvarlig og beskrivelse, på hvilket som helst av tretten språk.
Cookie-vakteninjectGuard() redefinerer document.cookie, så en cookie uten samtykke blir avvist idet den skrives, i stedet for å bli slettet en stund etter at den ble satt.
Erklæringer som datagetPolicy({ format }) returnerer cookie-erklæringen, personvernerklæringen eller cookie-tabellen som markdown, med datoen den ble generert. Rendre den slik stacken din rendrer markdown.
Consent Mode v2 og GPCsetupGoogleConsentMode() sender alle de fire Google-signalene, avslått som standard og oppdatert når valget er tatt. isGPCEnabled() leser nettleserens Global Privacy Control.
Bygg uten henting under kjøringkatla pull skriver oversikten, erklæringene og vakten til .katla/, så et bygg kan levere dem som statiske filer og ikke hente noe ved sidevisning.
Uten rammeverkKlienten er et vanlig objekt over fetch og window-hendelser. React- og Next.js-inngangene ligger oppå den; Vue, Svelte og vanilla kaller den direkte.
CORE WEB VITALS
Samtykket lastes inn. SEO-en din merker ingenting.
Headless betyr det det sier: ikke noe grensesnitt, ikke noe stilark, ingen webfont og ingen ekstra forespørsel for å hente noen av dem. 4 KB overført for vakten og samtykke-API-et, og trukket inn i bygget med katla pull er det ingen forespørsel i det hele tatt.
Slik fungerer headless-modus →4 kBOver nettetCookie-vakt og samtykke-API, brotli
0 msEkstra LCPMot den samme siden uten Katla
0LayoutforskyvningBanneret reserverer ingen plass i flyten
2ForespørselEtt skript, bufret i edge-nettverket
Våre egne målinger, gjort (slik ble de gjort).
Spørsmål TypeScript-team stiller
- Må jeg bygge mitt eget banner?
- Bare hvis du vil. React-inngangen leverer CookieBanner og CookieCatalog ustylet, og Katlas hostede widget er én skripttagg. Selve SDK-et rendrer med vilje ingenting.
- Kjører det utenfor nettleseren?
- getCookies() og getPolicy() er vanlige fetch-kall og kjører overalt der fetch gjør det, også i Node og edge-runtimer. injectGuard() og onConsentChange() trenger en DOM, fordi selve valget tas i nettleseren.
- Hva med Vue, Svelte eller helt uten rammeverk?
- Klienten er ikke avhengig av noe rammeverk, så den fungerer i alle. Bare React- og Next.js-inngangene importerer React, og ingenting tvinger deg til å importere dem.
- Hvor kommer cookie-dataene fra?
- Fra skanningen av ditt eget nettsted, servert fra CDN-et og mellomlagret på edge: de samme svarene som widgeten leser. De tømmes når en skanning eller en omklassifisering endrer noe, så det er aldri en kopi du må holde i synk.
Én avhengighet, og samtykket er typet.
Gratisplanen skanner ditt TypeScript-nettsted og genererer en cookie-erklæring, uten kort.