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 deliver information quickly. Tracking Chatbots and Live Chat features are notoriously difficult because they are generally embedded via an <iframe> which means Google Tag Manager can’t track them natively. While some chat software has direct integrations with Google Analytics, unfortunately, HubSpot doesn’t (at the time of this writing). If you are already using HubSpot’s free CRM, you can easily add their free Live Chat and track it in Google Analytics using our GTM recipe below.
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. It was too complicated.
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 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 recipe to track the HubSpot Live Chat in Google Analytics using Google Tag Manager.
GTM Recipe: HubSpot Live Chat Tracking
What does it do:
- Creates an API helper tag that listens on all pages for any of the 3 previously mentioned API events
- Pushes a custom “HubSpot Chat” event to the dataLayer which can be seen by GTM
- Creates 3 new dataLayer variables in GTM
- Creates individual custom event triggers for each API event
- 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.
- Creates 2 Google Analytics tag (one for Universal Analytics and one for Google Analytics 4) that fires when a new conversation is started
- Universal Analytics: Interaction/HubSpot Live Chat: {{action}}/chat ID
- Google Analytics 4: hubspot_live_chat
In the end, this is what your tags will look like:
In Google Tag Manager, you’ll have one Universal Analytics tag for HubSpot Live Chat.
You’ll also have one tag that lets you track the HubSpot Live Chat widget in Google Analytics 4.
Instructions:
- Download our GTM recipe for Hubspot Live Chat tracking here
- Import into your Google Tag Manager. Make sure it’s not modifying or deleting any tags. You should see 3 new tags, 3 new triggers, and 2 new variables.
- Update the Universal Analytics tag to use your property’s Google Analytics Settings variable
- Update the GA4 tag to use your Measurement ID
- We recommend creating a User-defined Constant Variable called “Constant – GA4 Measurement ID” and adding your GA4 Measurement ID to that.
- Alternatively, you can select your GA4 configuration tag with the Configuration tag field of the tag called “GA4 Event – hubspot_live_chat” or simply add your GA4 Measurement ID manually to the Measurement ID field.
- (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.
What’s Next?
After setting up tracking for HubSpot’s Live Chat widget using our GTM recipe, you will be able to see how many conversations were started in both versions of Google Analytics. You can also use the pre-created triggers to create other conversion tags. One example might be if you want 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?