Tracking Hubspot Meetings Scheduler events (iframe) via GTM

Tracking iframed content via a Google Tag Manager container on the parent page, can be notoriously difficult. Not because of Google Tag Manager, mind you, but because iframes is The Devil’s Work™️.

Luckily there’s a solution, when trying to tie Hubspot’s Meetings Scheduler form and your tracking tool of choice together, and your best friend here is the standard window.postMessage method, which can solve the problem for you.

How to track iframe events in Hubspots Meetings Scheduler form

What you need to do on your website

Find the embed code ind your Hubspot portal, and add it on the page where you want the form to appear. You find the Meetings Scheduler here:

Portal > Library > Meetings Scheduler

Then hover over the form you would like to embed, click “Action”, then “Embed”:

The “Embed Widget” popup will now show, and your code snippet will be available. Copy, and send to your web developer:

What you need to do in your Google Tag Manager (or any other Tag Management System)

Go to your Google Tag Manager container, create a new tag, and copy/paste the following code:

window.addEventListener('message', function(event) {
  // Remember to change the origin lookup to match your form server (usually 'meetings-eu.hubspot.com' or something like that).
  if (event.origin !== 'https://meetings-eu.hubspot.com') {
    return false;
  }

  if (event.data.meetingBookSucceeded === true) {
    dataLayer.push({'event': 'meeting_booked'});
    if ({{Debug Mode}} === true) {
      console.debug('meeting_booked');
    }
  }

  if (event.data === 'readyForConsentListener') {
    dataLayer.push({'event': 'meeting_scheduler_loaded'});
    if ({{Debug Mode}} === true) {
      console.debug('meeting_scheduler_loaded');
    }
  }
});Code language: JavaScript (javascript)

Note that there are two checks in the script:

1. meetingBookSucceded listens for an event that the meeting has been book (probably your conversion). It pushes the event meeting_booked to GTM’s dataLayer, and sends a debug message to the console if the GTM container is in Debug Mode.
2. readyForConsentListener listens for when the Meetings Scheduler is loaded, and ready to recieve user input, at which point it sends the event meeting_scheduler_loaded to GTM’s dataLayer and (like with the meeting_booked event) sends a debug message to the console if the GTM container is in Debug Mode.

You can either set the listener to fire on any page view, or limit it by only loading it on pages where the Meetings Scheduler is embedded. How to do the latter depend on how your site is coded, and how your GTM container is set up.

Happy coding 😊