Tracking Hubspot Chat Events with GA4

Developer Support APIs & Integrations
1

Hey everyone,

We recently transitioned from using the Qualified Chat Platform to HubSpot Chats. As part of this switch, we’re trying to recreate the tracking setup we had previously in Qualified+GA4.

Right now, we’re working on tracking three key interactions:

  1. Email Submitted through chat
  2. Meeting Booked through chat
  3. Chat Started

I’ve found some JS listeners made by community, but most of them track only Chat starts and checking whether there is assosciated contact with them.

Im looking for the best approach to capture those, especially the Email Submitted and Meeting Booked events properly in GA4 through HubSpot Chats. If anyone has experience with this or tips for setting up these events, I’d love your insights!

Thanks in advance!

2

Hey @Chris_Bronc! Thanks for your question. I’d like to invite some community members to the conversation – hey @Bryantworks @albertsg @ChrisoKlepke @louischausse, have you had any experience or success with this that you can share?

3

The short answer is:

The best approach to accurately track the advanced HubSpot Chat interactions like “Email Submitted through chat” and “Meeting Booked through chat” is to move beyond client-side JavaScript listeners and implement server-side tracking.

This involves configuring HubSpot to send real-time event data directly to a server environment, such as a container in Google Tag Manager Server-Side (hosted on Stape or Google Cloud Platform), which then forwards the clean, enriched data to GA4 using the Measurement Protocol.

This method is superior because it captures events reliably and can incorporate server-side data, ensuring complete and accurate attribution for your GA4 events like generate_lead and schedule.

The long answer is:

Your challenge in moving from a platform like Qualified, which may have had more direct GTM integration options, to HubSpot Chat is common.

While basic “Chat Started” events can often be tracked client-side using JavaScript listeners that observe the HubSpot chat iframe or local storage changes, capturing the more complex and valuable conversions like “Email Submitted through chat” and “Meeting Booked through chat” reliably with client-side code becomes very difficult.

These advanced conversions often happen inside an iframe or involve multi-step processes that client-side listeners can easily miss, leading to under-reporting in GA4.

The listeners you’ve found for “Chat starts” are a good start, but they won’t reliably capture the form submission or meeting booking within the chat window.

A much more robust and future-proof solution is to utilize the HubSpot API in conjunction with a server-side tagging environment (GTM Server-Side, hosted on Stape or Google Cloud Platform).

HubSpot is excellent at knowing exactly when a lead submits an email or books a meeting.

You can configure a HubSpot Workflow or use webhooks to fire a notification to your GTM Server-Side container immediately upon the completion of the Email Submitted or Meeting Booked event.

This notification would include a unique user identifier, such as a Client ID or User ID, which you would need to capture when the chat starts and pass into HubSpot.

The server-side container then receives the event, enriches it with the necessary user context and potentially even campaign data pulled via the Google Analytics Data API for historical context, and then sends a precise event payload to GA4 via the Measurement Protocol.

For “Email Submitted through chat,” you should use the GA4 standard event generate_lead.

For “Meeting Booked through chat,” you should use a custom name or the standard event schedule.

This server-side approach eliminates dependence on the user’s browser, ad blockers, or the complexity of the HubSpot iframe, ensuring you capture every critical conversion event accurately in GA4.

This comment was generated with the assistance of an AI tool, incorporating my expertise in conversion tracking :slightly_smiling_face: