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.
No Comment! Be the first one.