No I haven’t, and unfortunatley it is stopping us (our agency) from using/recommending it because we need the ability to track conversions in Google Analytics, Facebook, Bing, LinkedIn etc… because we do a lot of paid advertising efforts for our clients. If we can’t track something we’re 99.999% of the time going to find another solution or method where we can.
This could be solved fairly easily by allowing a user to specifiy a GTM container ID that would be used on the hosted pages for the scheduler tool. I’d be happy to explain what would need to be done to make this work with Google Tag Manager to solve the problems mulitple HubSpot community members have been having.
We’re Diamond Partners with HubSpot, and the easier you make it for us to sell and have our clients adopt your tools the better
Actually, looking at that post - it does appear that the solution in there will work - though the message in the event listener has changed.
<script>
window.addEventListener( 'message', function(event) {
if ( event.origin != 'https://app.hubspot.com' )
return false;
if ( event.data.meetingBookSucceeded ) {
// Fire your misc tracking code here... }
});
</script>
Original credit to @antoinepotloc for the original idea.
The only difference between his and my code above is that the event data key changed from event.data.meetingCreated to event.data.meetingBookSucceeded.
A couple few things you need to be aware of:
This event listener needs to be installed on the page where the embed code for the scheduler is implemented.
The code above doesn’t actually do any tracking, thats up to you
Window.postMessage() doesn’t work in older IE (< 10) so depending on your demographic/industry that may still be a problem. But something is better than nothing.
I would suggest to let that event listener run on all pages of your site though - that way if you embed a scheduler elsewhere it will work. The listener won’t hurt anything if it is set where the scheduler isn’t embedded.
But for some reason, however, when I test this in preview mode it only fires the listener, but not the Google Analytics tag once the meeting form is submitted.
Do you know what the problem could be? Thanks a lot for your help on this!
@advaisorAG HubSpot’s meetings tool doesn’t return a value in event.data.id for the meetings tool.
Also - you need to make sure that you’re using the HubSpot meeting embed and not manually iframing your hosted meetings page - tracking won’t work that way.
Lastly - give the following script a try in place of yours. Since the meetings tool isn’t a HubSpot form I created a separate GTM event ‘hubspot-meeting-success’. You can create a trigger using that event.
<script>
window.addEventListener( 'message', function(event) {
// Note, you need to have the meeting scheduler embedded on a page where this event listener is also active. Take a look at the domain of the iframe the scheduler is embedded through and make sure it matches this conditional check.
if ( event.origin != 'https://meetings.hubspot.com' )
return false;
// You'll need our GTM base code installed so that this dataLayer push triggers events to various platforms.
if ( event.data.meetingBookSucceeded ) {
window.dataLayer.push({
'event': 'hubspot-meeting-success'
});
}
});
</script>
Thanks a lot for your effort. Unfortunately, it still does not work. I have embedded the meeting code, tried your script for the listener and the new event name “event-meeting-success” for the trigger.
Also the Hubspot tag is already active on the page (see screenshot)
@derekcavaliero First, thank you for your generous support on this. I’ve been through lots of threads and you seem to be the one most knowledgeable on this topic.
I’m hoping you have figured this out.
But this solution is working to the extent that the events are firing, yes, but the data necessary to tune the algo’s isn’t being sent.
Basically what you need to do is build a custom hubspot module to embed a meeting into a page, but instead of using the default functitonality - you embed a hubspot form into the page to block access to the scheduler, that when submitted passes the field key:value pairs via a query string on the embed code. This will actually prefill the fields in the meeting tool, and you can then configure the meeting tool to automatically submit when the fields are all known (prefilled).
So in order to capture the user data (which I assume you are using for enhanced conversions in either Google Ads and/or Facebook) you would need to use the onFormSubmit() callback and push the data into the dataLayer to access whenever the meeting booking trigger fires.
^ all of that is a decent amount of work, honestly HubSpot should expose the data submittted through the meeting ttool in the event payload unfortuntately I don’t think we’re going to get that anytime soon.
I have a working demo of this that I could show you, if you are interested.
Hi @derekcavaliero,
We have a hubspot booking system which is not embedded into the wordpress website (here is the link) and the user is being redirected from the website.
All the solutions discussed here in the thread are related to cases where hubspot booking in embedded into the website.
Is there a way to add the GTM code into the hubsport scheduling page and use the custom listerener disucced here to track meeting booked?
Many thanks!
Ara
@AraHarutyunyan not really.
This could be possible using some sort of edge worker and modifying the HTML before returning it to the browser (something like Cloudflare workers).
But you’d need to be using your own hostname for referencing the meeting link, and you’d have to be using Cloudflare for a DNS provider + be paying for Workers + write all of the edge code to make it work. If you don’t have a fairly experienced developer on staff I’d avoid trying to do this.
Instead, I’d recommend just embedding the calendar on a page of your own WordPress site and intercept the postMessage event as described in this thread. There shouldn’t be any technical reason why you couldn’t embed the meeting into your own site with minimal effort (especially WordPress).
@derekcavaliero Thank you for your prompt reply. Appreciate it.
From what I understood embedding the scheduling system is the best solution in this case.
Many thanks,
Ara
@jennysowyrda Adding this here for the community - as HubSpot made some recent updates to the postMessage event that they emit when a meeting is booked that exposes more information than in the past:
<script>
window.addEventListener('message', function(message) {
var allowedOrigins = [
'https://meetings.hubspot.com'
];
if (allowedOrigins.indexOf(message.origin) === -1)
return;
if (!message.data.meetingBookSucceeded)
return;
var meetingId = message.data.meetingsPayload.userSlug;
var meetingDate = message.data.meetingsPayload.bookingResponse.event.dateString.split('-');
var _payload = {
event: 'hubspot.meeting_booked',
meeting: {
form_id: message.data.meetingsPayload.formGuid,
id: meetingId,
type: message.data.meetingsPayload.linkType,
day: meetingDate[2],
month: meetingDate[1],
year: meetingDate[0],
offline: message.data.meetingsPayload.offline
}
};
window.dataLayer.push(_payload);
});
</script>
If you add the above tag into your GTM container using a Custom HTML tag, and a Initialization - All Pages trigger, you can expect to see a dataLayer event hubspot.meeting_booked appear with a bunch of dataLayer variables you can reference as needed via custom dataLayer variable definitions in GTM.
Keep in mind, this will only work if you have the meeting link embedded into a page where you have a GTM container installed, it won’t work for meetings booked directly on meetings.hubspot.com or your own hostname.
On that last note, you might need to add another item to the allowedOrigins array at the top of the event listner if the iframe is being loaded from a different hostname (e.g. info.yourdomain.com and not meetings.hubspot.com).
Lastly, there are a bunch of other data points in the event payload as well - you can add a console.log(message.data.meetingsPayload); before the dataLayer.push() command to see other things you could access related to the booked meeting.
