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.
Along the years, multiple options to automate the chat and trigger it selectively have been added, 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 the Hubspot 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 generic Custom Event to indicate chat interactions.
This method integrates with the Generic Event Tracking method discussed on a separate post, please make sure you follow the instructions detailed there first.
In GTM, create a new tag of the type Custom HTML. Paste into the tag the following script:
<script>
function onConversationsAPIReady() {
window.HubSpotConversations.on('contactAssociated', function(payload) {
window.dataLayer.push({
'event': 'ga_event',
'eventCategory': 'hubspot chat',
'eventAction': 'contact associated',
'eventLabel': ''
})
});
window.HubSpotConversations.on('conversationStarted', function(payload) {
window.dataLayer.push({
'event': 'ga_event',
'eventCategory': 'hubspot chat',
'eventAction': 'conversation started',
'eventLabel': 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 and Conversation Started event, with the Event Category set to ‘hubspot chat’ and the relevant Event Action set to ‘contact associated’ or ‘conversation started’ respectively.
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', 'contact associated', {'event_category' : 'hubspot chat'});
});
window.HubSpotConversations.on('conversationStarted', function(payload) {
gtag('event', 'conversation started', {'event_category' : 'hubspot chat', 'event_lavbel' : 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
7 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”)
Hello everyone!
First of all, I want to let you all know that I am glad to have you in my life. This blog is awesome.
Well, I have a strange situation with that tracking, because with debug mode the code works perfectly but in live it doesn’t work at all.
In debug mode I send the data to another GA property and the output is correct. The real one is installed through GTM. Any idea?
Hey Juan
Happy to hear you find my content useful 🙂
I’m not sure I completely understand your implementation.
Is the LIVE code firing correctly in GTM’s preview mode and isn’t firing on the live site?