KATLA TIL TYPESCRIPT
Cookiesamtykke i TypeScript: et API, ikke et script-tag.
Én typet klient til cookieoversigten, de genererede politikker og den besøgendes valg. Intet framework, ingen brugerflade og ingen udokumenteret global variabel at gætte sig frem til: kategorierne, samtykketilstanden og politikkernes sprogkoder er typer, som din editor allerede kender.
@katla.app/sdk4 KB headlessEnhver bundler, ethvert framework
src/consent.tsIntet framework
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 selv sin afmeldingsfunktionHele guiden →
DERFOR KÆMPER TYPESCRIPT-WEBSITES MED SAMTYKKE
Et banner er et UI-problem. Samtykke er et dataproblem.
PROBLEMETPlatformen leverer en widget, og alt bag den (hvilke cookies der findes, hvad de gør, hvad den besøgende valgte) er låst inde i en andens iframe.
MED KATLASDK’et er de data. getCookies() returnerer cookieoversigten, getPolicy() returnerer det genererede dokument som markdown, onConsentChange() returnerer valget. Brugerfladen er den valgfrie del.
PROBLEMETDen globale samtykkevariabel er udokumenteret og forskellig fra platform til platform, så hver integration er et gæt, der fejler i stilhed i produktion.
MED KATLAwindow.KatlaConsent er typet som KatlaConsentAPI, og ConsentState, CookieCategory, CookieData og politikkernes tretten sprogkoder eksporteres sammen med den. Et forkert kategorinavn er en kompileringsfejl, ikke en supportsag.
PROBLEMETAt blokere trackere betyder, at hvert script skal gennemgås i hånden, og gennemgangen er forældet ved næste deploy.
MED KATLAinjectGuard() omdefinerer document.cookie og holder alt tilbage, hvis kategori ikke er tilladt. Scanningen holder cookieoversigten opdateret, så listen er ikke en, du skal vedligeholde.
OPSÆTNING
Installer, opret en klient, sæt tags bag samtykke.
- Installernpm install @katla.app/sdk. Cirka 4 KB overført, typer inkluderet.
- Opret en klientcreateKatlaClient({ siteId }) er hele opsætningen. Angiv kun også baseUrl, hvis du serverer CDN’et fra dit eget domæne.
- Indsæt spærrenawait client.injectGuard(). Fra det øjeblik bliver en cookie, hvis kategori ikke er tilladt, aldrig skrevet.
- Sæt tags bag samtykkeAbonnér med onConsentChange(), og indlæs analytics- eller annoncescripts, når deres kategori skifter til true.
BYGGET TIL TYPESCRIPT
Det får du for én afhængighed.
Cookieoversigten, typetgetCookies() returnerer hver scannet cookie og pixel grupperet efter kategori, med udbyder, dataansvarlig og beskrivelse, på et hvilket som helst af tretten sprog.
CookiespærreninjectGuard() omdefinerer document.cookie, så en cookie uden samtykke bliver afvist, idet den skrives, i stedet for at blive slettet et stykke tid efter, at den blev sat.
Politikker som datagetPolicy({ format }) returnerer cookiepolitikken, privatlivspolitikken eller cookietabellen som markdown, med datoen for, hvornår den blev genereret. Render den, som din stack nu engang renderer markdown.
Consent Mode v2 og GPCsetupGoogleConsentMode() sender alle fire Google-signaler, afvist som standard og opdateret, når den besøgende vælger. isGPCEnabled() læser browserens Global Privacy Control.
Build uden hentning ved runtimekatla pull skriver cookieoversigten, politikkerne og spærren ind i .katla/, så et build kan levere dem som statiske filer og ikke hente noget, når siden vises.
Uden frameworkKlienten er et helt almindeligt objekt oven på fetch og window-events. React- og Next.js-indgangene bygger oven på den; Vue, Svelte og vanilla kalder den direkte.
CORE WEB VITALS
Samtykket indlæses. Din SEO mærker ingenting.
Headless betyder det, det siger: ingen brugerflade, intet stylesheet, ingen webfont og ingen ekstra forespørgsel for at hente noget af det. 4 KB over nettet for spærren og samtykke-API’et, og trukket ind i buildet med katla pull er det slet ikke en forespørgsel.
Sådan virker headless-tilstand →4 kBOver nettetCookiespærre og samtykke-API, brotli
0 msEkstra LCPMod den samme side uden
0LayoutskiftBanneret reserverer ingen plads i flowet
2ForespørgselÉt script, cachet på edge
Vores egne målinger, foretaget den : sådan blev de foretaget.
Spørgsmål, som TypeScript-teams stiller
- Skal jeg bygge mit eget banner?
- Kun hvis du vil. React-indgangen leverer CookieBanner og CookieCatalog ustylede, og Katlas hostede widget er ét script-tag. Selve SDK’et renderer bevidst ingenting.
- Kører det uden for browseren?
- getCookies() og getPolicy() er almindelige fetch-kald og kører overalt, hvor fetch gør, også i Node og edge runtimes. injectGuard() og onConsentChange() kræver en DOM, fordi selve valget træffes i browseren.
- Hvad med Vue, Svelte eller slet intet framework?
- Klienten er ikke afhængig af noget framework, så den virker i dem alle. Kun React- og Next.js-indgangene importerer React, og intet tvinger dig til at importere dem.
- Hvor kommer cookiedataene fra?
- Fra scanningen af dit eget website, serveret fra CDN’et og cachet på edge-servere: de samme svar, som widgetten læser. Cachen ryddes, når en scanning eller en omklassificering ændrer noget, så det er aldrig en kopi, du selv skal holde synkron.
Én afhængighed, og samtykket er typet.
Den gratis plan scanner dit TypeScript-website og genererer en cookiepolitik uden betalingskort.