How to use Google Tag Manager

Our Marketing & Analytics add-on automatically tracks all booking events and sends them to Meta, Goo
gle Ads, and Google Analytics based on your configuration.

If you prefer to manage your tracking through Google Tag Manager, you simply have to install our boo
king widget on your website and leave all settings empty. The widget will automatically push all eve
nts to the dataLayer.

Why GTM can’t load directly on the booking page

For security reasons, it is not possible to load a custom Google Tag Manager container on the resOS-hosted booking page. GTM containers can execute arbitrary code, which would be a security risk on a shared platform.

Instead, resOS pushes events to the dataLayer and sends postMessage events that your website can capture.

Prerequisites

• The Marketing & Analytics add-on must be activated. See How to set up Marketing & Analytics.
• The resOS booking widget embedded on your own website (where GTM is already installed)

Option 1: Embed the widget on your website

If you embed the resOS booking widget on your website where GTM is already installed, booking events are automatically pushed to the dataLayer. No extra configuration is needed – your GTM triggers will pick them up.

dataLayer event format

Each booking step pushes an event to window.dataLayer:

{
  event: "ResosBookingComplete",
  event_category: "Resos",
  people: 4,
  date: "2026-04-15",
  time: "19:00",
  bookingId: "abc123",
  value: 1000
}

Event names

Example GTM trigger

Create a Custom Event trigger in GTM:

• Trigger type: Custom Event
• Event name: ResosComplete
• This trigger fires on: All Custom Events

Then attach it to your conversion tag (Google Ads, Meta CAPI, etc.).

Option 2: Listen for postMessage events (iframe)

If the booking widget is loaded in an iframe, events are sent to the parent window via postMessage. This works even without GTM.

postMessage format

{
  type: "ResosEventForwarder",
  data: {
    event: "ResosBookingComplete",
    num_guests: 4,
    booking_date: "2026-04-15",
    booking_time: "19:00",
    bookingId: "abc123",
    value: 1000,
    currency: "EUR"
  }
}

Example listener

Add this script to your website to capture booking events and push them to the dataLayer for GTM:

window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'ResosEventForwarder') {
    var eventData = event.data.data;

    // Push to dataLayer for GTM
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: eventData.event,
      ...eventData
    });
  }
});

Verify it worked

1. Open your website with the embedded booking widget
2. Open the browser console and run resos.debug() inside the widget iframe
3. Look for [dataLayer] and [postMessage] entries as you interact with the booking flow
4. In GTM, use Preview mode to verify that events appear in the debug panel

Related articles

• How to set up Marketing & Analytics
• How to set up Google Analytics 4 with resOS
• How to set up Google Ads conversion tracking with resOS

Still having issues?

Contact us at [email protected] and we’ll help you out.