HubSpot Chat and GTM Tracking Process

Monitoring HubSpot and GTM Form Activities in a previous post, I explained how to track HubSpot form submissions using Google Tag Manager and/or Google Analytics, Facebook Pixel, and other tracking tools.

Forms hold a significant place within HubSpot Pages (Pages) and are key elements in the potential sales process. Chat (Conversions) also plays a vital role in this process.

HubSpot Conversions

HubSpot Conversions enables visitors to engage in live chat on HubSpot websites (webpages, landing pages, blogs), standalone websites, and even on Facebook pages. With features such as Chatflows, Snippets, and Templates, you can set up greeting messages to initiate communication with visitors, provide live support (organizable by time), and/or share pre-built templates via chatbots.

First, you must select either the Website or Facebook Messenger option.

When selecting the Facebook Messenger option, you’ll need to connect your Facebook page with HubSpot. In the remainder of this article, I’ll use the Website option to enable tracking of chat activities via Google Tag Manager. After selecting this option, you can proceed by choosing the appropriate step under either the Live Chat or Bots options. The same steps apply when using the Conversations API in any given scenario.

Once you’ve selected a relevant option, the tracking code for the Conversations widget is generated.

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/1234256.js"></script>
<!-- End of HubSpot Embed Code -->

With this code, we can use the relevant widget on HubSpot pages or other web pages.

To use it within HubSpot, we need to place this code as described in the articles titled HubSpot and GTM - Tracking Form Events, HubSpot GA, GTM, Adroll Tracking, and HubSpot Tracking Code (Tracking Code) Operations.

Conversions API

We selected the option from the chat settings that suits us, implemented the corresponding code on our website, and now we can track chat interactions and conversions. HubSpot provides us with many actions, including chat initiation, message sending (triggered for each message sent), and chat closure, among others¹.

// Chat initiation
window.HubSpotConversations.on('conversationStarted', payload => {
  console.log('conversationStarted');
  dataLayer.push({'event': 'hs_chat_started'});
});

// Chat termination
window.HubSpotConversations.on('conversationClosed', payload => {
  console.log('conversationClosed');
  dataLayer.push({'event': 'hs_chat_closed'});
});

Before performing this operation, it’s advisable to verify whether the HubSpotConversations API is accessible.

if (window.HubSpotConversations) {
  console.log('API is ready!');
} else {
  window.hsConversationsOnReady = [
    () => {
      console.log('API is now accessible!');
    },
  ];
}

Additionally, via the API, access to the conversationId is also possible². This enables you to perform actions based on the user level.

If we wish to manage the relevant operations outside of the HubSpotConversations object, we can base our actions on the message content.

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://app.hubspot.com')
    return false;

  let eventData = JSON.parse(event.data);
  let eventAction = false;
  let count = 0;
  
  // console.log(eventData.type);
  // console.log(eventData.data.eventType);
  
  switch(eventData.type) {
    case 'closed-welcome-message':
      eventAction = 'Closed - Welcome Message';
    break;
    case 'open-change':
      eventAction = (eventData.data) ? 'Opened - Window' : 'Closed - Window';
    break;
    case 'external-api-event':
      if (eventData.data.eventType === 'conversationStarted' && count === 0)
        eventAction = 'conversationStarted';
    break;
    default:
      eventAction = false;
    break;
  }

  if (eventAction) {
    dataLayer.push({
      'event': 'Send Event',
      'event_category': 'Live Chat',
      'event_action': eventAction,
      'event_label': eventData.uuid,
      'event_value': 10
    });
    count++;
  }
});

Finally, you can monitor changes within the widget using message.

Together with the above processes, I’m now completing the tracking (monitoring) setup on the HubSpot side. In the following posts, I’ll discuss automation workflows between HubSpot and other services.

Footnotes

1. Hubspot Livechat on Google Tag Manager. HubSpot Developers ↩
2. Using widget events. HubSpot Developers ↩