How to Track HubSpot Live Chats via Google Tag Manager

Setting up data layer events for HubSpot live chat.

We can set up custom data layer events and track interactions with HubSpot’s live chat by using the events available with HubSpot’s chat widget API.

For the purpose of this guide, we are going to track two events:

• A conversation being started.
• A contact being associated in HubSpot – this will track when an email, for example, is captured by the live chat.

We will create a custom HTML tag to fire based on conversations being started or contacts associated in HubSpot. This tag needs to fire on all pages that the live chat appears on.

HubSpot event listener tag configuration

Tag name: HubSpot – Live Chat Event Listener

Tag type: Custom HTML

Trigger: All pages (page view)

HTML:

<script>
function onConversationsAPIReady() {
    window.HubSpotConversations.on('contactAssociated', function(payload) {
        window.dataLayer.push({
            'event': 'hubspot_chat',
            'eventCategory': 'hubspot',
            'eventAction': 'contact_associated',
            'eventLabel': payload.conversation.conversationId
        })
    });
    window.HubSpotConversations.on('conversationStarted', function(payload) {
        window.dataLayer.push({
            'event': 'hubspot_chat',
            'eventCategory': 'hubspot',
            'eventAction': 'conversation_started',
            'eventLabel': payload.conversation.conversationId
        })
    });
}
if (window.HubSpotConversations) {
    onConversationsAPIReady();
} else {
    window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>

Creating variables to capture the HubSpot information

Now we have the events and information being pushed to the data layer, we need to create data layer variables to capture the information, so it is usable in our tags.

The variables pushed in the HubSpot event code mirror the data structure of events in Universal Analytics, using event category, event action and event label. Whilst this isn’t required for Google Analytics 4, in this particular case these variables/parameters can work nicely.

In here, the variables have the information as follows:

• eventCategory is static as “hubspot”, this can be useful to group all HubSpot events together when passed back via tags.
• eventAction is either “conversation_started” or “contact_associated”, this separates the kinds of interaction the user had with the chat.
• eventLabel is the ID for the chat, so if required you can match the information back to a specific conversation.

Variable configuration

Variable name: DLV – eventAction

Variable type: Data layer variable

Data layer variable name: eventAction

Data layer version: version 2

Variable name: DLV – eventCategory

Variable type: Data layer variable

Data layer variable name: eventCategory

Data layer version: version 2

Variable name: DLV – eventLabel

Variable type: Data layer variable

Data layer variable name: eventLabel

Data layer version: version 2

Sending HubSpot live chat data to Google Analytics 4

We can then use the variables created for the HubSpot live chat to create a Google Analytics 4 event tag and pass information pack. Additionally, we will create a trigger for live chat interactions using the data layer events created with the HubSpot event tag.

This assumes you already have the Google Analytics 4 configuration tag set up.

Firstly, we can create a trigger to fire on the new HubSpot live chat data layer events that were set up in the first step.

Trigger configuration

Trigger name: HubSpot Live Chat – Event

Trigger type: custom event

Event name: hubspot_chat (exactly matching the event name in the HubSpot live chat event listener tag code)

Trigger fires on: all custom events

GA4 tag configuration

Tag name: GA4 – Event – HubSpot Live Chat

Event name: hubspot_chat

Event parameters:

eventCategory = {{DLV – eventCategory}}

eventAction = {{DLV – eventAction}}

eventLabel = {{DLV – eventLabel}}

Trigger: HubSpot Live Chat – Event (custom event)

The event name and parameters can be customised to your liking in this tag and to fit in with any dimensions you already have in GA4.

Additionally, using the same concepts, the information can also be used in other tags to send information to parties other than Google Analytics.

Always preview and test the changes you make before publishing to a live environment to make sure they work as expected.