Schnellstart

Cookiesh läuft mit einem einzigen Script-Tag. Laden Sie es vor allen anderen Tags der Seite, versehen Sie die Skripte, die eine Einwilligung brauchen, mit einer Kategorie, und Cookiesh zeigt jedem Besucher das passende Banner für seine Region, blockiert diese Skripte bis zur Zustimmung und speichert die Entscheidung. Die meisten Websites sind in unter fünf Minuten live.

Bevor Sie loslegen

Sie benötigen ein Cookiesh-Konto und eine Website. Öffnen Sie im Dashboard Domains → Add domain, geben Sie Ihre Domain ein und kopieren Sie die Site ID. Sie sieht so aus: ck_live_8f2a91.

Cookiesh ordnet alles vier Einwilligungskategorien zu:

Kategorie	Standard	Typische Verwendung
necessary	Immer aktiv	Sitzungen, Sicherheit, Lastverteilung, das Einwilligungs-Cookie selbst
preferences	Aus	Sprache, Design und andere gespeicherte Einstellungen
analytics	Aus	Produkt- und Traffic-Analyse
marketing	Aus	Werbung, Retargeting und Social-Media-Pixel

Führen Sie vor dem Livegang im Dashboard Ihren ersten Cookie-Scan durch. Cookiesh weiß dann, welche Skripte und Cookies zu welcher Kategorie gehören, und kann Ihr Banner vorausfüllen.

Installation mit HTML

Fügen Sie den Loader als erstes Skript im <head> ein, damit er vor allem ausgeführt wird, was Cookies setzt:

<head>
  <script
    src="https://sdk.cookiesh.eu/v1/cookiesh.js"
    data-site-id="ck_live_8f2a91"
    async
  ></script>
  <!-- Weitere Tags folgen darunter -->
</head>

Ändern Sie dann jedes Skript, das eine Einwilligung braucht, von type="text/javascript" auf type="text/plain" und ergänzen Sie eine data-cookiesh-Kategorie. Cookiesh setzt den Typ wieder zurück und führt das Skript aus, sobald der Besucher diese Kategorie erlaubt:

<script
  type="text/plain"
  data-cookiesh="analytics"
  src="https://analytics.example.com/script.js"
></script>

<script type="text/plain" data-cookiesh="marketing">
  // Inline-Skripte funktionieren genauso.
  initAdPixel();
</script>

Auch Iframes, etwa eingebettete Videos und Karten, lassen sich blockieren. Verwenden Sie data-cookiesh-src statt src, dann lädt Cookiesh sie nach der Einwilligung.

Installation mit Next.js

Installieren Sie das React-SDK:

npm install @cookiesh/react

Laden Sie das Skript in Ihrem Root-Layout mit der Strategie beforeInteractive, damit es vor anderen Skripten läuft, und umschließen Sie die App mit CookieshProvider:

// app/layout.tsx
import Script from 'next/script';
import { CookieshProvider } from '@cookiesh/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Script
          src="https://sdk.cookiesh.eu/v1/cookiesh.js"
          data-site-id={process.env.NEXT_PUBLIC_COOKIESH_SITE_ID}
          strategy="beforeInteractive"
        />
        <CookieshProvider>{children}</CookieshProvider>
      </body>
    </html>
  );
}

Rendern Sie einwilligungsabhängigen Code nur, wenn die Kategorie erlaubt ist. useConsent() rendert neu, sobald der Besucher seine Auswahl ändert:

// app/analytics.tsx
'use client';

import Script from 'next/script';
import { useConsent } from '@cookiesh/react';

export function Analytics() {
  const { analytics } = useConsent();
  if (!analytics) return null;

  return <Script src="https://analytics.example.com/script.js" strategy="afterInteractive" />;
}

Bei Produkten mit Login übergeben Sie userId an CookieshProvider, um die Entscheidung des Besuchers geräteübergreifend zu synchronisieren.

Installation mit Google Tag Manager

Die Community-Vorlage von Cookiesh setzt die Standardwerte für Google Consent Mode v2, bevor ein Tag ausgelöst wird, und aktualisiert sie, sobald der Besucher seine Wahl trifft.

1. Öffnen Sie in Ihrem GTM-Container Templates → Tag templates → Search gallery und fügen Sie Cookiesh CMP hinzu.
2. Erstellen Sie aus der Vorlage ein neues Tag und fügen Sie Ihre Site ID ein.
3. Setzen Sie den Trigger auf Consent Initialization – All Pages.
4. Wählen Sie für jede Region einen Standard-Einwilligungsstatus. Verwenden Sie denied für den EWR, das Vereinigte Königreich und die Schweiz.
5. Öffnen Sie bei jedem Google-Tag Advanced settings → Consent settings. Lassen Sie die integrierten Einwilligungsprüfungen aktiviert und verlangen Sie für Nicht-Google-Tags zusätzliche Einwilligungen.
6. Veröffentlichen Sie den Container.

Wenn Sie gtag.js ohne GTM laden, setzen Sie die Standardwerte selbst, und zwar vor dem Google-Tag:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
    analytics_storage: 'denied',
    wait_for_update: 500,
  });
</script>

Cookiesh sendet den passenden Aufruf gtag('consent', 'update', …), sobald der Besucher eine Auswahl trifft, und bei jedem weiteren Seitenaufruf.

Installation überprüfen

1. Öffnen Sie Ihre Website in einem privaten Fenster. Das Banner sollte erscheinen, und die Entwicklertools des Browsers sollten noch keine Analyse- oder Marketing-Cookies anzeigen.
2. Führen Sie Cookiesh.debug() in der Konsole aus. Es listet die erkannte Region, das aktive Banner, jedes blockierte Skript und den aktuellen Einwilligungsstatus auf.
3. Akzeptieren Sie nur Analyse und laden Sie die Seite neu. Analyse-Skripte laufen, Marketing-Skripte bleiben jedoch blockiert.
4. Prüfen Sie im Google Tag Assistant, ob der Tab Consent die Default- und Update-Ereignisse in der richtigen Reihenfolge zeigt.

Nächste Schritte

• Passen Sie das Banner an Ihre Marke an: siehe Banner anpassen.
• Prüfen Sie, wie Ihre Cookies klassifiziert und blockiert werden: siehe Cookie-Kategorien.
• Legen Sie Regionsregeln für DSGVO, CCPA und LGPD an: siehe Geo-Targeting-Regeln.
• Lesen Sie die Einwilligung in Ihrem eigenen Code aus und reagieren Sie darauf, mit der JavaScript-API und den Ereignissen.
• Lesen Sie im Blog praxisnahe Ratgeber zu den Anforderungen an die Einwilligung.