Tracking iframe-Embedded Calendars instead of button links

Tracking an embedded calendar link like Google Calendar (<iframe>) can be tricky because cross-domain security restrictions prevent standard click triggers from detecting user activity inside the frame.

To properly track conversions reliably for iframe embedded calendars, you'd need to follow this walkthrough:

How To Track iFrame Calendars

There are 3 options to achieve this properly and they range from a simple approaches to knowing how to work a bit with code. If you're confused on the code aspect, it's always a good option to speak with your web developer / designer.

• Focus/Click Lister on the Frame Wrapper

• Track booking confirmation

• Listen for PostMessage events

1st - Focus/Click Listener on the Frame Wrapper

In GTM an Element Visibility trigger can fire when the iframe scrolls into view. A common workaround is a window blur or focus listener. This detects when focus moves into the iframe.

1. Wrap your embedded <iframe> in a container <div> with a distinct ID (e.g <divid="calendar-wrapper">)

2. In GTM, create a Custom Javascript Listener or use an Element Visibility Trigger

3. Go to Triggers > New > Element Visibility

4. Set selection Method to ID, enter calendar-wrapper and set Minimum Percent Visible to 50%

Both measure engagement with the booking section rather than a confirmed click. So they should be treated as a softer signal and don't use them as your primary conversion for bidding

2nd - Track the Booking Confirmation (If You Have One)

The strongest option is to measure a completed booking, not just a click. Google's embedded calendar doesn't send booking events to your page, so you'd need a scheduling tool that supports it.

1. If you are using Google calendar though a scheduling wrapper (like Cal.com, Calendly or Hubspot connected to Google calendar), set up a Redirect URL after a successful booking.

2. Direct users to a custom confirmation page on your website (e.g., [yourwebsite.com/booking-confirmed]

3. In GA4, go to Admin > Events > Create Event

4. Set the event name to calendar_booking_success where page_location contains /booking-confirmed

5. Mark calendar_booking_success as a Key Event in GA4 and import it into Google Ads

3rd Option - Listen for PostMessage Events (Advanced)

This method captures iframe interaction events. If your booking tool fires Javascript postMessage events when an appointment is scheduled inside the iframe, create a custom HTML tag in GTM:

<script>

 window.addEventListener('message', function(e) {

   if (e.data.event === 'booking_completed') { // Adjust based on your tool's postMessage schema

     window.dataLayer.push({

       'event': 'iframe_calendar_booked'

     });

   }

 });

</script>

1. Set the trigger to All Pages

2. Create a Custom Event Trigger in GTM where the Event name is iframe_calendar_booked

3. Attach this Trigger to a GA4 Event Tag to record the conversion