Live chat is a great way to provide support for your products or answer sales questions quickly. Live chat is different from a chatbot in that it connects a website user to a real human that can answer questions or deliver information quickly. Tracking chatbots and live chats are notoriously difficult because they are usually embedded in an <iframe> which means Google Tag Manager would need to be installed in that iframe to track it, which you often don’t have control over. While some chat software has direct integrations with Google Analytics, unfortunately, HubSpot doesn’t (at the time of this writing), but you can easily track Hubpsot Live Chat in Google Analytics using our GTM recipe below.
Hubspot Live Chat Tracking
Up until now, to track HubSpot Live Chat in Google Analytics, you had to add a generic event listener for messages from the chat iframe, but it was a bit unreliable. For example, it would send a “Conversation Started” event every time a new message was sent from either side even though the conversation obviously only started once. That solution was too complicated and inefficient.
Luckily, in 2020, Hubspot released the “Conversations API” for their Live Chat widget API to make tracking HubSpot chats and conversations more reliable. At the time of this writing, the Conversations API supports 3 live chat widget events (see #4 under “What does it do” below). While the Conversations API certainly makes it easier and more reliable to track Hubspot’s Live Chat widget, the Javascript outlined in HubSpot’s documentation is slightly different than what Google Tag Manager (our preferred tagging method) can understand and we still saw there was a lot of confusion in the support threads after the API was released.
Therefore, we decided to create and share the below GTM recipe to track the HubSpot Live Chat in Google Analytics using Google Tag Manager.
GTM Recipe: HubSpot Live Chat Tracking
In order to better understand if this GTM recipe is right for you, let’s first go through how it works and what it does.
What does it do:
- First, this GTM recipe creates an API helper tag that listens on all pages for any of the API events outlined below
- This is what controls the magic.
- Second, it creates a Google Tag that sends a “hubspot_live_chat” event in Google Analytics 4 whenever the API helper tag sees that a conversation is started or is closed
- Third, it creates the 3 new dataLayer variables in GTM that help make your events meaningful.
- Fourth, it creates custom event triggers for each of the three API events below so you have the option to track what you’d like.
- conversationStarted – fires when the first message is sent by the website user in a new conversation.
- conversationClosed – fires when the agent closes a conversation or the conversation times out.
- unreadConversationCountChanged – fires when the number of unread messages increases or decreases for the agent. Generally, for the first message and if the website user sends a message while the agent is attending to another chat thread.
After import, these are your two tags will look like in GTM:
This is what your Google Analytics 4 tag will look like. (Don’t forget to add your unique GA4 Measurement ID)
Instructions:
- Download our GTM recipe for Hubspot Live Chat tracking from our store.
- Import the downloaded recipe into your Google Tag Manager container. Make sure it’s not modifying or deleting any tags. You should see 2 new tags, 3 new triggers, and 2 new variables. All ingrediates are also neatly organized in a folder too.
- Add your GA4 Measurement ID to the tag called “GA4 Event – hubspot_live_chat”
- We recommend creating a User-defined Constant Variable called “Constant – GA4 Measurement ID” and adding your GA4 Measurement ID to that.
- Alternatively, add your GA4 Measurement ID manually to the Measurement ID field of the tag called “GA4 Event – hubspot_live_chat” or simply
- As always, Preview, Test, and Publish your container.
What’s Next?
After setting up tracking for HubSpot’s Live Chat widget using our GTM recipe, you will see how many conversations were started in Google Analytics 4. You can also use the pre-created triggers to create other conversion tags if you’d like. One example might be if you want to create tags to track Live Chat conversations as a conversion in Google Ads or Facebook Ads.
We hope that our GTM recipe made it much easier for you to track these important interaction events. If you have any questions about tracking other additional events, feel free to reach out to our tagging & tracking experts.
Original Inspiration:
Shout out to the following users in the HubSpot support threads for indirectly helping us to create this solution:
- derekcavaliero for sharing the original generic event listener (no longer needed now that the API is released)
- IsaacTakushi (from HubSpot) for his work in releasing the Conversations Live Chat Widget API
- stuartbrameld for sharing the original javascript API code that greatly influenced our API script.
19 Responses
To the step 2 all went perfect)
But how to Update the Universal Analytics tag to use your properties UA code ?
Update GA4 tags to use your Measurement ID ?
(Optional) Update the event category/action/label and GA4 event name and parameters to match your naming conventions. Do not change any of the {{dynamic variables}}. ?
Preview, Test, and Publish your container ?
Need more instructions with screenshots please.
Thank you!
Universal Analytics (UA) event tags in GTM require you to indicate which UA property you’d like the event sent to. This is done by adding your Google Analytics settings variable into the “Google Analytics Settings” field in each UA tag. We encourage you to check out the “Google Analytics Settings Variable (for Universal Analytics)” section of our “How To Add Google Analytics To Google Tag Manager” article for more in-depth steps.
While we have added this link to the article to make this step more clear, the specific settings you use in your settings variable will be dependent on your specific tracking needs.
I did everything according to the article, but for some reason, not even the listener is activated. Is there a possibility that Hubspot updated its code and the JS file is outdated? We have Hubspot Forms and Meeting Listeners cHTMLs in our tag manager, and they work fine. What else should we check?
I have confirmed that this method is still working. I recommend double-checking that you’ve followed all the steps exactly, including ensuring your using the correct Google Analytics UA code and GA4 Measurement ID. If you are still having trouble, please share the errors you are seeing in GTM preview mode.
hi there,
did you tick the box document.write for the cHTML Tag. That worked for me 😉
Hello,
I am able to see when the chat is initiated, but I am not seeing anything when a chat window is closed.
Any advice?
Excellent question. The conversationClosed event is triggered when the chat conversation has been fully ended by the agent (you) in Hubspot. This is different than when the chat window is simply closed by the end-user. I encourage you to visit the link in the “What does it do” section. Hope that helps!
I understand, thank you. I misunderstood that on the first read through.
Is there anyway to track when they close the chat?
Since the Live Chat bot is in an iframe, we are limited to only the 3 supported events from the API. Until HubSpot adds more supported events, like closing the chat window or associating a contact, it is not possible to track those actions.
Thanks for this. Question: what is the chat ID that gets captured as the ID? Is that something referenced within the HubSpot record?
HubSpot simply states it’s “the id of the conversation” but doesn’t give much more info on how it’s generated.
That said, if click on a conversation in your Hubspot Live Chat inbox, the conversation’s Chat ID can be found in the URL. It’ll look something like this:
https://app.hubspot.com/live-messages/YourHubspotAccountNumber/inbox/TheConversationChatID#live-chat
Does anyone know how to assign a goal after acquiring an email via hubspot chat
The HubSpot Conversations SDK mentions a
contactAssociatedevent that you could in theory use for this purpose, but in our testing, we weren’t able to get it to fire so we didn’t include it in this GTM recipe.this is quite ridiculous that hubspot doesnt track this .. thank you for your help
It worked properly ! Thank you very much for this content, so helpfull !
Hello, I can’t import the tag in UA,
There is a function in UA for gallery.
It is possible to add the setting in the gallery for importing it ?
Our HubSpot Live Chat GTM Recipe should be imported into your Google Tag Manager container tag. If you are unfamiliar with this process, we have a handy guide on how to import GTM recipes into your existing GTM container. You shouldn’t have to change anything in your UA account or use any GTM community templates.
Well I used GTM recipe to track hubspot live chats but no events is firing even when I entered correct measurement id and Google Analytics Settings variable but no tags are fired when opening or closing the chat. Don’t know what to do next
While our GTM recipes are meant to work with more most users, every website is different so it is difficult to diagnose what may be causing any issues with your specific configuration based on the limited information you provided. Can you please share at GTM preview link and we may be able to help?