Reporting & Analytics

cjsf2323
Participant

Tracking booked meetings through Google Tag Manager

SOLVE

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
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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 😄
  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. 
Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

View solution in original post

33 Replies 33
JKazarian
Contributor

Tracking booked meetings through Google Tag Manager

SOLVE

 

We have embedded the Meeting Widget into a landing page on our website and sending traffic to that landing page from paid sources. Unfortunately, the Original Source for those leads is not being captured. We have the HubSpot JS installed on the Wordpress pages and other forms are tracking properly. However, the iframe embed for the Meeting Widget is not capturing the cookies tracked on those pages.

 

Has anyone found a solution for this? 

https://community.hubspot.com/t5/Lead-Capture-Tools/Meeting-Embed-Widget-Original-Source-Tracking/m-...

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@JKazarian The meeting widget will not "capture" any cookies unless you explicitly pass those values through as part of the embed url for the meeting on the page. But I don't think that should be impacting anything w/ conversion tracking issues.

 

If you are trying to setup "conversion tracking" for Google Ads/Facebook/LinkedIn etc... - the tracking needs to happen inside the page where the scheduler is embedded - you cannot fire any tracking scripts within those iframes.

 

This would be what you would need to get started down that road:

<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_booked'
    });
  }
  
});
</script>

 

This assumes you are using GTM for your tracking scripts (highly recommended) if you aren't - you'd need to change the script above to use the appropriate tracking script calls instead of the dataLayer push.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes
JKazarian
Contributor

Tracking booked meetings through Google Tag Manager

SOLVE

We've already configured tracking in GA so that we can see who fills out the form from within GA. That does NOT tell me if that lead turns into a paying customer. I need to be able to track where a lead came from in HubSpot so that I can see if a lead that came from LinkedIn, AdWords, Facebook, etc. ended up turning into a customer in HubSpot.

 

How can I get the referral source info into HubSpot for the meeting form that is embedded in a landing page on my website.

 

It sounds like that's what you were getting at with "The meeting widget will not "capture" any cookies unless you explicitly pass those values through as part of the embed url for the meeting on the page."

--> How can I explicitly pass those values to the HS iframe meeting scheduler? 

 

Thank you!!

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@JKazarian If you're using custom UTM tagging (I would highly suggest doing so) the meeting embed "should" pick those up from the embedded page URL.

 

If you need to pass the click identifiers into HubSpot properties - or explicitly set values - you need to send them through as key:value pairs as a query string on the meeting iframe whenever the iframe is loaded (or force a reload with javascript and append them after the fact).

So let's say you have a meeting embed script that looks like:

<div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/meetings/hello-world?embed=true"></div>
<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>

You'd want to dynamically append some query parameters into the data-src value in the <div> shown above. The parameter names you use should match the property api names. 

 

Taking the example further, lets say you want to send through a value from a cookie named "banana" (with an example value of "split") and you have a property in hubspot with an API name called "cookie_banana" you'd have to:

1. Fetch the value from the cookie (either via HubL or JavaScript)

2. Build a query string formated like so: &cookie_banana=split

3. Append that new query string to the data-src of the embed code.

 

This can get tricky though - there may be times where the meeting embed loads before the cookies are set in the page (this would be rare - but possible). In that event you'd need to create some sort of event to subscribe to load the scheduler only once your tracking scripts have loaded (but be careful since ad-blockers would cause your meetings tools to not load).

 

I've done this for a couple custom implementations of the meeting tool, it's very hacky - but it does work.

 

Hopefully that helps. I can't really provide too much "code" here as an example as it's a bit involved to handle all the edge cases you may run into.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
JKazarian
Contributor

Tracking booked meetings through Google Tag Manager

SOLVE

@Thank you!!!

0 Upvotes
RLundstrom
Participant

Tracking booked meetings through Google Tag Manager

SOLVE
This is a tricky one.
My friend Dan at Stape.io has it figured out, I think.
You might want to write and ask.
dan@stape.io

Please post if you figure it out.
We all want this.
0 Upvotes
CEdson
Member | Diamond Partner
Member | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

For all future users:

 

I got this taken care of with the following code:

 

<script>
window.addEventListener( 'message', function(event) {
  if ( event.data.meetingBookSucceeded ) {
            console.log("meeting booked! - pushing tag manager event now...");
    		window.dataLayer.push({ 'event': 'hubspot-meeting-booked' });
  }
});
</script>
0 Upvotes
anthonymm
Member

Tracking booked meetings through Google Tag Manager

SOLVE

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

Barnabé
Member

Tracking booked meetings through Google Tag Manager

SOLVE

Many thanks Anthony, it works perfectly ! 

 

- Barnabé

0 Upvotes
apritchard-weev
Participant

Tracking booked meetings through Google Tag Manager

SOLVE

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. 

derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
marloessmit
Member

Tracking booked meetings through Google Tag Manager

SOLVE

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

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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?

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes
jennysowyrda
Community Manager
Community Manager

Tracking booked meetings through Google Tag Manager

SOLVE

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

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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 😄

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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 😄
  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. 
Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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.


Hopefully this helps.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes
forgift
Participant | Elite Partner
Participant | Elite Partner

Tracking booked meetings through Google Tag Manager

SOLVE

Hello!

 

Can you tell me how to do this?

"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."

How to get at least the basic form data (firstname, lastname and email)?

Novos Conceitos
AraHarutyunyan
Member

Tracking booked meetings through Google Tag Manager

SOLVE

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

derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Tracking booked meetings through Google Tag Manager

SOLVE

@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).

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
0 Upvotes