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.
Tracking booked meetings through Google Tag Manager
SOLVE
@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.
Tracking booked meetings through Google Tag Manager
SOLVE
Hi there
I believe I have followed all the demonstrated steps:
1. create a listener tag
2. create a custom event trigger
3. create a variable
4. create a Google Analytics tag for the form submission
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!
Tracking booked meetings through Google Tag Manager
SOLVE
@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>
Tracking booked meetings through Google Tag Manager
SOLVE
Hi Derek
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)
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.