Hilfe · Anleitung 1

Snippet einbauen

Der Banner besteht aus einer einzigen Skriptzeile. Sie gehört ganz oben in den <head>, vor alle anderen Skripte. Nur dann kann das Auto-Blocking Tracker anhalten, die danach geladen werden.

Das Snippet

Im Dashboard unter Einbinden steht das fertige Snippet mit Ihrer Site-ID. Es sieht so aus:

<script src="https://consent.now4it.com/banner.js"
        data-site="IHRE_SITE_ID"
        data-blockingmode="auto"></script>

data-site: Ihre Site-ID aus dem Dashboard (beginnt mit s_).
data-blockingmode="auto": bekannte Dienste werden automatisch angehalten, bis die Person einwilligt. Dafür muss das Skript synchron und vor den Trackern stehen (kein async, kein defer).
data-blockingmode="manual": nur manuell markierte Skripte werden gesteuert; dann darf das Snippet auch async laden.
Optional: data-lang="fr" erzwingt eine Sprache, data-region="EU" eine Region, data-nonce="…" übergibt eine CSP-Nonce (siehe unten).

Google Consent Mode: Das Widget setzt beim Laden den Standard «alles verweigert» und aktualisiert die Signale nach der Entscheidung. Ein eigener Default-Block ist nicht nötig, solange das Snippet vor gtag.js oder dem Tag Manager steht.

Wo einfügen, je Plattform

Statisches HTML, eigene Vorlagen

In jeder Seite als erste Zeile im <head> direkt nach <meta charset>. Bei Vorlagen (Astro, Hugo, Eleventy, Next.js, Nuxt) ins Layout oder in die Head-Komponente, die alle Seiten teilen. Bei Next.js in app/layout.tsx als normales <script> im <head>, nicht über next/script mit Strategie afterInteractive.

WordPress

Am einfachsten mit dem WordPress-Plugin. Ohne Plugin: im Theme-Editor in header.php direkt nach <head>, oder über ein Header-Footer-Plugin mit Priorität «ganz oben».

Webflow

Project Settings → Custom Code → Head Code. Webflow lädt eigenen Code danach; das Snippet steht damit vor Analytics-Einbindungen, die Sie im Tag Manager oder im Head Code pflegen. Webflow-eigene Integrationen (Site Settings → Integrations) laden vor dem Head Code und lassen sich nicht anhalten; tragen Sie GA4 deshalb im Head Code oder im Tag Manager ein, nicht unter Integrations.

Squarespace

Settings → Advanced → Code Injection → Header. Squarespace lädt seine eigene Analyse vor dem Header-Code; sie zählt cookielos und braucht keine Einwilligung. Google Analytics tragen Sie am besten ebenfalls im Header-Code ein, nicht unter «External API Keys».

Shopify

Online Store → Themes → Edit code → layout/theme.liquid, direkt nach <head>. Shopify-Apps und die eingebaute Google-Anbindung laden über Shopifys eigene Pixel-Sandbox; für diese greift die Shopify-eigene Einwilligung (Customer Privacy). Der now4it-Banner deckt Ihr Theme und Skripte in theme.liquid ab.

Wix

Settings → Custom Code → Head, «Alle Seiten», Position «Head». Wix lädt seine Marketing-Integrationen ausserhalb Ihres Head-Codes; diese lassen sich von aussen nicht anhalten. Banner, Nachweis und Consent-Mode-Signale funktionieren trotzdem.

Jimdo, Hostpoint Sites, Site Creator

Nur möglich, wenn der Baukasten eigenen Head-Code erlaubt (Jimdo Creator: Einstellungen → Bearbeiten Head; bei Jimdo Dolphin und Hostpoint Sites nicht vorgesehen). Fragen Sie uns, wir prüfen Ihren Fall.

Manuell markieren, wo nötig

Auto-Blocking erkennt Dienste an ihrer Adresse. Inline-Skripte und unbekannte Dienste markieren Sie selbst: Typ auf text/plain, Kategorie als Attribut, Adresse in data-src.

<!-- externes Skript -->
<script type="text/plain" data-consent-category="analytics"
        data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

<!-- Inline-Skript -->
<script type="text/plain" data-consent-category="marketing">
  fbq('init', '123');
</script>

<!-- Video oder Karte mit Platzhalter -->
<iframe data-consent-category="marketing"
        data-src="https://www.youtube.com/embed/VIDEO"></iframe>

Kategorien-IDs finden Sie unter «Kategorien und Cookies» (Standard: functional, analytics, marketing). Mehr dazu in Auto-Blocking und Taggen.

Wiederöffnen-Link und Cookie-Tabelle

Besucher müssen ihre Entscheidung jederzeit ändern können. Der Banner zeigt dafür einen kleinen Knopf; zusätzlich empfehlen wir einen Link in der Fusszeile und die Cookie-Tabelle in der Datenschutzerklärung:

<a href="#" data-consent-open>Cookie-Einstellungen</a>

<div data-consent-declaration></div>

Die Tabelle füllt sich automatisch mit den Cookies aus Ihrer Konfiguration, in der Sprache des Besuchers.

Content Security Policy (CSP)

Setzt Ihre Website eine strikte CSP, erlauben Sie den Banner so:

script-src  'self' https://consent.now4it.com;
connect-src 'self' https://consent.now4it.com;
style-src   'self' 'unsafe-inline';   /* oder Nonce, siehe unten */
img-src     'self' data: https:;       /* falls Sie ein Logo im Banner zeigen */

Arbeiten Sie mit Nonces, geben Sie die Nonce dem Einbinde-Skript als normales nonce-Attribut (oder als data-nonce). Das Widget übernimmt sie auf sein Style-Element und auf alle Skripte, die es nach der Einwilligung aktiviert. Das WordPress-Plugin bietet dafür den Filter n4c_consent_script_attributes.

Prüfen, ob alles sitzt

Seite in einem privaten Fenster laden: Der Banner erscheint, noch bevor Tracker laden.
Seite mit ?n4c_debug=1 laden und die Browser-Konsole (F12) öffnen: Zeilen «blocked script» zeigen, was angehalten wurde.
Im Dashboard unter Scanner Ihre Adresse prüfen: Er meldet Tracker ohne Schutz und ob das Snippet an der richtigen Stelle steht.
Nach «Alle akzeptieren» in der Konsole: «activated script». Im Tab Netzwerk erscheinen jetzt die Tracker.
Optional den Monitor aktivieren (ab Pro): Er prüft täglich oder wöchentlich und mailt, wenn ein neues Skript ohne Schutz auftaucht.

Weiter: WordPress-Plugin · Auto-Blocking und Taggen · Zum Dashboard