Docs›Marketing tracking

Google Tag Manager Tracking in Mangobeds

3 min read

Google Tag Manager tracking in Mangobeds is for owners and agencies who manage all their tags in one place. When your booking form is embedded on your website, every step a guest takes is pushed into your website’s Tag Manager data layer. Build any tag you want on those steps, GA4, Meta, TikTok, LinkedIn or Google Ads, without adding anything in Mangobeds.

It is part of marketing tracking in Mangobeds. If you would rather not build tags yourself, connect Google Analytics or the Meta Pixel directly instead.

What You Need

Google Tag Manager on your website, and your booking form embedded with the embed code from Mangobeds. Nothing has to be switched on in Mangobeds: every booking form embedded this way pushes its steps into the page’s data layer. A form placed in a hand-made iframe, or opened on its own page at mangobeds.com, does not.

The Events in Your Data Layer

Each step arrives as a custom event whose name starts with mangobeds_, so none of the triggers you already have fires on it by accident:

  • mangobeds_search and mangobeds_view_item_list: a guest searches dates and sees the rooms that are free.
  • mangobeds_add_to_cart and mangobeds_remove_from_cart: a guest adds or removes a room or an extra.
  • mangobeds_begin_checkout: a guest reaches the details step.
  • mangobeds_add_payment_info: a guest clicks Book on a booking paid online.
  • mangobeds_purchase: the booking is created, just before the guest goes to the payment page.

Every event carries two objects. ecommerce holds the fields in Google’s GA4 ecommerce format: value, currency, items, and on the purchase transaction_id, coupon and affiliation. mangobeds holds the stay: start_date, end_date, nights and number_of_guests. A booking looks like this:

{
  event: "mangobeds_purchase",
  ecommerce: {
    transaction_id: "cmg8x2...",
    value: 1380,
    currency: "EUR",
    coupon: "SUMMER10",
    affiliation: "Your property",
    items: [
      { item_id: "...", item_name: "Double Room", item_category: "Accommodation", price: 1380, quantity: 1 }
    ]
  },
  mangobeds: { start_date: "2026-11-01", end_date: "2026-12-01", nights: 30, number_of_guests: 1 }
}

The value is the full booking amount: rooms plus extras, minus any coupon, in your property’s currency.

Send Bookings to GA4 With Google Tag Manager

Create the trigger. In Tag Manager add a trigger of type Custom Event with the event name mangobeds_purchase. For every step at once, use mangobeds_.* and tick Use regex matching.

Create the tag. Add a Google Analytics: GA4 Event tag with your Measurement ID and the event name purchase. Under More Settings, open Ecommerce, tick Send Ecommerce data and choose Data Layer as the source. The booking amount, currency, booking ID and rooms then reach GA4 as a normal purchase. Fire it on the trigger above and publish.

Add the stay details if you want them. Create Data Layer Variables named mangobeds.start_date, mangobeds.nights and so on, and add them to the tag as event parameters.

Send Bookings to Meta With Google Tag Manager

With your Meta Pixel base code already running on your website, add Data Layer Variables for ecommerce.value, ecommerce.currency and ecommerce.transaction_id. Then add a Custom HTML tag on the mangobeds_purchase trigger:

<script>
  fbq("track", "Purchase",
    { value: {{ecommerce.value}}, currency: "{{ecommerce.currency}}" },
    { eventID: "{{ecommerce.transaction_id}}" });
</script>

Use the names you gave your variables between the double braces. The same pattern works for the other steps, for example InitiateCheckout on mangobeds_begin_checkout.

Avoid Counting a Booking Twice

If you also entered your GA4 Measurement ID or Meta Pixel ID in the Marketing Tracking app, Mangobeds already sends to them. Do not build the same GA4 or Meta tag in Tag Manager as well, or each booking arrives twice. Pick one place for each tool.

Check That It Works

  • Use Preview mode: click Preview in Tag Manager, open the page where your booking form is embedded, and go through the form. The mangobeds_ events appear in the Tag Assistant timeline, and you can open each one to see its data layer.
  • Remember the steps: mangobeds_purchase is only pushed when a guest clicks Book.

For Developers

To handle the events in your own code instead, define window.MangobedsBookingWidgetOnTrackingEvent = function (name, parameters) { ... } on the page before the embed code. It receives every step with its GA4 name and parameters before anything is sent. Return false to stop Mangobeds from sending that event anywhere.