Schnellstart

Barefoot CMP in 3 einfachen Schritten einrichten. Keine technischen Kenntnisse erforderlich.

Hinweis: Du benötigst ein aktives Barefoot CMP-Konto. Registriere dich kostenlos, falls du noch kein Konto hast.

Schritt 1: Account erstellen

Melde dich im Dashboard an oder erstelle ein neues Konto. Nach der Registrierung erhältst du automatisch deine eindeutige CMP-ID. Diese ID ist essentiell für alle nachfolgenden Schritte.

Schritt 2: Website registrieren

Im Dashboard:

Klicke auf „Neue Website"
Gib die Domain deiner Website ein (z.B. www.beispiel.de)
Wähle die gewünschten Sprachen (Deutsch, Englisch, etc.)
Speichern – fertig! Du erhältst eine Website-spezifische ID

Schritt 3: Script einbinden

Kopiere diese einzelne Zeile Code und füge sie in den <head> deiner Website ein:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=DEINE_CMP_ID"></script>
        

DEINE_CMP_ID durch deine echte CMP-ID aus dem Dashboard ersetzen. Das war's – dein Cookie-Banner ist nun live!

Fertig! Das Banner sollte jetzt auf deiner Website sichtbar sein. Du kannst es im Dashboard jederzeit anpassen.

HTML/JavaScript Integration

Detaillierte Anleitung für die direkte Code-Integration in deine Website.

Basis-Integration

Die einfachste Methode: Eine einzige Script-Zeile im HTML-Head:

          HTML
          <!-- Barefoot CMP Loader -->
<script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID" async></script>
        

Wo wird der Code eingefügt?

Platziere das Script im <head>-Bereich deiner Website, vor allen anderen Scripts:

          HTML
          <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Meine Website</title>

  <!-- Barefoot CMP – IMMER ZUERST -->
  <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID"></script>

  <!-- Andere Scripts danach -->
  <script src="analytics.js"></script>
</head>
<body>
  <!-- Dein Inhalt -->
</body>
</html>
        

JavaScript-API

Nach dem Laden von Barefoot CMP steht eine globale API zur Verfügung:

          JAVASCRIPT
          // Consent-Status abrufen
if (window.barefoot) {
  const consent = window.barefoot.getConsent();
  console.log(consent);
}

// Auf Consent-Änderungen reagieren
window.addEventListener('barefoot-consent-changed', (e) => {
  console.log('Consent aktualisiert:', e.detail);
});
        

Query-Parameter

Du kannst das Loader-Script mit zusätzlichen Parametern konfigurieren:

Parameter	Wert	Beschreibung
`id`	`string` (erforderlich)	Deine CMP-ID aus dem Dashboard
`lang`	`de` \| `en`	Banner-Sprache (optional)
`position`	`bottom` \| `top`	Banner-Position (Standard: bottom)
`theme`	`light` \| `dark`	Design-Theme (Standard: light)

Beispiel mit Parametern:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID&lang=de&position=top&theme=dark"></script>
        

WordPress Integration

Barefoot CMP funktioniert perfekt mit WordPress – ohne Plugin nötig, oder mit unserem Plugin für noch einfachere Verwaltung.

Variante 1: Direkter Code (Theme Header)

Gehe im WordPress Dashboard zu Design → Theme-Dateien
Öffne die Datei header.php
Füge diesen Code direkt nach dem öffnenden <head>-Tag ein:

          PHP
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID" async></script>
        

Speichern und testen – Banner sollte sofort live sein

Variante 2: Ohne Theme bearbeiten (WP Plugin)

Im WordPress Dashboard: Plugins → Neues Plugin hinzufügen
Suche nach einem Code-Injektions-Plugin wie „Insert Headers and Footers"
Installiere und aktiviere es
Gehe zu Einstellungen → Insert Headers and Footers
Füge das Script im Feld „Scripts in <head>" ein
Speichern

Variante 3: WordPress Plugin (empfohlen)

Nutze unser offizielles Barefoot CMP WordPress Plugin für maximale Einfachheit:

Im WordPress Dashboard: Plugins → Neues Plugin hinzufügen
Suche nach „Barefoot CMP"
Installiere und aktiviere das Plugin
Gehe zu Einstellungen → Barefoot CMP
Trage deine CMP-ID ein
Speichern – fertig!

Vorteil des Plugins: CMP-ID zentral verwalten, automatische Updates, Dashboard-Integration.

WooCommerce Support

Barefoot CMP ist vollständig mit WooCommerce kompatibel. Das Banner blockiert Analytics und Marketing-Cookies automatisch, bis der Nutzer zustimmt. Google Consent Mode v2 ist bereits integriert.

