Das RocketLead Formular-Widget löst Events aus, die Sie für Pixel-Tracking (Meta, TikTok, Google Ads) und Analytics-Integration erfassen können.
Verfügbare Events
Event | Beschreibung | Wichtige Felder |
| Formular geladen | formId, studioId |
| Schritt-Navigation | formId, step |
| Feld-Interaktion | formId, fieldId |
| Absendung gestartet | formId |
| Absendung erfolgreich | formId, submissionId, formData, bookingSlot |
| Absendung fehlgeschlagen | formId, errorCode |
| Buchungs-Slot ausgewählt | formId, fieldId, slotKey |
JavaScript Event-Listener
Fügen Sie dieses Script auf Ihrer Seite hinzu, um Formular-Absendungen zu erfassen:
document.addEventListener('rl:form:submit:success', (e) => {
const { formId, submissionId, formData, bookingSlot } = e.detail;
// formData enthält die abgesendeten Feldwerte
// z.B. { email: '[email protected]', firstName: 'Max', phone: '+49123456789' }
// bookingSlot enthält Buchungsdetails (falls das Formular einen Buchungskalender hat)
// z.B. { appointmentTypeId: '...', startDateTime: '2024-01-15T10:00:00Z', ... }
});
Meta Pixel Integration
document.addEventListener('rl:form:submit:success', (e) => {
const { formId, submissionId, formData } = e.detail;
// Lead-Event tracken
fbq('track', 'Lead', {
content_name: formId,
external_id: submissionId, // für Deduplizierung
});
// Enhanced Matching (für bessere Attribution)
fbq('init', 'YOUR_PIXEL_ID', {
em: formData.email,
ph: formData.phone,
fn: formData.firstName,
});
});
TikTok Pixel Integration
document.addEventListener('rl:form:submit:success', (e) => {
const { formId, formData } = e.detail;
ttq.track('SubmitForm', {
content_id: formId,
email: formData.email,
phone_number: formData.phone,
});
});
Google Ads Enhanced Conversions
document.addEventListener('rl:form:submit:success', (e) => {
const { submissionId, formData } = e.detail;
gtag('event', 'conversion', {
send_to: 'AW-XXXXX/XXXXX',
transaction_id: submissionId,
user_data: {
email: formData.email,
phone_number: formData.phone,
}
});
});
Google Tag Manager (GTM)
Events werden automatisch an window.dataLayer gepusht:
{
event: 'rl:form:submit:success',
formId: 'abc-123',
studioId: 'studio-456',
submissionId: 'sub-789',
formData: {
email: '[email protected]',
firstName: 'Max',
phone: '+49123456789'
},
bookingSlot: {
appointmentTypeId: 'apt-123',
calendarId: 'cal-456',
startDateTime: '2024-01-15T10:00:00Z',
endDateTime: '2024-01-15T10:30:00Z'
}
}
GTM Einrichtung
Erstellen Sie einen Custom Event Trigger für
rl:form:submit:successErstellen Sie Data Layer Variables für
formData.email,formData.phone, etc.Verwenden Sie diese Variablen in Ihren Meta/TikTok/Google Ads Tags
Mehrere Events überwachen
const trackableEvents = [
'rl:form:view',
'rl:form:submit:success',
'rl:form:submit:error'
];trackableEvents.forEach(eventName => {
document.addEventListener(eventName, (e) => {
console.log(eventName, e.detail);
});
});
Debug-Modus
Um alle Events während der Entwicklung in Echtzeit zu sehen, fügen Sie ein Debug-Panel hinzu:
<div data-rocketlead-form data-form-id="your-form-id"></div> <div data-debug-form-id="your-form-id"></div>
Das Debug-Panel zeigt Events mit Zeitstempeln und vollständigen Payloads an, sobald sie ausgelöst werden.