{"id":4722,"date":"2020-09-15T15:32:44","date_gmt":"2020-09-15T12:32:44","guid":{"rendered":"https:\/\/trackingchef.com\/?p=4722"},"modified":"2023-07-02T11:46:14","modified_gmt":"2023-07-02T08:46:14","slug":"hubspot-chat-conversions-in-gtm","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/google-tag-manager\/hubspot-chat-conversions-in-gtm\/","title":{"rendered":"Reporting Hubspot Chat conversions in external platforms"},"content":{"rendered":"\n
Hubspot’s Chat is one tool my clients love to use to drive conversions on their sites.<\/p>\n\n\n\n
This tool, introduced at the INBOUND 2017 event, plays a major role in Hubspot’s concept of Conversational Marketing.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The basic gist is to use Hubspot’s Chat API to trigger the various events. The events captured in the script below are two:<\/p>\n\n\n\n
<script>\nfunction onConversationsAPIReady() {\n window.HubSpotConversations.on('contactAssociated', function(payload) {\n \/\/ Some code to run\n });\n window.HubSpotConversations.on('conversationStarted', function(payload) {\n \/\/ Some other code to run\n });\n}\nif (window.HubSpotConversations) {\n onConversationsAPIReady();\n} else {\n window.hsConversationsOnReady = [onConversationsAPIReady];\n}\n<\/script><\/code><\/pre>\n\n\n\nGeneric Chat tracking in GTM<\/h2>\n\n\n\n
If you’re using Google Tag Manager (GTM) you can set up a Custom Event to indicate chat interactions.<\/p>\n\n\n\n
In GTM, create a new tag of the type Custom HTML. Paste into the tag the following script:<\/p>\n\n\n\n
<script type=\"text\/javascript\">\r\nfunction onConversationsAPIReady() {\r\n window.HubSpotConversations.on('contactAssociated', function(payload) {\r\n window.dataLayer.push({\r\n 'event': 'hubspot_chat_lead',\r\n 'chat_id': payload.conversation.conversationId\r\n })\r\n });\r\n window.HubSpotConversations.on('conversationStarted', function(payload) {\r\n window.dataLayer.push({\r\n 'event': 'hubspot_chat_started',\r\n 'chat_id': payload.conversation.conversationId\r\n })\r\n });\r\n}\r\nif (window.HubSpotConversations) {\r\n onConversationsAPIReady();\r\n} else {\r\n window.hsConversationsOnReady = [onConversationsAPIReady];\r\n}\r\n<\/script><\/code><\/pre>\n\n\n\n