Reporting Hubspot Chat conversions in external platforms

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:

1. conversationStarted – A visitor has entered their first message in a conversation
2. 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.