Shopify Integration

Integrationsleitfaden für Shopify Online Stores mit und ohne Custom App.

Schritt für Schritt

Schritt 1: Theme-Editor öffnen

Gehe zu Verkaufskanäle → Online-Store → Themes
Klicke auf dein aktives Theme
Klicke auf Code bearbeiten

Schritt 2: theme.liquid bearbeiten

Öffne in der linken Seitenleiste layout/theme.liquid
Suche nach <head> (nicht </head>)
Füge folgende Zeile direkt danach ein:

          LIQUID
          <head>
  {%- comment -%}Barefoot CMP{%- endcomment -%}
  <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID" async></script>
        

Klicke auf Speichern
Besuche deine Website und überprüfe, ob das Banner erscheint

Facebook Pixel & Google Analytics

Wenn du Facebook Pixel oder Google Analytics in Shopify nutzt, achte darauf, dass sie NACH dem Barefoot CMP Script geladen werden. Barefoot CMP wird automatisch Consent Mode v2 für Google-Dienste setzen.

Hinweis: Pixel-IDs und Google-Codes sollten im Feld „Zusätzliche Scripts" in Shopify-Einstellungen eingefügt werden (NACH dem Barefoot CMP Script).

Weitere Plattformen

Webflow, Squarespace, Wix und andere Platform-as-a-Service Lösungen.

Webflow

Gehe zu Project Settings → Custom Code
Öffne den Tab Head Code
Füge ein:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID" async></script>
        

Speichern und publizieren

Squarespace

Klicke auf Settings (Zahnrad-Icon)
Gehe zu Advanced → Code Injection
Im Feld Header einfügen:

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID"></script>
        

Speichern

Wix

Gehe zu Settings (Zahnrad)
Wähle Advanced → Custom Code
Klicke auf Add Custom Code
Füge das Script ein und setze den Ort auf Head
Speichern und publizieren

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID"></script>
        

Shopware, Typo3, andere CMS

Für alle anderen Systeme gilt: Füge das Script im <head>-Bereich ein, idealerweise vor anderen Scripts. Wenn es für dein System kein spezifisches Plugin gibt, nutze die HTML-Integration wie oben beschrieben.

Google Tag Manager Integration

Professionelle Integration via GTM mit Custom Template und Consent Mode v2.

Warum GTM?

Mit Google Tag Manager kannst du:

Barefoot CMP zentral verwalten (ohne Code-Änderungen)
Consent Mode v2 automatisch mit allen Google-Diensten synchronisieren
Einfache A/B-Tests durchführen
Consent-Events tracken und auswerten

Setup-Anleitung

Schritt 1: Barefoot CMP Tag erstellen

Öffne dein Google Tag Manager Konto
Gehe zu Tags → Neuer Tag
Tag-Name: „Barefoot CMP"
Klicke auf Tag-Konfiguration
Wähle Custom HTML

          HTML
          <script src="https://cmp.barefoot-performance.com/v1/loader.js?id=YOUR_CMP_ID" async></script>
        

Schritt 2: Trigger setzen

Unter „Auslösung" klicke auf Trigger wählen
Wähle Page View – All Pages
Dies stellt sicher, dass Barefoot CMP auf jeder Seite lädt

Schritt 3: Tag speichern und testen

Klicke auf Speichern
Nutze die Preview-Funktion, um zu überprüfen
Wenn alles korrekt ist: Veröffentlichen

Consent Events mit GTM tracken

Barefoot CMP sendet automatisch Events an GTM-DataLayer. Du kannst diese für Analysen nutzen:

          JAVASCRIPT
          // GTM DataLayer erhält automatisch Consent-Events
dataLayer.push({
  event: 'barefoot_consent',
  analytics_storage: 'denied',
  ad_storage: 'granted'
});
        

Google Consent Mode v2 aktivieren

Barefoot CMP setzt Consent Mode v2 automatisch. Du musst nichts extra konfigurieren – es funktioniert sofort mit:

Google Ads
Google Analytics 4
Google Tag Manager
Alle anderen Google-Dienste

Wichtig: Stelle sicher, dass der Barefoot CMP Tag ZUERST auf der Seite lädt (vor GA4, Ads, etc.). Dies ist der Standardverhalten, wenn du oben folgt.

Banner anpassen

Design, Text und Verhalten des Cookie-Banners im Dashboard konfigurieren.

Banner-Einstellungen im Dashboard

Alle Banner-Anpassungen erfolgen im Barefoot CMP Dashboard. Keine Code-Änderungen nötig:

Gehe zu Dashboard → Websites
Klicke auf deine Website
Gehe zum Tab Banner Design

Anpassbare Elemente

1

