Consentl auf Webflow

Den Consentl-Loader in den Head-Code von Webflow einfügen, die Auswahl an Webflow Analyze weitergeben und verstehen, was „nicht als erstes im Head“ bedeutet.

Loader als erstes im <head>: Nein – Einschränkungen lesen

Kann der Loader als erstes im <head> stehen? Nein. Webflow gibt den websiteweiten Head code am Ende des <head> aus, nach seinen eigenen Meta-Tags, CSS und kleinen Inline-Skripten. Code auf Seitenebene kommt nach dem websiteweiten Code. Siehe Einschränkungen.

Voraussetzungen

Ein kostenpflichtiger Site plan oder ein Workspace Core, Growth, Agency oder Freelancer. Auf einer kostenlosen Starter-Website ist der Tab „Custom code“ sichtbar, kann aber nicht gespeichert werden.
Ihr Consentl-Website-Schlüssel, auf der Seite Einrichtung Ihrer Website im Dashboard. Tragen Sie jeden Hostnamen, unter dem die Website läuft (Ihre eigene Domain und Ihre Adresse your-site.webflow.io), im Feld Domains ein; www. und die Domain ohne www zählen als dieselbe Website, www. muss also nicht separat hinzugefügt werden.

Was Ihr Consentl-Tarif abdeckt

Free: Banner, Einwilligungsprotokoll und nur manuelle Blockierung.
Pro: ergänzt Google Consent Mode v2.
Business: ergänzt die automatische Blockierung bekannter Tracker und die Blockierungsregeln, die Sie im Dashboard hinzufügen.

In den Tarifen Free und Pro werden nur Tags zurückgehalten, die Sie manuell markieren.

Installation

Öffnen Sie in Webflow die Website → Site settings → Custom code.
Fügen Sie unter Head code Folgendes in die erste Zeile ein, oberhalb von bereits vorhandenem Code:
```
<script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en"></script>
```
Ersetzen Sie SITE_KEY und en durch die Sprache Ihrer Website (siehe Mehrsprachige Websites). Wenn die Website auch die Consentl-Vorlage für GTM verwendet, hängen Sie &gcm=ext an die URL an, damit nur die Vorlage Consent-Mode-Befehle sendet.
Klicken Sie auf Save changes und dann auf Publish für Ihre webflow.io- und/oder eigene Domain.
Optional: Fügen Sie Ihrer Fußzeile einen Link „Cookie-Einstellungen“ hinzu: einen Link-Block mit der URL #consentl. Links, deren URL auf #consentl oder #consentl-preferences endet, und jedes Element mit dem Attribut data-consentl-open öffnen die Einstellungen.
Optional: Fügen Sie auf Ihrer Seite mit der Cookie-Richtlinie ein Embed-Element mit der Cookie-Erklärung hinzu:
```
<div data-consentl-declaration data-api="https://api.consentl.com" data-key="SITE_KEY" data-locale="en"></div>
<script src="https://api.consentl.com/v1/blocks.js" defer></script>
```
Verwenden Sie stattdessen data-consentl-request oder data-consentl-withdrawal für das Formular für Datenschutzanfragen oder das EU-Widerrufsformular. Das Widerrufsformular erfordert den Tarif Pro oder höher und muss im Dashboard aktiviert werden; andernfalls bleibt es leer.

Prüfen, ob es funktioniert

Öffnen Sie die veröffentlichte Website in einem privaten Fenster: Das Banner erscheint. Custom Code läuft nicht im Designer-Canvas. Im Preview- und Comment-Modus läuft er jedoch, daher kann das Banner auch dort erscheinen; der verlässliche Test ist die veröffentlichte Website.

Die Region des Besuchers ergibt sich aus seiner IP-Adresse: Consentl ermittelt das Land bei jedem Seitenaufruf im Arbeitsspeicher (nichts wird gespeichert) und wendet Ihre Dashboard-Regel dafür an. US-Bundesstaaten werden nicht unterschieden: Besucher aus den USA erhalten Ihre Regel für die gesamten USA oder, ohne eine solche, Ihre erste Regel für einen US-Bundesstaat. Ein unbekanntes Land erhält Ihre Regel für unbekannte Regionen (standardmäßig Opt-in).

Mehrsprachige Websites (Webflow Localization)

Seit dem 26. Juni 2026 können Sie mit Webflow Localization Custom Code für Head und Footer pro Locale festlegen. Fügen Sie den Loader in den Head-Code jeder Locale mit deren Sprache in &l= ein (zum Beispiel &l=de für die deutsche Locale). Jede Seite lädt dann eine Loader-URL, die auf jeder Seite dieser Locale gleich ist.

Wenn Sie ein Snippet für alle Locales bevorzugen, lassen Sie &l=… weg: Das Banner verwendet dann die Standardsprache der Website aus dem Dashboard.

Webflow Analyze / Optimize

Die eigenen Statistiken von Webflow haben einen separaten Einwilligungsschalter:

Setzen Sie Insights → Settings → Tracking auf Don't track by default und veröffentlichen Sie dann die Website. Die Einstellung wirkt erst nach dem Veröffentlichen.

Geben Sie die Consentl-Auswahl weiter, indem Sie Folgendes in den Footer code einfügen. Es wendet die aktuelle Auswahl bei jedem Laden der Seite an und folgt späteren Änderungen:

<script>
  (function () {
    function sync(c) {
      if (!c || !window.wf) return;
      wf.ready(function () {
        var want = c.analytics ? "allow" : "deny";
        if (wf.getUserTrackingChoice() === want) return;
        if (c.analytics) wf.allowUserTracking({ activate: true });
        else wf.denyUserTracking();
      });
    }
    if (window.Consentl) sync(window.Consentl.get());
    document.addEventListener("consentl:change", function (e) { sync(e.detail); });
  })();
</script>

Einschränkungen

Nicht als erstes im Head. Alles, was Webflow oberhalb des Head-Codes ausgibt, läuft vor Consentl. Dazu gehören native Integrationen unter Site settings → Apps & integrations (Google Analytics, Meta Pixel), die möglicherweise vor ihm eingefügt werden. Entfernen Sie diese Integrationen und laden Sie dieselben Tags über Google Tag Manager mit Consent Mode (ab Tarif Pro) oder als per Code geladene Tags im Head-Code unterhalb der Consentl-Zeile. Consentl hält erkannte Tracker zurück, die nach ihm geladen werden (ab Tarif Business); in den Tarifen Free und Pro werden nur manuell markierte Tags zurückgehalten.
Fest eingetragene Tags. Ein <script src>, <img>-Pixel oder <iframe>, das im Head-/Footer-Code oder einem Embed-Element steht, wird vom Browser abgerufen, bevor ein Skript es aufhalten kann, auch wenn Consentl seine Ausführung verhindert. Markieren Sie solche Tags manuell und entfernen Sie <noscript>-Pixel:
```
<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">
```
Per Code geladene Tags (GTM, der JavaScript-Loader eines Pixels) werden ohne Anfrage zurückgehalten, wenn die automatische Blockierung aktiv ist.
Jedes Custom-Code-Feld nimmt bis zu 50.000 Zeichen auf; der Loader ist eine Zeile.
Webflow hat kein integriertes Cookie-Banner, das abgeschaltet werden müsste. Entfernen Sie jede andere Banner-App.
Content Security Policy. Enterprise-Websites können Antwort-Header, einschließlich content-security-policy, unter Site settings → Publishing → Custom headers setzen. Wenn Sie einen setzen, erlauben Sie https://api.consentl.com wie in der Anleitung für Websites beschrieben. Ohne eigenen CSP-Header ist nichts zu ändern.

Kommen Sie nicht weiter? Schreiben Sie an support@consentl.com – wir antworten an Werktagen auf Englisch.