Cookie-Banner in WordPress ohne Plugin einbinden

Alle Beiträge

Um in WordPress ein Cookie-Banner ohne Plugin einzubinden, fügen Sie das Script Ihres Consent-Tools über ein Child-Theme in den Head der Website ein: eine kurze Funktion in dessen functions.php, eingehängt in wp_head mit Priorität 1. So wird es vor den Scripts ausgegeben, die WordPress in die Warteschlange stellt, und übersteht Theme-Updates. Fügen Sie es nie in die header.php des Parent-Themes ein, denn das nächste Update löscht es.

Was heißt „ohne Plugin“ eigentlich?

Damit ist eines von zwei Dingen gemeint. Manche wollen kein Consent-Plugin mit eigenen Einstellungsseiten, Datenbanktabellen und Update-Zyklus. Andere wollen gar kein Plugin, nicht einmal ein kleines Tool, um Code in den Header einzufügen. Beides geht, und die Methode unten erfüllt die strengere Variante.

Worauf Sie nicht verzichten können, ist das Consent-Tool selbst. Ein Banner aus reinem HTML und CSS zeigt einen Hinweis. Solange es die Entscheidung nicht speichert, Scripts nicht zurückhält, bis der Besucher entschieden hat, und nicht den Consent-Status setzt, den die Google-Tags lesen, sammelt es nichts, womit Ihre Tags arbeiten können. Genau das erledigt eine Consent-Management-Plattform, und in WordPress ist der schlankeste Weg dorthin ein einziges gehostetes Script im Head.

Unsere eigene WordPress-Installationsanleitung nutzt ein Tool für Header-Snippets, weil das für die meisten Websites der schnellste Weg ist. Der Weg über das Child-Theme erledigt dasselbe, ohne dass Sie etwas zusätzlich installieren.

Wo gehört das Script in WordPress hin?

Es gibt vier Stellen, an denen Leute es einfügen. Nur zwei davon halten.

• Die header.php des Parent-Themes. Der Weg, den die meisten Tutorials beschreiben, über Design und den Theme-Datei-Editor. Das funktioniert bis zum nächsten Theme-Update. Dann wird die Datei ersetzt, und das Banner ist weg.
• Die functions.php eines Child-Themes. Übersteht Updates des Parent-Themes und lässt Sie bestimmen, an welcher Stelle im Head das Script ausgegeben wird. Diesen Weg empfehlen wir.
• Ein Feld für Header-Code in den Theme-Einstellungen. Manche Themes bieten eines. Es übersteht Updates, aber keinen Wechsel zu einem anderen Theme, und Sie können seine Position gegenüber anderen Scripts im Head nicht steuern.
• Das Template eines Block-Themes. Block-Themes haben keine header.php, und der Header im Website-Editor ist Seiteninhalt, nicht der Head des Dokuments. Nutzen Sie auch hier den Child-Theme-Hook.

Wie binden Sie es mit einem Child-Theme ein?

Sechs Schritte. Planen Sie beim ersten Mal eine halbe Stunde ein, das meiste davon für die Prüfung am Ende.

1. Vollständiges Script aus Ihrem Consent-Tool kopieren

   Übernehmen Sie das Installations-Snippet genau so aus dem Dashboard Ihres Consent-Tools, wie es dort steht, inklusive Site-ID und Data-Attributen. Wer es abtippt, verliert dabei Attribute.

2. Child-Theme anlegen und aktivieren

   Ein Child-Theme ist ein kleiner Ordner mit einer style.css, die Ihr aktuelles Theme als Parent angibt, plus einer eigenen functions.php. WordPress lädt es über dem Parent-Theme, und Updates des Parent-Themes lassen es unangetastet. Aktivieren Sie es, bevor Sie etwas ergänzen.

3. Script in wp_head mit Priorität 1 ausgeben

   Ergänzen Sie in der functions.php des Child-Themes eine Funktion, die das Script-Tag per echo ausgibt, und hängen Sie sie mit add_action in wp_head ein, mit Priorität 1. WordPress gibt die Scripts in der Warteschlange bei Priorität 9 aus, Priorität 1 setzt das Consent-Script also davor.

