Listen to the message event
Iframes are most of the time difficult to track as it’s a completely different website and Google Tag Manager can’t interact with it.
Thing is, iframes can send messages to the parent window through the
postMessage() method. Learn more about the
When it comes to the Hubspot meeting scheduler, the communication between the iframe and the parent window has already been developed by Hubspot.
The good news is: you just have to listen for messages from the parent window (the one you have Google Tag Manager installed on).
Hubspot can send different types of messages to the parent window so we need to check if the received message corresponds to a new booked meeting.
Then we send an event to the data layer.
I also added contact information shared with hubspot to take advantage of first-party data and use it as unique hashed identifiers for marketing platforms such as Google Ads with enhanced conversions.
Add the Hubspot Meetings listener to your website
Add a custom HTML tag on Google Tag Manager and trigger the previous code on the page you have your hubspot meeting iframe.
Once the listener is configured, you should see the
hubspot_meeting event in the data layer when a new meeting is booked from the hubspot meetings scheduler.
Configure the data layer trigger
Now, we’re going to detect this data layer event (DLE) by setting up a custom event trigger.
Send an event to GA4 (example)
Then, from this data layer event, you can send the information to any marketing platforms you work with. Here, as an example, I’m going to send a
hubspot_meeting event to Google Analytics 4.
What if this doesn’t work for you?
The data structure of the message event received from hubspot may change over time, this is up to Hubspot.
In case the Hubspot meetings listener mentionned above doesn’t work for you, feel free to post a comment below, I’ll be glad to help you out on this.