Hubspot’s Chat is one tool my clients love to use to drive conversions on their sites.
This tool, introduced at the INBOUND 2017 event, plays a major role in Hubspot’s concept of Conversational Marketing.
Over the years, multiple options have been added to automate the chat and trigger it selectively, making it a powerful Lead Generation and Support tool. As with other Hubspot features, these interactions are reported in detail within the platform. But if you want to report on these elsewhere, for example for optimizing a LinkedIn Ads campaign, you can’t easily connect the dots for proper attribution.
After running into this issue myself, I’ve contacted Hubspot’s support and they’ve shown me this neat trick that I wanted to share.
The basic gist is to use Hubspot’s Chat API to trigger the various events. The events captured in the script below are two:
- conversationStarted – A visitor has entered their first message in a conversation
- contactAssociated – The visitor has submitted their email
<script>
function onConversationsAPIReady() {
window.HubSpotConversations.on('contactAssociated', function(payload) {
// Some code to run
});
window.HubSpotConversations.on('conversationStarted', function(payload) {
// Some other code to run
});
}
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>Generic Chat tracking in GTM
If you’re using Google Tag Manager (GTM) you can set up a Custom Event to indicate chat interactions.
In GTM, create a new tag of the type Custom HTML. Paste into the tag the following script:
<script type="text/javascript">
function onConversationsAPIReady() {
window.HubSpotConversations.on('contactAssociated', function(payload) {
window.dataLayer.push({
'event': 'hubspot_chat_lead',
'chat_id': payload.conversation.conversationId
})
});
window.HubSpotConversations.on('conversationStarted', function(payload) {
window.dataLayer.push({
'event': 'hubspot_chat_started',
'chat_id': payload.conversation.conversationId
})
});
}
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>
Trigger the tag on ‘All Pages’.
This tag will now trigger a Custom Event on each Contact Associated (hubspot_chat_lead) and Conversation Started (hubspot_chat_started) event. Use these events to create new Custom Event triggers,
To complete the setup for GA4, you can create a new GA4 Event tag with the event’s name set to {{Event}} and the chat’s ID captured as an event parameter (using a DataLater variable of that name).
This Custom Event can now be used to trigger additional platforms such as LinkedIn Ads or Google Analytics.
Chat tracking without GTM
In case you don’t use GTM, you can still use this method to track chat conversions.
Simply add the following snippet to your site’s code:
<script>
function onConversationsAPIReady() {
window.HubSpotConversations.on('contactAssociated', function(payload) {
fbq('track', 'Lead');
gtag('event', 'hubspot_chat_lead', {'chat_id' : payload.conversation.conversationId});
});
window.HubSpotConversations.on('conversationStarted', function(payload) {
gtag('event', 'hubspot_chat_started', {'event_category' : 'hubspot chat', 'chat_id' : payload.conversation.conversationId});
});
}
if (window.HubSpotConversations) {
onConversationsAPIReady();
} else {
window.hsConversationsOnReady = [onConversationsAPIReady];
}
</script>This example will trigger the event to Google Analytics and Facebook but can be also used to trigger LinkedIn or Google Ads conversions just the same.
About the Author
5 Responses
Leave a Reply
Wow thanks. I’ve been slamming my head against the wall trying to figure this out
Hi,
Thanks!
But I tried above code (chat tracking without gtm) but events are not triggering in google analytics. Please advice.
Hey Sunny
It can depend on the version of Google Analytics installed on your site.
If you’re using the ga(‘send’…) syntax (or earlier) on your site, you need to replace the gtag() function in the script.
Let me know if this helps
Hi Elad.
We are using below latest code on site (example):
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-xxxxxxxx-1’);
in this case, if the GA tag is in place correctly then the script should work just fine
make sure you use the version that doesn’t use GTM (under “Chat tracking without GTM”)