FitConsent

By DIGITLOAD

Deutsch

Dokumentation

Auf dieser Seite

Finden Sie alles, was Sie für den Einstieg in FitConsent benötigen, von der Installation bis zur fortgeschrittenen Nutzung.

Einleitung

Willkommen bei der FitConsent-Dokumentation.

Was ist eine Consent Management Platform (CMP)?

Eine CMP ist ein Tool, das Websites dabei hilft, die Einwilligung der Nutzer zur Datenverarbeitung rechtmäßig einzuholen und zu verwalten – eine Anforderung von Datenschutzgesetzen wie der DSGVO in Europa und dem CCPA in Kalifornien. Sie ist die Technologie hinter den „Cookie-Bannern“, die Sie auf vielen Websites sehen.

FitConsent ist mehr als nur ein Banner. Es gibt Ihnen die Werkzeuge an die Hand, um nicht nur gesetzeskonform zu sein, sondern auch die Benutzererfahrung zu optimieren, Vertrauen aufzubauen und die Zustimmungsraten zu verbessern. Unser Dienst beinhaltet volle, automatische Unterstützung für Google Consent Mode V2 und Microsoft UET Consent Mode, um sicherzustellen, dass Ihre Analyse- und Marketing-Tags ihr Verhalten basierend auf der Nutzereinwilligung anpassen – entscheidend für datengesteuertes Marketing in einer datenschutzorientierten Welt.

Installation & Einrichtung

Die Integration von FitConsent ist schnell und einfach gestaltet. Sie müssen nur ein einziges Skript-Snippet im <head>-Bereich Ihrer Website hinzufügen. Dieses Skript kümmert sich um alles, von der Anzeige des Banners bis zur Verwaltung der Standardwerte für den Google- und Microsoft-Zustimmungsmodus.

Wichtige Voraussetzung: Consent Mode

Unser Skript richtet automatisch die notwendigen Standardeinstellungen für Google Consent Mode v2 und Microsoft UET Consent Mode ein. Dies ist entscheidend, damit Dienste wie Google Analytics und Microsoft Advertising datenschutzkonform funktionieren. Stellen Sie sicher, dass Sie dieses Skript so hoch wie möglich im <head>-Tag Ihrer Website platzieren, bevor alle anderen Skripte folgen, die Cookies verwenden könnten.

Direkte Einbettung

Für die direkte Installation kopieren Sie das folgende Codesnippet und fügen Sie es in den <head>-Abschnitt des HTML Ihrer Website ein. Es ist entscheidend, dass es so hoch wie möglich platziert wird, bevor andere Skripte, die Cookies setzen könnten (wie Google Analytics oder Microsoft UET), geladen werden.

<!-- FitConsent Banner Script -->
<script>
  // Define dataLayer and the gtag helper.
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Initialize Microsoft UET queue
  window.uetq = window.uetq || [];

  // Set default consent states for Google and Microsoft.
  // This MUST run before any other scripts using cookies.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
  
  window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
  });
</script>

<!-- Load your other scripts (e.g., Google Analytics, Microsoft UET) here -->
<!-- ... -->

<!-- Load FitConsent Banner to update consent based on user interaction -->
<script async defer src="https://app.fitconsent.com/api/banner?websiteId=YOUR_WEBSITE_ID"></script>
<!-- End FitConsent Banner Script -->

Google Tag Manager (Empfohlen)

Die Verwendung unserer Google Tag Manager (GTM) Community-Vorlage ist der empfohlene Weg, um FitConsent zu installieren. Sie verwaltet den Google Consent Mode v2 korrekt und stellt sicher, dass Tags basierend auf der Nutzereinwilligung ausgelöst werden.

Schritt 1: Consent Overview aktivieren (einmalige Einrichtung)
  • 1. Klicken Sie in Ihrem GTM-Arbeitsbereich auf den Tab „Admin“.
  • 2. Klicken Sie unter der Spalte „Container“ auf „Containereinstellungen“.
  • 3. Aktivieren Sie im Abschnitt „Zusätzliche Einstellungen“ das Kontrollkästchen „Consent Overview aktivieren“.
  • 4. Klicken Sie oben rechts auf „Speichern“.
