Tracking booked meetings through Google Tag Manager

SOLVE
Highlighted
Occasional Contributor

I'd like to track booked meetings using GTM. I had a solution that was working until about a month ago: https://integrate.hubspot.com/t/help-with-gtm-trigger-firing-on-the-meeting-form-submit/2874/22

 

It appears that something recently changed within HubSpot's back end that prevents this method from working.

 

I reviewed the following resources but wasn't able to work it out from them.

https://community.hubspot.com/t5/Reporting-Analytics/Tracking-form-submissions-through-Google-Tag-Ma...

https://www.3whitehats.com/knowledge/tracking-hubspot-forms-google-tag-manager/

https://community.hubspot.com/t5/HubSpot-Ideas/Allow-for-conversion-tracking-with-Meetings-in-HubSpo...

https://www.hubspot.com/product-updates/meetings-integrates-better-with-the-hubspot-platform

https://gist.github.com/thomas88/a6ce89ee577ee3f8f5e6f8ed599e5a23

 

Anyone successfully tracking booked meetings using Google Tag Manager? Ridiculous that this functionality doesn't natively exist.

1 Accepted solution

Accepted Solutions
Highlighted
Esteemed Contributor | Diamond Partner

@cjsf2323 

 

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:

  1. This event listener needs to be installed on the page where the embed code for the scheduler is implemented.
  2. The code above doesn't actually do any tracking, thats up to you Smiley Very Happy
  3. 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. 
18 Replies 18
Highlighted
Community Manager

Hi @cjsf2323,

 

I wanted to tag some of the users from that conversation in; @troelsfeodor@derekcavaliero@antoinepotloc have you been able to use this functionality in recent months?

 

Thank you,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@jennysowyrda 

 

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 Smiley Very Happy

Highlighted
Esteemed Contributor | Diamond Partner

@cjsf2323 

 

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:

  1. This event listener needs to be installed on the page where the embed code for the scheduler is implemented.
  2. The code above doesn't actually do any tracking, thats up to you Smiley Very Happy
  3. 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. 
Highlighted
Occasional Contributor

Thanks @derekcavaliero.

 

For anyone who needs a more explicit walkthrough, here's my working GTM setup. First is a customer listener set to fire on your scheduling page

 

Screen Shot 2019-06-26 at 9.23.04 AM.png

 

I then have a Custom Event trigger

 

Screen Shot 2019-06-26 at 9.25.02 AM.png

 

that I use to trigger all my tags, e.g.

 

Screen Shot 2019-06-26 at 9.26.02 AM.png

 

Good luck!

Highlighted
Esteemed Contributor | Diamond Partner

Thanks @cjsf2323 

 

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.

Highlighted
New Contributor

That worked for me! THANKS!

Highlighted
New Contributor

I see you have this for Adwords, Google Analytics and Facebook do you know how to do this for Bing?

Reply
0 Upvotes
Highlighted
New Contributor

Hi there

 

I believe I have followed all the demonstrated steps:

1. create a listener tag

hubspotmeetinglistener-tag.PNG

 

2. create a custom event trigger

hubspotmeeting-trigger.PNG

 

3. create  a variable

hubspotmeeting-variable.PNG

 

4. create a Google Analytics tag for the form submission

hubspotmeeting-tag-analytics.PNG

 

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!

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@advaisorAG could you provide a link to the page where you are embedding the scheduler? 

Reply
0 Upvotes
Highlighted
New Contributor
Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@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>
Reply
0 Upvotes
Highlighted
New Contributor

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)hubspot-tag.png

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@advaisorAG Looking at your page it looks like you have the embed script inside another <iframe>

 

That won't work - you need to have the embed code directly implemented into the frame where your GTM container is loaded.

 

Screen Shot 2020-05-13 at 9.38.35 AM.png

 

Notice in the screenshot above that there is an <iframe> loading this url: https://www-advaisor-io.filesusr.com/html/8070f9_37321681de41cdf66e1586ac3637562f.html which is where the embed script is present.

 

This may be a Wix limitation - they do some pretty unconventional/unecessary things with their HTML markup. 

 

If Wix has an option to add a raw HTML block into a page - I'd try to implement the meeting embed code there instead of how you have it now.

Reply
0 Upvotes
Highlighted
New Contributor

Hi - I agree that this feature should be added. 

A main conversion metric for our business is booking meetings. 

You can have the user automatically forwarded to a "conversion success" page for any Hubspot Form but you cannot do the exact same thing for the meetings module. 

I do not understand how/why this was missed. 

Highlighted
New Contributor

Hi - does anyone already have a working solution for tracking form conversions through Google Tag Manager? 

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@marloessmit my accepted solution here works for the meeting scheduler - is that what you are referencing or are you speaking about the embedded HubSpot forms?

Reply
0 Upvotes
Highlighted
Esteemed Contributor | Diamond Partner

@apritchard-weev you can track conversions via event tracking if you are familiar with the concept inside of Google Analytics and other popular systems. You won't be able to do it via a destination based URL - but it can be done. We just launched a campaign on linkedIn and are successfully tracking meeting scheduler submissions.

 

If you need help - DM me and perhaps we could offer some assistance.

Highlighted
Occasional Contributor

Yes, you can track HubSpot Meeting conversions using GTM – that's exactly how we do it using the JavaScript event listener code to watch for the meeting event.

 

Here's some screenshots and code snippets for each ads platform, along with analytics:

 

http://modernmedia.io/hubspot-meetings-conversion-tracking/

 

–Anthony