Track Hubspot Meetings iframe with GTM

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 postMessage() method.

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.

<script type="text/javascript"> 
    window.dataLayer = window.dataLayer || []; // makes sure the data layer variable is set
    window.addEventListener("message", function(event) { // listens to messages from iframes
        if(event.data.meetingBookSucceeded) { // checks if the received event is a new booked meeting
        dataLayer.push({ // sends an event to the data layer
            event: "hubspot_meeting",
            contact: event.data.meetingsPayload.bookingResponse.postResponse.contact
        });
        } 
    });
 /*
  * v0.1.0
  * Created by Data Marketing School at http://www.data-marketing-school.com
  * Written by https://www.linkedin.com/in/lucasrollin/
  */
</script>

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.