Schritt 2: FitConsent-Vorlage hinzufügen
  • 1. Gehen Sie in der linken Seitenleiste zum Abschnitt „Vorlagen“.
  • 2. Klicken Sie im Feld „Tag-Vorlagen“ auf „Aus der Galerie suchen“.
  • 3. Suchen Sie nach „FitConsent“ und klicken Sie auf „Zum Arbeitsbereich hinzufügen“.
  • 4. Bestätigen Sie die Berechtigungen, um die Vorlage hinzuzufügen.
Schritt 3: Einen „Google Consent Default“-Tag erstellen
  • 1. Gehen Sie zu „Tags“ und klicken Sie auf „Neu“.
  • 2. Benennen Sie den Tag „FitConsent – Consent Default“.
  • 3. Klicken Sie auf „Tag-Konfiguration“ und wählen Sie „FitConsent“ aus der Liste.
  • 4. Wählen Sie im Dropdown-Menü „Tag-Typ“ die Option „Google Consent Default“. Dies legt die Standardeinstellungen für Google und Microsoft fest.
  • 5. Fügen Sie im Feld „FitConsent Website ID“ Ihre eindeutige Website-ID aus Ihrem Dashboard ein.
  • 6. Wählen Sie als Trigger die integrierte Option „Consent Initialization – All Pages“. Dies ist entscheidend.
  • 7. Speichern Sie den Tag.
Schritt 4: Den „FitConsent Banner Loader“-Tag erstellen
  • 1. Erstellen Sie einen weiteren „Neuen“ Tag. Benennen Sie ihn „FitConsent – Banner Loader“.
  • 2. Klicken Sie auf „Tag-Konfiguration“ und wählen Sie erneut „FitConsent“.
  • 3. Der „Tag-Typ“ sollte standardmäßig „FitConsent Banner Loader“ sein.
  • 4. Fügen Sie im Feld „FitConsent Website ID“ Ihre eindeutige Website-ID aus Ihrem Dashboard ein.
  • 5. Wählen Sie auch hier als Trigger „Consent Initialization – All Pages“.
  • 6. Speichern Sie den Tag.

Schritt 5: Ihren Google-Tag konfigurieren

Der letzte Schritt besteht darin, sicherzustellen, dass Ihr Haupt-Google-Tag (der, der Daten an Google Analytics sendet) ordnungsgemäß basierend auf der Nutzereinwilligung ausgelöst wird.

A) Wenn Sie bereits einen Google-Tag (z. B. „G-XXXXXXXXXX“) in Ihrem Container haben:
  • 1. Klicken Sie auf Ihren Google-Tag, um ihn zu bearbeiten.
  • 2. Gehen Sie zu „Erweiterte Einstellungen“ > „Consent-Einstellungen“.
  • 3. Stellen Sie sicher, dass „Keine zusätzliche Einwilligung erforderlich“ ausgewählt ist. Die FitConsent-Vorlage kümmert sich um die Einwilligungssignale für Sie.
  • 4. Speichern Sie die Änderungen an Ihrem Tag.
B) Wenn Sie noch keinen Google-Tag haben:
  • 1. Klicken Sie auf „Tags“ > „Neu“.
  • 2. Benennen Sie den Tag „Google Tag – GA4“ oder ähnlich.
  • 3. Wählen Sie für die „Tag-Konfiguration“ „Google-Tag“.
  • 4. Geben Sie Ihre GA4-Mess-ID in das Feld „Tag-ID“ ein (z. B. „G-XXXXXXXXXX“).
  • 5. Wählen Sie als „Trigger“ „Initialization – All Pages“.
  • 6. Gehen Sie zu „Erweiterte Einstellungen“ > „Consent-Einstellungen“ und stellen Sie sicher, dass „Keine zusätzliche Einwilligung erforderlich“ ausgewählt ist.
  • 7. Speichern Sie den Tag.
Schritt 6: Andere Skripte verwalten (z. B. Microsoft Clarity, Facebook Pixel)

Die Integration von FitConsent mit dem Google Consent Mode ermöglicht es Ihnen, jedes Drittanbieter-Skript über GTM zu verwalten. So würden Sie einen Tag wie Microsoft Clarity einrichten:

  • 1. Tag hinzufügen: Fügen Sie Ihren Drittanbieter-Tag zu GTM hinzu (entweder über eine Community-Vorlage oder als benutzerdefinierter HTML-Tag).
  • 2. Consent-Einstellungen konfigurieren: Bearbeiten Sie den Tag, gehen Sie zu „Erweiterte Einstellungen“ > „Consent-Einstellungen“.
  • 3. Einwilligungsprüfung hinzufügen: Wählen Sie „Zusätzliche Einwilligung erforderlich, damit der Tag ausgelöst wird“. Eine Tabelle wird angezeigt.
  • 4. Einwilligungstyp wählen: Klicken Sie auf „Erforderliche Einwilligung hinzufügen“ und wählen Sie den entsprechenden Einwilligungstyp. Für ein Analysetool wie Clarity würden Sie analytics_storage wählen. Für ein Marketing-Skript wie ein Facebook Pixel oder einen Microsoft UET-Tag könnten Sie sowohl ad_storage als auch analytics_storage hinzufügen.
  • 5. Trigger festlegen: Legen Sie den Tag-Trigger so fest, dass er bei Ihrem standardmäßigen Seitenansicht-Ereignis ausgelöst wird (z. B. „Initialization – All Pages“ oder ein benutzerdefiniertes „Page View“-Ereignis).

Jetzt prüft GTM automatisch den von FitConsent bereitgestellten Einwilligungsstatus. Der Microsoft Clarity-Tag wird nur ausgelöst, nachdem der Nutzer der Kategorie „Analytics“ in Ihrem Einwilligungsbanner zugestimmt hat, und ein UET-Tag wird nur ausgelöst, wenn „Marketing“ akzeptiert wird.

Klicken Sie abschließend auf „Senden“ und „Veröffentlichen“ Sie Ihren GTM-Container, um die Änderungen zu übernehmen.

FitConsent CMP WordPress Plugin

Integriert FitConsent mit WordPress und der WP Consent API für nahtlose Kompatibilität mit Google Site Kit.

Herunterladen von WordPress.org

FitConsent ist eine leistungsstarke und dennoch einfache Consent Management Platform (CMP), die Ihnen hilft, Datenschutzbestimmungen wie die DSGVO und den CCPA einzuhalten. Dieses Plugin macht es unglaublich einfach, das FitConsent-Banner zu Ihrer WordPress-Website hinzuzufügen. Am wichtigsten ist, dass es eine automatische und sofortige Kompatibilität mit der WP Consent API bietet, die der Standard ist, der von Google Site Kit verwendet wird.

Durch die Verwendung dieses Plugins können Sie den Zustimmungsmodus von Google Site Kit aktivieren und sicher sein, dass die Einwilligungsentscheidungen Ihrer Benutzer respektiert werden, was eine rechtskonforme und effektive Analyse und Anzeigenverfolgung ermöglicht.

Hauptfunktionen

  • Einfache Einrichtung: Geben Sie einfach Ihre FitConsent-Website-ID ein und das Plugin erledigt den Rest.
  • Bereit für Google Site Kit: Funktioniert nahtlos mit dem Zustimmungsmodus von Google Site Kit durch die Integration mit der WP Consent API.
  • Leichtgewichtig: Das Plugin ist schlank und belastet Ihre Website nicht unnötig.
  • Standardisierte Kommunikation: Stellt sicher, dass die Einwilligungssignale korrekt zwischen Ihrem Einwilligungsbanner und anderen Plugins übermittelt werden.

Installationsanleitung

Methode 1: Installation über das WordPress-Dashboard
  1. Melden Sie sich bei Ihrem WordPress-Dashboard an.
  2. Navigieren Sie zu Plugins > Neu hinzufügen.
  3. Geben Sie in die Suchleiste „FitConsent CMP“ ein und drücken Sie die Eingabetaste.
  4. Suchen Sie das Plugin „FitConsent CMP“ in den Suchergebnissen und klicken Sie auf Jetzt installieren.
  5. Klicken Sie nach der Installation auf Aktivieren.
Methode 2: Manuelle Installation via FTP
  1. Laden Sie das FitConsent CMP-Plugin von der offiziellen Quelle herunter.
  2. Entpacken Sie die heruntergeladene Datei, um den Ordner fitconsent-cmp zu extrahieren.
  3. Verbinden Sie sich mit dem Server Ihrer Website mithilfe eines FTP-Clients (z. B. FileZilla).
  4. Navigieren Sie zum Verzeichnis /wp-content/plugins/.
  5. Laden Sie den gesamten Ordner fitconsent-cmp in dieses Verzeichnis hoch.
  6. Gehen Sie zurück zu Ihrem WordPress-Dashboard, navigieren Sie zu Plugins > Installierte Plugins und klicken Sie bei „FitConsent CMP“ auf Aktivieren.

Konfiguration nach der Installation

  1. Gehen Sie in Ihrem WordPress-Dashboard zu Einstellungen > FitConsent.
  2. Finden Sie Ihre FitConsent-Website-ID in Ihrem FitConsent-Dashboard.
  3. Geben Sie diese ID in das dafür vorgesehene Feld ein und klicken Sie auf Änderungen speichern.

Integration mit Google Site Kit (falls zutreffend)

  1. Wenn Sie das Google Site Kit-Plugin verwenden, gehen Sie zu dessen Einstellungen.
  2. Stellen Sie sicher, dass die Option Zustimmungsmodus aktiviert ist.

Andere Plattformen (CMS)

Sie können FitConsent mit jeder Website oder jedem Content Management System (CMS) wie WordPress oder Shopify verwenden, das es Ihnen ermöglicht, benutzerdefinierten HTML- oder JavaScript-Code hinzuzufügen. Wir empfehlen Ihnen dringend, die Google Tag Manager-Integration zu verwenden, falls verfügbar, und den oben genannten GTM-Anweisungen zu folgen. Andernfalls können Sie die Methode der „Direkten Einbettung“ verwenden.

Konfigurieren Sie Ihr Banner

Passen Sie das Aussehen, den Inhalt und das Verhalten des Banners über Ihr Dashboard an.

Allgemeine Einstellungen

Framework: Wählen Sie die wichtigste Datenschutzbestimmung, die Sie einhalten müssen (z. B. DSGVO, CCPA, IAB TCF 2.2). Diese Wahl passt das Standardverhalten des Banners und die verfügbaren Optionen an, um sich an die Anforderungen dieses Frameworks anzupassen.

Geotargeting (Premium): Wählen Sie, ob das Banner nur Besuchern aus bestimmten Regionen, wie z. B. der EU, angezeigt werden soll.

Layout: Wählen Sie zwischen einem schwebenden Banner (an verschiedenen Positionen auf dem Bildschirm) oder einem zentrierten Dialog, der Ihren Inhalt überlagert.

Erscheinungsbild

Passen Sie die Farben, Schriftarten und die Höhenlage (Schatten) an, damit sie perfekt zum Aussehen und Gefühl Ihrer Marke passen.

Logo und Hintergrundbild: Sie können dem Banner auch das Logo Ihres Unternehmens oder sogar ein Hintergrundbild hinzufügen, um ein vollumfängliches Markenerlebnis zu schaffen.

Inhalt & Sprachen

Bearbeiten Sie den gesamten Text des Banners und des Präferenz-Modals. FitConsent unterstützt mehrere Sprachen, sodass Sie allen Ihren Nutzern eine native Erfahrung bieten können. Grundlegendes Markdown wird in den Haupttextfeldern unterstützt.

KI-gestützte Optimierung

Nutzen Sie unseren KI-gestützten Optimierer für Vorschläge zu Farben, Text und Layouts, die nachweislich die Zustimmungsraten basierend auf dem Inhalt Ihrer Website und Ihrer Zielgruppe erhöhen.

FitConsent kann eine detaillierte, sich automatisch aktualisierende Liste der Cookies und anderer Speicherlemente anzeigen, die Ihre Website verwendet. Dies wird oft auf einer Datenschutz-Seite platziert, um Ihren Nutzern volle Transparenz zu bieten.

Die Erklärung einbetten

Um die Cookie-Erklärung anzuzeigen, müssen Sie ein einfaches <div>-Element zu der Seite hinzufügen, auf der die Tabelle erscheinen soll, und dann unser Erklärungs-Skript einfügen. Das genaue Codesnippet für Ihre Website finden Sie auf dem Tab „Cookie-Erklärung“ Ihrer Website-Einstellungsseite.

Standard-HTML-Websites

Für Standard-HTML-Websites oder Websites, die mit einem CMS wie WordPress (ohne Headless-React-Frontend) erstellt wurden, können Sie das folgende Snippet direkt in das HTML Ihrer Seite einfügen.

Das Skript findet automatisch das <div> mit der ID fitconsent-declaration und fügt die Cookie-Tabelle dort ein.

<div id="fitconsent-declaration"></div>
<script async defer src="https://fitconsent.com/api/declaration.js"></script>
React- und Next.js-Websites

Um „Hydration-Fehler“ in React-basierten Frameworks wie Next.js zu vermeiden, ist es entscheidend, dass das Erklärungs-Skript die Seite nicht vor dem Ende des initialen Renderings von React auf der Client-Seite ändert.

Der empfohlene Weg, dies zu erreichen, ist die Erstellung einer dedizierten Client-Komponente, die das Skript mithilfe eines useEffect-Hooks lädt.

  1. Eine Client-Komponente erstellen

Erstellen Sie eine neue Komponentendatei, zum Beispiel StorageDeclarationEmbed.tsx. Stellen Sie sicher, dass Sie die Direktive "use client"; am Anfang einfügen.

'use client';

import { useEffect } from 'react';

type StorageDeclarationEmbedProps = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: StorageDeclarationEmbedProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId};
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      // Clean up the script when the component unmounts
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

2. Die Komponente auf Ihrer Seite verwenden

Sie können diese Komponente nun auf jeder Seite importieren und verwenden, z. B. auf Ihrer Datenschutz-Seite.

import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed'; // Adjust the import path

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Datenschutzrichtlinie</h1>
      {/* ... other content ... */}

      <h3>Speichererklärung</h3>
      <p>
        Zur vollständigen Transparenz finden Sie unten eine Liste der spezifischen Cookies und
        anderer Speicherlemente, die unser Dienst möglicherweise in Ihrem Browser platziert.
      </p>
      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />

      {/* ... other content ... */}
    </div>
  );
}

Dieser Ansatz stellt sicher, dass das Skript sicher auf der Client-Seite geladen und ausgeführt wird, um Konflikte mit dem React-Rendering-Lebenszyklus zu vermeiden.

Fortgeschrittene Nutzung

Nutzen Sie die Einwilligungsdaten und verstehen Sie das Banner-Verhalten.

Einwilligungsdaten auf Ihrer Website verwenden

Nachdem ein Nutzer mit dem Banner interagiert hat, speichert FitConsent seine Entscheidungen und Geolokalisierungsdaten in einem Cookie namens fitconsent_given. Sie können dieses Cookie auf der Client- oder Server-Seite lesen, um die Benutzererfahrung anzupassen.

Cookie-Struktur

Das Cookie enthält ein JSON-Objekt mit zwei Hauptschlüsseln: choices und geo.

choices: Ein Objekt, bei dem die Schlüssel die Einwilligungskategorien sind (z. B. marketing, analytics) und die Werte true oder false sind.

geo: Ein Objekt, das die geografischen Informationen des Nutzers (z. B. Ländercode, Bundesland) zum Zeitpunkt der Einwilligung enthält.

{
  "choices": {
    "marketing": true,
    "analytics": true
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}

Beispiel: Eine Komponente basierend auf der Einwilligung anzeigen

So könnten Sie ein spezielles Werbebanner nur Nutzern in Kalifornien anzeigen, die in Marketing-Cookies eingewilligt haben.

import { useState, useEffect } from 'react';

function PromotedFeatures() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('fitconsent_given='));

    if (cookie) {
      try {
        const consent = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
        // Example: Check if the user is in California and consented to marketing
        if (consent?.geo?.state === 'California' && consent?.choices?.marketing) {
          setShow(true);
        }
      } catch (e) {
        console.error('Error parsing FitConsent cookie', e);
      }
    }
  }, []);

  if (!show) {
    return null;
  }

  return (
    // Your component for users who consented to marketing
    <div>Special Promotion for California!</div>
  );
}
Automatische Spracherkennung

Das FitConsent-Banner erkennt automatisch die bevorzugte Sprache des Benutzers und zeigt die entsprechende Übersetzung an, wenn Sie eine bereitgestellt haben. Dieser Prozess folgt einer spezifischen Reihenfolge:

  • 1. Es prüft zuerst das lang-Attribut auf dem HTML-Tag Ihrer Website (z. B. <html lang=“de“>). Dies ist die zuverlässigste Methode.
  • 2. Wenn das lang-Attribut nicht vorhanden ist, wird die Spracheinstellung des Benutzer-Browsers (navigator.language) verwendet.
  • 3. Wenn keine der oben genannten Optionen mit den von Ihnen konfigurierten Sprachen übereinstimmt, wird auf Englisch (en) oder die erste Sprache in Ihrer ausgewählten Liste zurückgegriffen.
Best Practices

Für die besten Ergebnisse auf mehrsprachigen Websites stellen Sie sicher, dass das <html>-Tag Ihrer Seite korrekt die aktuelle Sprache widerspiegelt, die dem Benutzer angezeigt wird.