How To Track HubSpot Live Chat In Google Analytics Using Google Tag Manager

Track HubSpot Live Chat In Google Analytics

Jump To:

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:

  1. Creates an API helper tag that listens on all pages for any of the 3 previously mentioned API events
  2. Pushes a custom “HubSpot Chat” event to the dataLayer which can be seen by GTM
  3. Creates 3 new dataLayer variables in GTM
  4. 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.
  5. 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:

  1. Download our GTM recipe for Hubspot Live Chat tracking here
  1. 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. 
  1. Update the Universal Analytics tag to use your properties UA code
  2. Update GA4 tags to use your Measurement ID
  3. (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}}.
  4. 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.

Share This Article

Share on facebook
Share on linkedin
Share on twitter
Share on reddit
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *