Track YouTube, Calendly, Typeform & HubSpot Embeds with GTM

Embeds (YouTube videos, Calendly bookings, Typeform surveys, HubSpot forms) are some of the most valuable interactions on a site, and some of the hardest to track. They run in someone else's iframe, so GTM can't see inside them. The trick is to listen for the messages each embed sends out. Here's the pattern, and how the popular ones work.

Why embeds are hard to track

An embed lives in a cross-origin <iframe>. Your GTM container can't read its DOM or its clicks, browser security forbids it. So you can't watch a Calendly booking the way you'd watch a button. Instead, most embeds emit events (usually via postMessage or their own JS SDK) that the parent page can listen for.

YouTube, the easy one

YouTube is the rare embed GTM handles natively. Enable the built-in YouTube Video trigger and GTM listens for play, pause, progress and complete with no custom code, as long as the embed allows the JS API. Fire a GA4 video_start / video_complete event off it.

Calendly, Typeform & friends, postMessage

Most embeds without a built-in trigger broadcast events via postMessage. You add a small listener (a Custom HTML tag) that filters for that embed's messages and pushes to the dataLayer.

// Listen for Calendly's postMessage events and forward to GTM
window.addEventListener('message', (e) => {
  if (e.data?.event && String(e.data.event).startsWith('calendly')) {
    if (e.data.event === 'calendly.event_scheduled') {
      window.dataLayer.push({ event: 'calendly_booking' });
    }
  }
});

Then a Custom Event trigger for calendly_booking fires your GA4 (and Google Ads) conversion. Typeform, Wistia and others follow the same shape, only the message names change.

HubSpot, Vimeo, SDK callbacks

Some embeds give you a JavaScript callback instead of raw messages. HubSpot forms expose onFormSubmitted; Vimeo and Wistia have player SDKs with play / ended events. You bind to the callback and push to the dataLayer, same idea, friendlier API.

// HubSpot form callback → dataLayer
window.addEventListener('message', (e) => {
  if (e.data?.type === 'hsFormCallback' && e.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({ event: 'hubspot_form_submit', form_id: e.data.id });
  }
});

Gotchas

• Check the origin. Validate e.origin in your listener so you only act on the real embed's messages.
• Enable the JS API. YouTube needs enablejsapi=1; some embeds need a setting toggled to emit events.
• Don't double-count conversions. A booking or form submit is often a conversion, give it a stable id and fire once.
• Embeds can load late. Attach listeners early so you don't miss the first events.