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
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.
When the welcome message above the chat window is dismissed, an event of type ‘closed-welcome-message’.
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: