bookingkit überträgt alle wichtigen Buchungs-Events per postMessage in den dataLayer deiner Website. Das bedeutet, du kannst diese Events über Google Tag Manager an Meta Pixel (Facebook Pixel) weiterleiten – ohne dass du einen separaten Pixel-Code direkt im bookingkit-Widget einbetten musst.
Voraussetzungen
Google Tag Manager (GTM) ist auf allen Seiten deiner Website installiert, einschließlich der Seite mit dem bookingkit-Widget.
Deine GTM Container-ID ist in bookingkit unter Verkaufen → Checkout-Konfiguration → Tracking hinterlegt.
Du hast eine Meta Pixel-ID aus deinem Meta Business Manager-Konto.
Die Einstellung „Erfolgsseiten-Weiterleitung aktivieren" ist in bookingkit aktiv (erforderlich, damit das purchase-Event auf deiner Domain ausgelöst wird).
Wie bookingkit Events an deine Seite sendet Wenn das bookingkit-Widget über die Standard-JavaScript-Integration eingebettet ist (nicht als iFrame), kommuniziert es per postMessage mit deiner Seite. GTM liest diese Events aus dem dataLayer und kann sie an beliebige Tags weiterleiten – auch an Meta Pixel.
Wichtig: Wenn das Widget als iFrame eingebettet ist, können postMessage-Events auf einigen Browsern – insbesondere auf Mobilgeräten – nicht zuverlässig an den dataLayer deiner Hauptseite weitergegeben werden. Verwende die Standard-JavaScript-Einbindung, um vollständiges Event-Tracking sicherzustellen.
Schritt 1 – Meta Pixel Basiscode über GTM installieren
Gehe in GTM zu Tags → Neu.
Wähle als Tag-Typ Benutzerdefiniertes HTML.
Füge deinen Meta Pixel Basiscode ein (verfügbar im Meta Events Manager → Neue Datenquelle hinzufügen → Web).
Setze den Trigger auf Alle Seiten.
Benenne den Tag (z. B. „Meta Pixel – Basiscode") und speichere ihn.
Schritt 2 – Trigger für bookingkit Events einrichten bookingkit überträgt folgende GA4-E-Commerce-Events in den dataLayer: page_view, add_to_cart, add_payment_info und purchase. Um sie als GTM-Trigger zu nutzen:
Gehe in GTM zu Trigger → Neu.
Wähle als Triggertyp Benutzerdefiniertes Ereignis.
Trage den genauen Event-Namen ein (z. B. purchase).
Speichere den Trigger.
Wiederhole dies für jeden Event, den du erfassen möchtest (z. B. add_to_cart, add_payment_info).
Schritt 3 – Meta Pixel Event-Tags erstellen
Gehe in GTM zu Tags → Neu.
Wähle als Tag-Typ Benutzerdefiniertes HTML.
Füge den Meta Pixel Event-Code für das jeweilige Event ein. Beispiel für einen Kauf:
fbq('track', 'Purchase', {value: {{dlv - value}}, currency: {{dlv - currency}}});Setze den Trigger auf den entsprechenden bookingkit Custom Event-Trigger aus Schritt 2.
Benenne den Tag (z. B. „Meta Pixel – Purchase") und speichere ihn.
Wiederhole dies für weitere Events (z. B. AddToCart).
Schritt 4 – Veröffentlichen und testen
Klicke in GTM auf Senden und veröffentliche deinen Container.
Nutze den GTM-Vorschaumodus, um zu prüfen, ob die Meta Pixel-Tags bei den richtigen Schritten auslösen (Widget-Ansicht, In den Warenkorb, Kauf).
Verwende die Browser-Erweiterung Meta Pixel Helper, um zu bestätigen, dass die Events in Meta ankommen.
Fehlerbehebung
purchase-Event wird nicht ausgelöst: Prüfe, ob „Erfolgsseiten-Weiterleitung aktivieren" in bookingkit aktiv ist. Ohne diese Einstellung erreicht das purchase-Event möglicherweise nicht den dataLayer deiner Domain.
Events fehlen auf Mobilgeräten: Stelle sicher, dass das Widget per JavaScript eingebettet ist (nicht als iFrame). iFrame-Einbettungen blockieren die postMessage-Kommunikation auf einigen mobilen Browsern.
Doppelte Events: Entferne alle direkt eingebetteten Pixel-Codes von deiner Website – verwende ausschließlich die GTM-verwaltete Version, um Doppelzählungen zu vermeiden.