KATLA DLA TYPESCRIPT
Zgoda na pliki cookie dla TypeScriptu: API, a nie tag script.
Jeden typowany klient do spisu plików cookie, wygenerowanych polityk i decyzji odwiedzającego. Bez frameworka, bez interfejsu i bez nieudokumentowanej zmiennej globalnej, której trzeba się domyślać: kategorie, stan zgody i języki polityk to typy, które Twój edytor już zna.
@katla.app/sdk4 KB w trybie headlessDowolny bundler i framework
src/consent.tsBez frameworka
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 zwraca własną funkcję do anulowania subskrypcjiPełny przewodnik →
DLACZEGO STRONY NA TYPESCRIPT MAJĄ KŁOPOT ZE ZGODĄ
Baner to problem interfejsu. Zgoda to problem danych.
PROBLEMPlatforma dostarcza widget, a wszystko, co za nim stoi (jakie pliki cookie istnieją, do czego służą, co wybrał odwiedzający), jest zamknięte w cudzym iframe.
Z KATLĄSDK to właśnie te dane. getCookies() zwraca spis plików cookie, getPolicy() zwraca wygenerowany dokument w markdownie, onConsentChange() zwraca decyzję. Interfejs jest tu dodatkiem.
PROBLEMGlobalny obiekt zgody jest nieudokumentowany i na każdej platformie inny, więc każda integracja to zgadywanie, które po cichu zawodzi na produkcji.
Z KATLĄwindow.KatlaConsent ma typ KatlaConsentAPI, a obok niego eksportowane są ConsentState, CookieCategory, CookieData i trzynaście języków polityk. Błędna nazwa kategorii to błąd kompilacji, a nie zgłoszenie do supportu.
PROBLEMBlokowanie trackerów oznacza ręczny audyt każdego skryptu, a audyt jest nieaktualny przy następnym wdrożeniu.
Z KATLĄinjectGuard() redefiniuje document.cookie i zatrzymuje wszystko, czego kategoria nie ma zgody. Skanowanie utrzymuje spis plików cookie na bieżąco, więc tej listy nie prowadzisz ręcznie.
KONFIGURACJA
Zainstaluj, utwórz klienta, zabezpiecz tagi.
- Instalacjanpm install @katla.app/sdk. Około 4 KB transferu, typy w zestawie.
- Utwórz klientacreateKatlaClient({ siteId }) to cała konfiguracja. baseUrl przekaż tylko wtedy, gdy serwujesz CDN z własnej domeny.
- Wstrzyknij blokadęawait client.injectGuard(). Od tej chwili plik cookie, którego kategoria nie ma zgody, nigdy nie zostanie zapisany.
- Zabezpiecz tagiZasubskrybuj onConsentChange() i ładuj skrypty analityczne lub reklamowe, gdy ich kategoria zmieni się na true.
STWORZONE DLA TYPESCRIPT
Co dostajesz w ramach jednej zależności.
Typowany spis plików cookiegetCookies() zwraca każdy zeskanowany plik cookie i piksel, pogrupowane według kategorii, z dostawcą, administratorem danych i opisem, w dowolnym z trzynastu języków.
Blokada cookiesinjectGuard() redefiniuje document.cookie, więc plik cookie bez zgody zostaje odrzucony już przy zapisie, a nie usunięty jakiś czas po tym, jak został ustawiony.
Polityki jako danegetPolicy({ format }) zwraca politykę cookies, politykę prywatności lub tabelę plików cookie w markdownie, z datą wygenerowania. Wyrenderuj ją tak, jak Twój stack renderuje markdown.
Consent Mode v2 i GPCsetupGoogleConsentMode() wysyła wszystkie cztery sygnały Google, domyślnie z odmową i z aktualizacją po decyzji. isGPCEnabled() odczytuje Global Privacy Control przeglądarki.
Buildy bez pobierania w runtimekatla pull zapisuje spis plików cookie, polityki i blokadę do .katla/, więc build może dostarczyć je jako zasoby statyczne i nic nie pobierać przy wyświetleniu strony.
Bez frameworkaKlient to zwykły obiekt oparty na fetch i zdarzeniach window. Punkty wejścia dla Reacta i Next.js są zbudowane na nim, a Vue, Svelte i czysty JavaScript wywołują go bezpośrednio.
CORE WEB VITALS
Ciasteczka się kruszą. Twoje SEO nie musi.
Headless znaczy dokładnie to: bez interfejsu, bez arkusza stylów, bez fontu i bez drugiego żądania, żeby cokolwiek z tego pobrać. 4 KB transferu za blokadę i API zgody, a po wciągnięciu do buildu przez katla pull nie ma nawet żą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 TypeScript
- Czy muszę budować własny baner?
- Tylko jeśli chcesz. Punkt wejścia dla Reacta zawiera CookieBanner i CookieCatalog bez stylów, a hostowany widget Katli to jeden tag script. Samo SDK celowo niczego nie renderuje.
- Czy działa poza przeglądarką?
- getCookies() i getPolicy() to zwykłe wywołania fetch i działają wszędzie tam, gdzie działa fetch, także w Node i środowiskach edge. injectGuard() i onConsentChange() potrzebują DOM, bo sama decyzja zapada w przeglądarce.
- A Vue, Svelte albo zupełnie bez frameworka?
- Klient nie zależy od żadnego frameworka, więc działa we wszystkich. Reacta importują tylko punkty wejścia dla Reacta i Next.js, a nic nie zmusza Cię do ich importowania.
- Skąd pochodzą dane o plikach cookie?
- Ze skanowania Twojej własnej strony, serwowane z CDN i cache’owane na brzegu sieci. To te same odpowiedzi, które czyta widget. Cache jest czyszczony, gdy skanowanie lub zmiana klasyfikacji coś zmieni, więc nigdy nie jest to kopia, którą musisz synchronizować.
Jedna zależność, a zgoda ma typy.
Darmowy plan skanuje Twoją stronę na TypeScript i generuje politykę cookies, bez podawania karty.