4. Altes Banner entfernen und Script von der Optimierung ausnehmen

   Deaktivieren Sie ein bisher genutztes Consent-Plugin, damit nur ein Tool die Consent-Mode-Standardwerte setzt. Wenn ein Caching- oder Performance-Plugin JavaScript zusammenfasst, aufschiebt oder verzögert, setzen Sie das Consent-Script auf dessen Ausschlussliste.

5. Alle Caches leeren

   Leeren Sie den Seiten-Cache, einen eventuellen Server-Cache und das CDN. Eine gecachte Seite liefert weiter den Head von vor Ihrer Änderung aus. Dann wirkt es, als funktioniere das Banner nicht, obwohl es die Seite nur noch nicht erreicht hat.

6. Live-Seite vor und nach einer Entscheidung prüfen

   Öffnen Sie die Website in einem privaten Fenster aus einer Region, in der eine Einwilligung nötig ist. Im Seitenquelltext sollte das Consent-Script vor jeder gtag.js- oder googletagmanager.com-Anfrage stehen. Filtern Sie im Netzwerk-Panel nach collect: Vor einer Entscheidung gibt es im einfachen Modus keine Anfrage, im erweiterten Modus eine mit gcs=G100. Klicken Sie auf „Alle akzeptieren“, dann sollte die nächste Anfrage gcs=G111 enthalten. Die vollständige Checkliste finden Sie unter Cookie-Banner vor dem Livegang testen.

Warum ist die Ladereihenfolge wichtig?

Die Google-Tags lesen den Consent-Status in dem Moment, in dem sie ausgeführt werden. Googles Anleitung zur Einrichtung von Consent Mode verlangt, dass der Standardstatus gesetzt ist, bevor ein Befehl Messdaten sendet. Wird das Google-Tag zuerst ausgegeben, kann seine erste Anfrage rausgehen, bevor es überhaupt einen Standardwert gibt. In Regionen mit Einwilligungspflicht wird diese Anfrage dann gesendet, als hätte niemand gefragt.

In WordPress kommt das Google-Tag oft über ein Plugin, und ein Plugin, das sein Script in die Warteschlange stellt, lässt es mit den anderen bei Priorität 9 ausgeben. Ein Consent-Script, das mit der Standardpriorität 10 eingehängt ist (die bekommen Sie, wenn Sie die Zahl weglassen), wird erst danach ausgegeben. Dieses eine fehlende Argument ist ein häufiger Grund, warum ein korrekt konfiguriertes Banner trotzdem Tags zeigt, die vor der Einwilligung feuern. Manche Plugins geben ihr eigenes Tag zusätzlich bei Priorität 1 aus. Wenn der Seitenquelltext eines davon vor dem Consent-Script zeigt, nehmen Sie eine niedrigere Zahl wie 0. Zwei weitere Dinge können die Reihenfolge verschieben, nachdem Sie sie festgelegt haben: ein Theme, das ein Script direkt in header.php oberhalb von wp_head() schreibt, und ein Optimierungs-Plugin, das Scripts bis zur ersten Interaktion des Besuchers verzögert. Die Prüfung des Seitenquelltexts in Schritt 6 deckt alle drei Fälle auf.

Laufen Ihre Mess-Tags stattdessen über Google Tag Manager, wird die Reihenfolge im Container festgelegt. Legen Sie das Consent-Tool als Tag mit dem Trigger Consent Initialization an, wie es der Tag-Manager-Weg in unserer WordPress-Anleitung zeigt, und lassen Sie das Container-Snippet selbst wie bisher im Head.

So geht Velo damit um

Velo in WordPress ist eine einzige Script-Zeile, ohne Consent-Plugin, das Sie installieren oder aktualisieren müssen. Das Script setzt die Consent-Mode-Standardwerte für Regionen mit Einwilligungspflicht sofort beim Start auf „denied“, deshalb ist der oben beschriebene Child-Theme-Hook die richtige Stelle. Prüfen Sie die Reihenfolge auf der Live-Seite wie in Schritt 6, denn andere Plugins können sich trotzdem davor schieben.