bookingkit pushes all key booking events into your website's dataLayer via postMessage. This means you can forward those events to Meta Pixel (Facebook Pixel) through Google Tag Manager — no separate pixel code needs to be embedded in the bookingkit widget itself.
Prerequisites
Google Tag Manager (GTM) is installed on all pages of your website, including the page with the bookingkit widget.
Your GTM Container ID is saved in bookingkit under Sell → Checkout configuration → Tracking.
You have a Meta Pixel ID from your Meta Business Manager account.
The "Enable Success Page redirect" setting is activated in bookingkit (required for the purchase event to fire on your domain).
How bookingkit sends events to your page
When the bookingkit widget is embedded using the standard JavaScript integration (not an iFrame), it communicates with your page via postMessage. GTM picks these events up from the dataLayer and can forward them to any tag — including Meta Pixel.
Important: if the widget is embedded as an iFrame, postMessage events cannot reliably reach your main page's dataLayer, especially on some mobile browsers. Use the standard JavaScript embed to ensure full event tracking.
Step 1 — Install the Meta Pixel base code via GTM
In GTM, go to Tags → New.
Choose Custom HTML as the tag type.
Paste your Meta Pixel base code (available from Meta Events Manager → Add New Data Source → Web).
Set the trigger to All Pages.
Name the tag (e.g. "Meta Pixel – Base Code") and Save.
Step 2 — Create triggers for bookingkit events
bookingkit pushes the following standard GA4 e-commerce events to the dataLayer: page_view, add_to_cart, add_payment_info, and purchase. To use them as GTM triggers:
In GTM, go to Triggers → New.
Choose Custom Event as the trigger type.
Enter the exact event name (e.g. purchase) in the Event Name field.
Save the trigger.
Repeat for each event you want to track (e.g. add_to_cart, add_payment_info).
Step 3 — Create Meta Pixel event tags
In GTM, go to Tags → New.
Choose Custom HTML as the tag type.
Add the Meta Pixel event code for the relevant event. Example for a purchase: fbq('track', 'Purchase', {value: {{dlv - value}}, currency: {{dlv - currency}}});
Set the trigger to the corresponding bookingkit Custom Event trigger you created in Step 2.
Name the tag (e.g. "Meta Pixel – Purchase") and Save.
Repeat for other events (e.g. AddToCart).
Step 4 — Publish and test
Click Submit in GTM and Publish your container.
Use the GTM Preview mode to verify that the Meta Pixel tags fire at the correct steps (widget view, add to cart, purchase).
Use the Meta Pixel Helper browser extension to confirm events are received in Meta.
Troubleshooting
Purchase event not firing: confirm that "Enable Success Page redirect" is active in bookingkit. Without it, the purchase event may not reach your domain's dataLayer.
Events missing on mobile: check that the widget is embedded via JavaScript (not iFrame). iFrame embeds block postMessage communication on some mobile browsers.
Duplicate events: remove any directly embedded pixel codes from your website or widget page — only use the GTM-managed version to avoid double-counting.