How to set up measurement for a website with an iframe booking system

Short Answer

Iframe measurement is a problem mainly when the booking system is on another domain. The parent page usually cannot see inside a cross-origin iframe, so clicks or successful submissions cannot be measured reliably directly from the DOM. You need cooperation from the provider: postMessage, redirect to a thank-you page, webhook, or server event.

Why An Iframe Click Is Not Enough

When a booking system is embedded in an iframe, the parent website often only sees that the user clicked inside the iframe area. It does not see whether the user selected a time, filled in details, or completed the booking. With a cross-origin iframe, access to the content is restricted for security reasons.

Measuring an iframe click as a conversion is like measuring form opening instead of a real lead. For campaign optimization, it is a weak and misleading signal.

Option 1: Thank-You Page

The simplest option is to redirect the user to a thank-you page on your website after the booking is completed. The conversion event fires there. This works well if the provider lets you set a return URL and if the thank-you page cannot be easily visited without a booking.

The downside is that you may lose booking details, such as service type, branch, or value. These parameters can be added to the return URL, but it must be done securely and must not transfer sensitive data in an inappropriate way.

Option 2: postMessage

If the iframe provider can send a message to the parent window, you can use window.postMessage. After success, the booking system sends a message of type booking_success, and the parent page catches it, verifies the origin, and sends a dataLayer event.

Security is critical. Never respond to messages from any origin. Verify event.origin and the expected payload format.

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://rezervace.example.com') return;
  if (!event.data || event.data.type !== 'booking_success') return;

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'booking_success',
    booking_id: event.data.booking_id,
    service_type: event.data.service_type,
    value: event.data.value,
    currency: 'CZK'
  });
});

Option 3: Webhook Or Server Event

The most reliable option for a business result is a webhook from the booking system to your backend or server-side GTM. When the booking is created, the system sends a server event. It can be connected with a stored click ID, email, or another identifier according to measurement rules.

This option is more technically demanding, but it is more resilient to refreshes, browser tag blocking, and errors on the thank-you page. It also allows you to send only truly confirmed bookings.

Audit Questions For The Provider

Can the system set a return URL after completion? Can it pass booking_id and service type? Can it use postMessage? Can it send a webhook? Can UTM, GCLID, or an internal session ID be passed into the iframe? Where is consent stored? Is it possible to measure cancellations and booking changes? Without answers to these questions, you will be measuring by estimate.

FAQ

Frequently Asked Questions

Can GTM read values inside an iframe?

Is postMessage secure?

What is the best option?