Automatyczne polityki cookies i prywatności

Pisanie polityki cookies nie jest niczyim pomysłem na dobrą zabawę. Ręcznie robisz audyt plików cookie, piszesz ścianę tekstu prawniczego, tłumaczysz go, wklejasz na stronę i modlisz się, żeby nic się nie zmieniło. Spoiler: zawsze coś się zmienia. Programista dodaje nowy piksel analityczny, marketing wrzuca tag remarketingowy i Twoja starannie przygotowana polityka jest nieaktualna, zanim atrament zdąży wyschnąć.

Katla podchodzi do tego inaczej: Twoje polityki są generowane z Twoich faktycznych plików cookie, zeskanowanych, sklasyfikowanych i automatycznie aktualizowanych.

Trzy formaty, jedno źródło prawdy

Każda strona w Katli dostaje automatycznie generowane polityki w trzech formatach:

Format tabeli przydaje się szczególnie wtedy, gdy masz już politykę prywatności i potrzebujesz tylko dokładnej, zawsze aktualnej listy plików cookie na swojej stronie.

Osadzanie jednym fragmentem kodu

Najszybszy sposób na umieszczenie polityki na stronie to osadzenie przez JavaScript. Dodaj dwie linijki HTML:

<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

To wszystko. Skrypt pobiera najnowszą wersję polityki i renderuje ją w kontenerze. Gdy Twoje pliki cookie się zmienią, polityka zaktualizuje się automatycznie, bez ponownego wdrażania.

Wybór formatu

Dodaj parametr zapytania format, żeby określić, co zostanie wyrenderowane:

<!-- Full privacy + cookie policy (default) -->
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>
 
<!-- Cookie policy only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=cookie"></script>
 
<!-- Cookie table only -->
<script src="https://cdn.katla.app/{siteId}/policy.js?format=table"></script>

Ustawienie języka

Katla od razu obsługuje 13 lokalizacji: angielski, niemiecki, francuski, hiszpański, włoski, niderlandzki, portugalski, szwedzki, norweski, duński, polski i fiński. Język ustawisz parametrem zapytania:

<script src="https://cdn.katla.app/{siteId}/policy.js?locale=de-DE"></script>

Jeśli nie podasz języka, skrypt automatycznie wykryje język przeglądarki odwiedzającego, a gdy to się nie uda, użyje angielskiego.

Styl po Twojemu

Osadzenie renderuje czysty, semantyczny HTML: nagłówki, akapity, tabele i listy. Nie wstrzykuje żadnego narzuconego CSS, więc domyślnie dziedziczy istniejące style Twojej strony.

Jeśli chcesz mieć większą kontrolę, skonfiguruj window.KatlaPolicy przed załadowaniem skryptu, żeby przypisać klasy CSS lub style inline do każdego typu elementu.

Z Tailwindem lub klasami narzędziowymi

<script>
  window.KatlaPolicy = {
    classes: {
      wrapper: "prose prose-slate max-w-none",
      h1: "text-4xl font-bold mb-6",
      h2: "text-2xl font-semibold mt-8 mb-4",
      p: "text-gray-600 leading-relaxed mb-4",
      table: "w-full border-collapse",
      thead: "bg-gray-100",
      th: "text-left p-2 font-medium",
      td: "p-2 border-b",
      a: "text-blue-600 underline hover:text-blue-800",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Ze stylami inline

<script>
  window.KatlaPolicy = {
    styles: {
      h1: "font-size: 2rem; color: #111;",
      h2: "font-size: 1.5rem; margin-top: 2rem;",
      p: "color: #444; line-height: 1.6;",
      table: "width: 100%; border-collapse: collapse;",
      th: "text-align: left; padding: 8px; background: #f5f5f5;",
      td: "padding: 8px; border-bottom: 1px solid #eee;",
    }
  };
</script>
<div id="katla-policy"></div>
<script src="https://cdn.katla.app/{siteId}/policy.js"></script>

Możesz też połączyć oba sposoby: classes i styles są stosowane razem, gdy oba są ustawione dla tego samego elementu.

SDK, gdy chcesz pełnej kontroli

Jeśli budujesz w Reakcie (albo w dowolnym frameworku JavaScript), SDK daje Ci politykę jako surowy markdown, który możesz wyrenderować, jak tylko chcesz:

import { createKatlaClient } from "@katla/sdk";
 
const client = createKatlaClient({ siteId: "your-site-id" });
 
// Get the cookie table as markdown
const { markdown } = await client.getPolicy({
  locale: "en-GB",
  format: "table",
});

Komponent React

Pakiet @katla/sdk zawiera gotowy komponent React, który renderuje markdown z obsługą GitHub Flavored Markdown (tabele, przekreślenia itd.):

import { KatlaPolicy } from "@katla/sdk/react";
 
export function CookiePolicyPage({ markdown }: { markdown: string }) {
  return (
    <KatlaPolicy
      markdown={markdown}
      className="prose max-w-3xl mx-auto"
    />
  );
}

Ponieważ komponent przyjmuje standardowe nadpisania komponentów react-markdown, możesz podstawić komponenty z własnego design systemu:

<KatlaPolicy
  markdown={markdown}
  components={{
    h1: ({ children }) => <Heading size="xl">{children}</Heading>,
    table: ({ children }) => <Table variant="striped">{children}</Table>,
    a: ({ href, children }) => <Link href={href}>{children}</Link>,
  }}
/>

Bezpośrednie adresy URL do każdego zastosowania

Każda polityka jest też dostępna jako osobny plik, co przydaje się do linkowania, pobierania albo odczytywania z dowolnego backendu:

Wszystkie adresy URL przyjmują te same parametry zapytania locale i format. Użyj adresu z markdownem, żeby wciągnąć surową politykę do CMS-a, serwisu z dokumentacją albo aplikacji mobilnej. Użyj endpointu JSON, żeby zbudować w pełni własną logikę renderowania.

Zawsze dokładna, zawsze aktualna

Największa przewaga nad ręcznie pisanymi politykami polega na tym, że Twoja polityka odzwierciedla rzeczywistość. Katla skanuje Twoją stronę przeglądarką headless i wykrywa pliki cookie ustawiane przez JavaScript, a nie tylko przez nagłówki HTTP. Gdy plik cookie zostanie dodany lub usunięty, wygenerowana polityka zaktualizuje się, żeby to odzwierciedlić.

Koniec z nieaktualnymi politykami. Koniec z brakującymi plikami cookie. Koniec z lukami w zgodności z przepisami.

Zacznij

1. Zarejestruj się na katla.app i dodaj swoją stronę
2. Uruchom skanowanie, żeby wykryć i sklasyfikować każdy plik cookie
3. Uzupełnij dane firmy: nazwę, e-mail kontaktowy i opcjonalnie e-mail inspektora ochrony danych
4. Osadź politykę fragmentem kodu, przez SDK albo bezpośredni URL
5. Zapomnij o niej: Twoja polityka nadąża za zmianami na stronie

Masz dość ręcznego utrzymywania polityk cookies? Zacznij za darmo.