Farben: Header, Buttons, Text anpassen

2

Texte: Banner-Meldung, Button-Beschriftung, Links

3

Position: Oben, unten, Seite (Corner)

4

Layout: Kompakt, Standard, erweitert

5

Cookie-Kategorien: Welche Kategorien anzeigen

6

Links: Datenschutz, Impressum, Cookie-Liste

Config-API

Für erweiterte Anpassungen bietet Barefoot CMP eine Config API. Alle Einstellungen sind auch über API abrufbar:

GET /v1/config/YOUR_CMP_ID

Dies gibt ein JSON-Objekt mit allen aktuellen Einstellungen zurück:

          JSON
          {
  "id": "YOUR_CMP_ID",
  "domain": "example.com",
  "banner": {
    "title": "Cookie-Einstellungen",
    "description": "Wir verwenden Cookies...",
    "position": "bottom",
    "primaryColor": "#2563eb",
    "fontFamily": "Inter"
  },
  "categories": [
    {
      "id": "necessary",
      "name": "Notwendig",
      "required": true
    },
    {
      "id": "analytics",
      "name": "Analytik",
      "required": false
    }
  ]
}
        

Mehrsprachige Banner

Barefoot CMP unterstützt automatische Sprach-Erkennung. Das Banner wird in der Sprache des Besuchers angezeigt, wenn verfügbar:

Deutsch (de)
Englisch (en)
Französisch (fr)
Spanisch (es)
Weitere Sprachen auf Anfrage

Du kannst die Standardsprache mit dem Query-Parameter lang=de im Loader-Script erzwingen.

Cookie-Kategorien

Verstehen und konfigurieren der Cookie-Kategorien nach DSGVO.

Was sind Cookie-Kategorien?

Cookie-Kategorien sind Gruppen von Cookies, basierend auf ihrem Zweck. Unter der DSGVO müssen Nutzer jedem Zweck separat zustimmen. Barefoot CMP kategorisiert Cookies automatisch:

1. Notwendig (Necessary)

Pflicht – Keine Zustimmung nötig

Diese Cookies sind essentiell für die Website-Funktionalität:

Session-Management
CSRF-Schutz
Load-Balancing
Shopping Cart

Google Consent Mode: security_storage: granted, functionality_storage: granted

2. Analytik (Analytics)

Optional – Zustimmung erforderlich

Dienen zum Verständnis von Website-Nutzung und Besucherverhalten:

Google Analytics
Hotjar Heatmaps
Matomo
Custom Analytics-Scripts

Google Consent Mode: analytics_storage: granted/denied

3. Marketing (Marketing)

Optional – Zustimmung erforderlich

Ermöglichen Werbung und Retargeting:

Google Ads
Facebook Pixel
LinkedIn Ads
Remarketing-Tags

Google Consent Mode: ad_storage: granted/denied, ad_user_data: granted/denied, ad_personalization: granted/denied

4. Funktional (Functional)

Optional – Zustimmung erforderlich

Verbessern die Website-Funktionalität:

Video-Player (YouTube, Vimeo)
Chat-Widgets
Formulare (gravityforms)
Maps-Integration

Google Consent Mode: functionality_storage: granted/denied

Cookie-Scan

Barefoot CMP scannt deine Website automatisch und kategorisiert alle Cookies aus einer Datenbank von 100+ bekannten Services. Der Scan läuft regelmäßig (je nach Plan täglich, wöchentlich oder monatlich).

So funktioniert's:

Im Dashboard: Cookies → Scan starten
Barefoot CMP lädt deine Website und analysiert alle Cookies
Jedes Cookie wird automatisch kategorisiert
Du kannst Kategorien manuell anpassen
Cookie-Details werden im Banner angezeigt

API-Referenz

Überblick über die wichtigsten API-Endpoints von Barefoot CMP.

Base URL

Alle API-Requests gehen an:

https://cmp.barefoot-performance.com/v1

Endpoints

1. Config abrufen

Hole alle Konfigurationseinstellungen für eine CMP:

GET /v1/config/:id

Parameter: id = deine CMP-ID

Beispiel: GET /v1/config/abc123

2. Consent senden

Speichere eine Consent-Entscheidung:

POST /v1/consent

Body:

          JSON
          {
  "cmpId": "YOUR_CMP_ID",
  "categories": {
    "necessary": true,
    "analytics": false,
    "marketing": true,
    "functional": false
  }
}
        

3. Banner Script laden

Dynamisches Laden des Banners:

GET /v1/banner.js

Query-Parameter:

id – deine CMP-ID (erforderlich)
lang – Sprache (z.B. de, en)
theme – dark oder light

4. Loader Script

Das Haupt-Loader-Script (das du einbindest):

