Cookie-Banner einbinden: WordPress, Shopify, TYPO3 und Co.

Ein Cookie-Banner wie Cookie2Go besteht aus einer einzigen Zeile, die Sie in Ihre Website einfügen. Wichtig ist nur die Position: Das Script muss als erstes Script im head stehen. Nur dann kann es andere Scripts und iFrames zurückhalten, bevor sie laden.

<script id="Cookie2Go" src="https://cookie2go.com/api/script/IHR-SCHLÜSSEL"></script>

Ihren persönlichen Schlüssel finden Sie in Cookie2Go unter *Einbindung*. Danach prüft die App auf Knopfdruck, ob das Script auf Ihrer Startseite gefunden wird.

WordPress

Für WordPress gibt es zwei einfache Wege.

Mit einem Snippet-Plugin: Plugins wie WPCode bieten ein Feld für Code im Header. Fügen Sie die Zeile dort ein und wählen Sie eine möglichst frühe Position.

Im Theme: Wenn Sie ein Child-Theme nutzen, fügen Sie in der functions.php eine Funktion hinzu, die das Script mit hoher Priorität in wp_head ausgibt:

add_action('wp_head', function () {
    echo '<script id="Cookie2Go" src="https://cookie2go.com/api/script/IHR-SCHLÜSSEL"></script>';
}, -1000);

Nutzen Sie ein Caching- oder Optimierungs-Plugin, nehmen Sie das Script von „JavaScript verzögern" und „Scripts zusammenfassen" aus. Sonst lädt es zu spät.

Shopify

Öffnen Sie unter *Onlineshop → Themes* das Menü *Code bearbeiten* und darin die Datei theme.liquid. Fügen Sie die Zeile direkt nach dem öffnenden <head>-Tag ein, vor {{ content_for_header }}. Beachten Sie, dass Shopify eine eigene Schnittstelle für Datenschutz-Einstellungen mitbringt, über die Shopify-eigene Funktionen und manche Apps gesteuert werden. Prüfen Sie nach der Einrichtung, welche Apps Daten vor der Einwilligung laden.

TYPO3

In TYPO3 binden Sie das Script über TypoScript im Setup Ihres Seiten-Templates ein, zum Beispiel über page.headerData mit einer niedrigen Nummer, damit es vor anderen Einträgen steht. Alternativ fügen Sie es direkt in das Fluid-Layout Ihres Site-Packages ein.

Shopware

In Shopware 6 erweitern Sie in Ihrem eigenen Theme das Template des head-Bereichs und setzen die Zeile an dessen Anfang. Shopware bringt einen eigenen Cookie-Hinweis mit, den Sie deaktivieren sollten, damit Besucher nicht zwei Banner sehen.

Eigene Website oder Single-Page-App

Bei einer eigenen Seite setzen Sie die Zeile als erstes Element in den head jeder Seite. Für React, Vue und Co. gilt dasselbe in der index.html. Über die JavaScript-API fragen Sie die Einwilligung im Code ab:

if (window.Cookie2Go && Cookie2Go.hasConsent('statistik')) {
    // Statistik starten
}
Cookie2Go.on('change', function (consent) { /* neu prüfen */ });

Eigene Scripts zurückhalten

Bekannte Dienste blockiert Cookie2Go automatisch. Eigene Scripts markieren Sie, indem Sie den Typ auf text/plain setzen und die Kategorie angeben. Nach der Einwilligung führt der Banner sie aus:

<script type="text/plain" data-c2g="statistik">
    // startet erst nach Zustimmung zu Statistik
</script>

Die Einbindung testen

1. Öffnen Sie Ihre Website in einem privaten Fenster.
2. Öffnen Sie die Entwicklertools (F12) und dort den Tab *Netzwerk*.
3. Laden Sie die Seite neu, ohne im Banner etwas zu wählen.
4. Es sollten keine Anfragen an Google Analytics, Meta oder andere Tracking-Dienste erscheinen.
5. Klicken Sie auf „Alle akzeptieren": Jetzt laden die Dienste.

Noch kein Konto? Die erste Domain ist bei Cookie2Go dauerhaft kostenlos.