KATLA JA TYPESCRIPT
TypeScript-evästesuostumus: API, ei script-tagi.
Yksi tyypitetty client evästeluetteloon, luotuihin käytäntöihin ja kävijän päätökseen. Ei kehystä, ei käyttöliittymää eikä arvailtavaa dokumentoimatonta globaalia: luokat, suostumuksen tila ja käytäntöjen kielet ovat tyyppejä, jotka editorisi jo tuntee.
@katla.app/sdk4 kt headlessinaMikä tahansa bundler ja kehys
src/consent.tsEi kehystä
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 palauttaa oman unsubscribe-funktionsaKoko opas →
SUOSTUMUKSEN SUDENKUOPAT: TYPESCRIPT
Banneri on käyttöliittymäongelma. Suostumus on dataongelma.
ONGELMAAlusta toimittaa widgetin, ja kaikki sen takana (mitä evästeitä on, mitä ne tekevät, mitä kävijä valitsi) on lukittu jonkun toisen iframeen.
KATLALLASDK on se data. getCookies() palauttaa evästeluettelon, getPolicy() palauttaa luodun dokumentin markdownina, onConsentChange() palauttaa päätöksen. Käyttöliittymä on se valinnainen osa.
ONGELMASuostumuksen globaali on dokumentoimaton ja erilainen joka alustalla, joten jokainen integraatio on arvaus, joka pettää tuotannossa hiljaa.
KATLALLAwindow.KatlaConsent on tyypitetty KatlaConsentAPI-tyypiksi, ja ConsentState, CookieCategory, CookieData ja kolmetoista käytäntökieltä viedään sen rinnalla. Väärä luokan nimi on käännösvirhe, ei tukipyyntö.
ONGELMASeurannan estäminen tarkoittaa jokaisen skriptin tarkastamista käsin, ja tarkastus on vanhentunut jo seuraavassa julkaisussa.
KATLALLAinjectGuard() määrittelee document.cookien uudelleen ja pidättää kaiken, minkä luokkaa ei ole sallittu. Skannaus pitää evästeluettelon ajan tasalla, joten listaa ei tarvitse ylläpitää itse.
KÄYTTÖÖNOTTO
Asenna, luo client, kytke tagit suostumukseen.
- Asennanpm install @katla.app/sdk. Siirtokoko noin 4 kt, tyypit mukana.
- Luo clientcreateKatlaClient({ siteId }) on koko asennus. Välitä lisäksi baseUrl vain, jos tarjoilet CDN:ää omasta verkkotunnuksestasi.
- Lisää evästevahtiawait client.injectGuard(). Siitä lähtien evästettä, jonka luokkaa ei ole sallittu, ei koskaan kirjoiteta.
- Kytke tagit suostumukseenTilaa muutokset onConsentChange()-funktiolla ja lataa analytiikka- tai mainosskriptit, kun niiden luokka muuttuu todeksi.
TEHTY ALUSTALLE TYPESCRIPT
Mitä saat yhdellä riippuvuudella.
Evästeluettelo tyypitettynägetCookies() palauttaa jokaisen skannatun evästeen ja pikselin luokittain ryhmiteltynä, toimittajan, rekisterinpitäjän ja kuvauksen kera, millä tahansa kolmestatoista kielestä.
EvästevahtiinjectGuard() määrittelee document.cookien uudelleen, joten eväste ilman suostumusta torjutaan kirjoitushetkellä sen sijaan, että se poistettaisiin joskus asettamisen jälkeen.
Käytännöt datanagetPolicy({ format }) palauttaa evästekäytännön, tietosuojaselosteen tai evästetaulukon markdownina luontipäivämäärineen. Renderöi se niin kuin pinosi markdownin renderöi.
Consent Mode v2 ja GPCsetupGoogleConsentMode() lähettää kaikki neljä Googlen signaalia, oletuksena evättyinä ja päätöksen myötä päivittyvinä. isGPCEnabled() lukee selaimen Global Privacy Control -signaalin.
Build ilman ajonaikaisia hakujakatla pull kirjoittaa evästeluettelon, käytännöt ja evästevahdin hakemistoon .katla/, joten build voi toimittaa ne staattisina tiedostoina eikä sivunäytöllä haeta mitään.
Ei kehyssidonnaisuuttaClient on tavallinen olio fetchin ja window-tapahtumien päällä. React- ja Next.js-sisääntulopisteet on rakennettu sen päälle; Vue, Svelte ja pelkkä JavaScript kutsuvat sitä suoraan.
CORE WEB VITALS
Keksi saa murentua. Hakukonesijoituksesi ei.
Headless tarkoittaa sitä, mitä sanoo: ei käyttöliittymää, ei tyylitiedostoa, ei web-fonttia eikä toista pyyntöä minkään niistä hakemiseen. Evästevahdin ja suostumus-API:n siirtokoko on 4 kt, ja katla pull -komennolla buildiin tuotuna se ei ole pyyntö lainkaan.
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ä: TypeScript
- Pitääkö minun rakentaa oma banneri?
- Vain jos haluat. React-sisääntulopiste sisältää tyylittelemättömät CookieBanner- ja CookieCatalog-komponentit, ja Katlan isännöity widget on yksi script-tagi. SDK itse ei tarkoituksella renderöi mitään.
- Toimiiko se selaimen ulkopuolella?
- getCookies() ja getPolicy() ovat tavallisia fetch-kutsuja ja toimivat kaikkialla, missä fetch toimii, myös Nodessa ja edge-ajoympäristöissä. injectGuard() ja onConsentChange() tarvitsevat DOMin, koska itse päätös tehdään selaimessa.
- Entä Vue, Svelte tai ei kehystä lainkaan?
- Clientilla ei ole kehysriippuvuutta, joten se toimii niissä kaikissa. Vain React- ja Next.js-sisääntulopisteet tuovat Reactin mukaan, eikä mikään pakota sinua käyttämään niitä.
- Mistä evästetiedot tulevat?
- Oman sivustosi skannauksesta, tarjoiltuna CDN:stä ja välimuistista reunapalvelimilta: samat vastaukset, joita widget lukee. Välimuisti tyhjennetään, kun skannaus tai uudelleenluokittelu muuttaa jotain, joten se ei ole koskaan kopio, joka pitäisi pitää synkronissa.
Yksi riippuvuus, ja suostumus on tyypitetty.
Ilmaispaketti skannaa TypeScript-sivustosi ja luo evästekäytännön ilman korttia.