GET /v1/loader.js?id=YOUR_CMP_ID

5. Geo-Lokalisierung

Erkenne die geografische Region des Besuchers:

GET /v1/geo

Rückgabe:

          JSON
          {
  "country": "DE",
  "region": "EU",
  "requiresConsent": true
}
        

Fehlerbehandlung

API-Fehler werden mit HTTP-Status-Codes zurückgegeben:

Status	Bedeutung
`200`	Erfolg
`400`	Ungültige Parameter
`401`	Authentifizierung erforderlich
`404`	Ressource nicht gefunden
`429`	Rate Limit überschritten

Rate Limiting

API-Requests sind auf 1.000 pro Minute pro IP begrenzt. Kostenlose Pläne auf 100 pro Minute.

Dokumentation & Support

Für detaillierte API-Dokumentation kontaktiere: info@barefoot-creative.com

Fehlerbehebung

Lösungen für häufige Probleme und Fehler.

Banner wird nicht angezeigt

Überprüfe Folgendes:
1. Ist das Script wirklich im <head> eingefügt? (Nicht im <body>)
2. Hast du YOUR_CMP_ID durch deine echte ID ersetzt?
3. Browser-Cache leeren (Strg+Shift+Del)
4. Prüfe die Browser-Konsole (F12 → Console) auf JavaScript-Fehler
5. Überprüfe, ob deine CMP-ID im Dashboard aktiviert ist

Wahrscheinliche Ursachen:
- JavaScript-Bibliotheks-Konflikt (jQuery, andere CMP)
- CSS-Konflikte mit deinem Theme
- Content-Security-Policy blockiert das Script

Lösung:
1. Prüfe Browser-Konsole auf Fehler
2. Deaktiviere temporär andere Scripts
3. Prüfe deine CSP-Header

Google Consent Mode funktioniert nicht

Überprüfe:
1. Barefoot CMP Script muss VOR GA4/Ads-Tag geladen werden
2. Google Tag Manager sollte nach Barefoot CMP geladen werden
3. Consent Mode v2 ist in der Admin-Ansicht von GA4/Google Ads aktiviert
4. Nutze Google Tag Assistant, um die Tags zu prüfen

Richtige Reihenfolge:
1. Barefoot CMP Loader
2. Google Tag Manager
3. GA4, Google Ads, etc.

WordPress-spezifische Fehler

Häufige Probleme:
- Script wurde in den falschen Theme-Dateien eingefügt
- WordPress-Caching-Plugin blockiert das Script
- HTTPS-Fehler (Script muss HTTPS sein)

Lösungsschritte:
1. Stelle sicher, dass du in header.php (nicht footer.php) einfügst
2. Leere alle WordPress-Caches (Admin, Plugin-Caches)
3. Prüfe in der Datei, ob das Script wirklich da ist
4. Nutze WordPress-Debug-Modus: Setze WP_DEBUG auf true in wp-config.php

Häufige Fehler:
- Andere CMP-Plugins installiert → Deinstalliere Cookiebot/CookieYes zuerst
- PHP-Version zu alt → Barefoot CMP benötigt PHP 7.4+
- Plugin-Kompatibilitätsfehler → Deaktiviere alle Plugins, aktiviere einzeln

So debuggst du:
1. Gehe zu Settings → Barefoot CMP
2. Überprüfe, ob die CMP-ID korrekt eingegeben ist
3. Prüfe WordPress-Logs: /wp-content/debug.log
4. Kontaktiere uns mit der Fehler-ID

Shopify-Fehler

Häufiger Fehler:
- Syntax-Fehler beim Einfügen des Scripts
- Script wurde an der falschen Stelle eingefügt

Richtig einfügen:
1. Öffne layout/theme.liquid
2. Suche nach <head> (öffnendes Tag)
3. Füge das Script direkt nach <head> ein
4. Stelle sicher, dass keine Zeichen gelöscht wurden
5. Speichern und prüfen

Performance-Probleme

Das ist normal, wenn:
- Es die erste Seite ist, auf die der User kommt (wird cachet)
- Das Banner gerade geladen wird

Performance-Tipps:
1. Nutze async Attribut im Script (Standard)
2. Prüfe deinen Hosting-Provider
3. Nutze ein CDN (Cloudflare, etc.)
4. Überprüfe andere Plugins/Scripts

Barefoot CMP selbst ist sehr leicht: nur ~25KB gzipped

Support kontaktieren

Wenn dein Problem nicht gelöst ist, kontaktiere uns:

Email: info@barefoot-creative.com
Dashboard: Support-Ticket im Support-Bereich
Inklusive: CMP-ID, Website-URL, Fehler-Beschreibung, Screenshot