Javascript code on screen

Tracking HubSpot Forms and Chat with Google Analytics

This post was updated on the 25th of September 2019 to include the newly available chat widget conversation events. The new events make actual conversation tracking possible rather than just the opening and closing of the chat window.

If you are using HubSpot for your websites forms and user chat, you may also want to set up goals in Google Analytics to record how often those forms are filled in or a chat session is initiated.

There are no integration options in HubSpot to do this automatically, but it is still possible.

Tracking Hubspot Embedded Forms

These are the easiest types of form to track as the forms api provides a form submission callback (API documentation).

Below, you can see the original form embed code, and after modification to send an event after a successful submission.

Tracking HubSpot LeadFlow Forms

Lead Flow forms are added through the standard tracking embed script, so it’s not possible to modify the code directly.

These forms can be tracked by attaching a listener to ‘message’ events (API Documentation)

Tracking HubSpot Chat Actions

Update: Conversation start, end and unread message events have now been added by Hubspot. The Gist below includes tracking for these new events.

You can find the official documentation here:

Tracking chat widgets is traditionally difficult as they generally get added as iframes which the current page cannot access.

Some people suggest covering the chat with an invisible div, removing it after the user clicks on it and tracking the click. This obviously makes the chat widget look broken as the user has to click on it twice for it to work. Once to remove the invisible div and another to open the chat window.

Luckily, logging all events when listening to the message queue shows some chat widget interactions that we can use to log different actions.

Below, you can see an event of the type ‘open-change’ with a data value of either true or false depending on whether the chat window was opened or closed.

Browser console showing hubspot events

When the welcome message above the chat window is dismissed, an event of type ‘closed-welcome-message’.

Brower console showing an event logging hubspot chat window closing

Since the data is in the form of a JSON object, we first need to parse it to be able to access any of the values.

Once parsed, we can check for the data type and send analytics events accordingly.

Putting it all together, the chat tracking script looks like this:

Read more articles by this author

click here