The RocketLead form widget emits events that you can capture for pixel tracking (Meta, TikTok, Google Ads) and analytics integration.
Available Events
Event | Description | Key Fields |
| Form loaded | formId, studioId |
| Step navigation | formId, step |
| Field interaction | formId, fieldId |
| Submission started | formId |
| Submission successful | formId, submissionId, formData, bookingSlot |
| Submission failed | formId, errorCode |
| Booking slot selected | formId, fieldId, slotKey |
JavaScript Event Listeners
Add this script to your page to capture form submissions:
document.addEventListener('rl:form:submit:success', (e) => { const { formId, submissionId, formData, bookingSlot } = e.detail; // formData contains submitted field values // e.g. { email: '[email protected]', firstName: 'Max', phone: '+49123456789' } // bookingSlot contains booking details (if form has a booking calendar) // e.g. { appointmentTypeId: '...', startDateTime: '2024-01-15T10:00:00Z', ... } });
Meta Pixel Integration
document.addEventListener('rl:form:submit:success', (e) => { const { formId, submissionId, formData } = e.detail; // Track Lead event fbq('track', 'Lead', { content_name: formId, external_id: submissionId, // for deduplication }); // Enhanced Matching (for better 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 automatically push to window.dataLayer:
{ 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 Setup
Create a Custom Event trigger matching
rl:form:submit:successCreate Data Layer Variables for
formData.email,formData.phone, etc.Use these variables in your Meta/TikTok/Google Ads tags
Listening to Multiple Events
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 Mode
To see all events in real-time during development, add a debug panel:
<div data-rocketlead-form data-form-id="your-form-id"></div> <div data-debug-form-id="your-form-id"></div>
The debug panel displays events with timestamps and full payloads as they fire.
]]>