Can GTM track bookings inside the Microsoft Bookings iframe?

Why GTM is blind here#

GTM runs on your page's document. The Bookings iframe is a separate document on a different origin, so the browser's same-origin policy applies:

• DOM access is blocked. Scripts on your page can't query elements inside the frame, so selectors and Element Visibility on inner elements don't work.
• Events don't cross the frame boundary. Clicks and form submits inside the frame never reach GTM's listeners on your page.
• No postMessage events are documented. Some embeddable schedulers post a "booking succeeded" message to the parent page that you can forward to the dataLayer. HubSpot's meetingBookSucceeded is the common example. A December 2023 Tech Community post asked whether Bookings had anything similar. It got 650+ views and no replies, and Microsoft's documentation describes no such message.
• The confirmation stays inside the frame. Bookings doesn't redirect after booking, so the URL of your page never changes.

What GTM can track on your page#

You can measure behaviour around the iframe. It tells you about intent and engagement, not completed bookings.

1. Iframe in view. Add an Element Visibility trigger that uses a CSS selector for the iframe (for example iframe[src*="outlook.office"]), set to fire once per page, and send a GA4 event such as booking_widget_view.
2. Clicks that lead to Bookings. Use a Click trigger on "Book now" buttons and on outbound links to outlook.office.com, sent as booking_click.
3. First interaction with the iframe. When a visitor clicks into a cross-origin frame, the parent window loses focus. A Custom HTML tag can catch that moment:

<script>
(function () {
  var sent = false;
  window.addEventListener('blur', function () {
    setTimeout(function () {
      var el = document.activeElement;
      if (!sent && el && el.tagName === 'IFRAME' &&
          /outlook\.office(365)?\.com/.test(el.src || '')) {
        sent = true;
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ event: 'bookings_iframe_interaction' });
      }
    }, 0);
  });
})();
</script>

Fire this tag on the pages that contain the embed. Then create a Custom Event trigger for bookings_iframe_interaction and use it for a GA4 event tag. It records that someone started using the booking form. Switching browser tabs can also cause a blur, which is why the check on document.activeElement is there. Even so, treat this as an engagement metric.

Counting completed bookings anyway#

Confirmed bookings only exist on Microsoft's side, so you have to count them there. A Power Automate flow on the Bookings trigger When a appointment is Created can send a server-side event to GA4 or an ad platform. That route has limits (Preview connector, admin-only, 5 flows per mailbox, and RefID reports that affect attribution), explained in tracking Bookings conversions in GA4. For the full GTM container setup, including the tags above, see the GA4 and GTM guide.

Doing this with BookingsXP#

BookingsXP replaces the opaque iframe with a widget script that runs on your page and still books into your Microsoft Bookings page. Every step goes to window.dataLayer as a bookingsxp.-prefixed event, from widget_viewed and slot_selected through to booking_completed. In GTM you add a Custom Event trigger on bookingsxp.booking_completed. The payload includes the service, staff member, start time and booking ID, but no customer name or email. See analytics and embed options. BookingsXP is independent and not affiliated with or endorsed by Microsoft.