Every booked demo looked like direct traffic — Calendly reset the session

The situation

A Canadian B2B SaaS for manufacturing companies was using Calendly embedded on their pricing page for demo bookings. GA4 showed 80% of demo bookings as "direct" traffic. Their sales team knew demos were coming from Google Ads and LinkedIn but the data said otherwise.

The problem

Calendly embeds run in an iframe from calendly.com. When a user selects a time slot and submits their information inside the Calendly iframe, a new browser context is created. Any redirect that happens after booking goes through calendly.com, stripping all UTMs and resetting the GA4 session. The GA4 session_id, client_id, and attribution context were all lost at the moment of booking.

What we did

1. Confirmed issue: GA4 session attribution in DebugView showed "direct" source immediately after Calendly interaction
2. Implemented Calendly event listener via GTM — window.addEventListener("message") catching calendly.event_scheduled postMessage
3. Pushed custom dataLayer event with stored UTM values (read from sessionStorage on page load) when Calendly booking confirmed
4. Fired GA4 generate_lead event with traffic source parameters from stored UTMs — preserving original attribution

Why it worked

Calendly's iframe architecture breaks GA4 session continuity because the booking action happens on calendly.com, not your domain. The Calendly postMessage API is the only way to intercept the booking event from within your page context. Storing UTMs in sessionStorage on page load and reading them at booking time is the standard pattern for preserving attribution through iframe booking widgets.