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.

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>

Custom HTML Tag to track Hubspot Chat interactions

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.