Hubspot Livechat on Google Tag Manager

SOLVE
yudhi_hamzah
Member

Hi,

I have been trying to track Hubspot Livechat on Google Tag Manager (GTM). More specifically people who are coming from Google Ads then click the Livechat.

Is there any way to do that? I asked Hubspot Support, but apparently there is no way to do that from Hubspot.

Thank you in advance.

2 Accepted solutions
IsaacTakushi
Solution
HubSpot Employee

Hi, @Pier.

 

Since this discussion was last active, we released a Conversations Live Chat Widget API. The features include these widget events, which you could use to trigger a Google Tag Manager event.

 

For example, the following script would listen for the start of a chat and trigger a GTM event named hs_chat_started.

 

 

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

 

 

Isaac Takushi

Associate Certification Manager

View solution in original post

stuartbrameld
Solution
Participant

@gabrielxyzmkt got it working yesterday, here you go 🙂

 

<script type="text/javascript">
  function onConversationsAPIReady() {
    //console.log("HubSpot Conversations API Available");
    window.HubSpotConversations.on( 'conversationStarted', function( payload ) {
    //console.log("HubSpot Conversation Started");
      window.dataLayer.push({
        'event': 'hubspot-conversation-started',
        'hs-conversation-id': payload.conversation.conversationId
      })
    });
  }
  /*
   If external API methods are already available, use them.
  */
  if (window.HubSpotConversations) {
    onConversationsAPIReady();
  } else {
    /*
      Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
      These callbacks will be called once the external API has been initialized.
    */
    window.hsConversationsOnReady = [onConversationsAPIReady];
  }
 </script>

View solution in original post

42 Replies 42
MariZanchetta
Participant

Hi, I wanted to share that I have used the API recipe from @acgorecki  (link is his comment) and added it into GTM, and it works!! Thank you very much for this @acgorecki , I am now able to track conversations that have started as a goal in GA.

0 Upvotes
acgorecki
Participant

@MariZanchetta, I'm glad you found it helpful and were able to get it to work for you.

0 Upvotes
ogranadino
Participant

Hi @IsaacTakushi I have same issue. I neet to count a conversion in google ads when the lead completes some chat bot questions. 

Can I do that using the snippet event or a webhook event in the bot flow to load the google conversion code?

 

Best,

 

0 Upvotes
AMandel
Participant

I have the same question
If anybody can share step by step template on how the did it

MariZanchetta
Participant

Same as @DDemagistris here, @IsaacTakushi . How can I track Hubspot chats that came from paid campaigns and organic search? I need to measure this.

DDemagistris
Participant

@IsaacTakushi can you help me with this? My end goal is to count a Hubspot chat as a conversion in google ads and google analytics. 

IsaacTakushi
HubSpot Employee

Thanks for the update, @yudhi.hamzah,

In that case, I don't know of a way to track clicks which open the live chat widget. hubspot-messages-iframe-container is one of the few div elements outside the iframe.

I certainly see value in tracking custom interactions with the live chat tool, however. I recommend upvoting and commenting on this HubSpot Community Idea and any other topics which match your use case to help them become realities.

This information is sent directly to our Product team and helps prioritize feature requests that have the greatest impact on our customers. I’ve already upvoted the idea and will also do my part and pass your feedback along through internal channels.

Isaac Takushi

Associate Certification Manager
0 Upvotes
Pier
Participant

Hi @IsaacTakushi

 

I would like to know if there are updates on a way to track the chat with Google Tag Manager. Unfortunately, the only solution indicated does not work.

 

Thanks.

Pier

 

0 Upvotes
IsaacTakushi
Solution
HubSpot Employee

Hi, @Pier.

 

Since this discussion was last active, we released a Conversations Live Chat Widget API. The features include these widget events, which you could use to trigger a Google Tag Manager event.

 

For example, the following script would listen for the start of a chat and trigger a GTM event named hs_chat_started.

 

 

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

 

 

Isaac Takushi

Associate Certification Manager
acgorecki
Participant

In case you find it helpful, I created a Google Tag Manager (GTM) recipe to track the Hubspot Live Chat Conversation API events in Google Analytics 4 and Universal Analytics. Check it out.

AMandel
Participant

Can you please specify how this works in google tag manager?

0 Upvotes
Severin
Member

Hi, @IsaacTakushi 

 

What would the event script be if we wanted to track the email submission of a chat engagement in GTM? 

 

Thanks,

 

Severin

0 Upvotes
IsaacTakushi
HubSpot Employee

Welcome, @Severin.

 

Are you referring to the automated chatflow prompt corresponding to the "Ask visitors for their email address" setting?

 

If so, responses to that prompt cannot be accessed via the Conversations JavaScript API at this time.

 

If you have an Enterprise-level subscription and are using bots, however, you can leverage either the bot webhook or code snippet actions to interact with this email.

Isaac Takushi

Associate Certification Manager
Severin
Member

Thanks for your help here, Isaac.  

Just to clarify, the purpose of tracking this is for Google Analytics and Google Ads conversions.  Therefore, I only want to see/track that the email address was successfully submitted via a chat form.  I don't need to see or record the actual email address for this purpose. 

 

Does that help clarify?

 

Thanks again.

 

Severin

0 Upvotes
IsaacTakushi
HubSpot Employee

Hey, @Severin.

 

It does but unfortunately the answer is the same... at this time, HubSpot chat widgets do not emit an event or signal when an email address is submitted.

 

The closet alternatives I can think of are the two bot chatflow actions I outlined above.

 

Also, I know you're not referring to HubSpot forms, but they have global events which trigger when submissions are received and persisted.

Isaac Takushi

Associate Certification Manager
0 Upvotes
LaetitiaS
Participant

Hello @IsaacTakushi , 

 

Thank you but I don't understand what should I do with this ? 

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

Use in Custom HTML ? If yes, with which trigger ? 

 

Thanks 

IsaacTakushi
HubSpot Employee

Hi, @LaetitiaS.

 

If you are asking about the snippet in general, yes, you can place that within <script></script> tags within your page's HTML.

 

You may have to change the event name from hs_chat_started to match the Google Tag Manager event you have configured.

 

Could you clarify your question about the trigger? The HubSpot conversationStarted event is a trigger of sorts since it will trigger a callback, but are you referring to a different trigger? If so, what are you looking for the trigger to do?

Isaac Takushi

Associate Certification Manager
0 Upvotes
RiccardoPisani
Top Contributor

hi there @IsaacTakushi ,

 

thanks for sharign this, it is super helpful -

 

I am trying the script you are mentiongin above into GTM but I get this error message:

 ---
Error at line 2, character 55: This language feature is only supported for ECMASCRIPT6 mode or better: arrow function.

---
The script I use is this one:
 https://monosnap.com/file/EguNehjH7qJUIFnuIhDNW4zAgc5g1H

 

Also the trigger I am using is this one: 
https://monosnap.com/file/7wfoWz9nfatuUOS35vmPzPQM4sLHsv

 If I chanege a little  bit the script:
<script>
window.HubSpotConversations.on('conversationStarted', function (payload) {
dataLayer.push({'event': 'hs_chat_started'});
});
</script>

 

Now the trigger fires, I can see this on previewing the tag:
https://monosnap.com/file/yIJYzWzAikVHLGXmzT3EHTjxF9CaQW

 

But in hubspot the event is not increasing:
https://monosnap.com/file/rc4CT5DcHwRPrPVDA3SGTznoVFsnzY

 

Thansk a ton

0 Upvotes
IsaacTakushi
HubSpot Employee

Hi, @RiccardoPisani.

 

Thanks for sharing your code.

 

It sounds like you are expecting your code to trigger a custom HubSpot event named hs_chat_started. Is that correct?

 

If so, the following JavaScript will not do that:

<script>
window.HubSpotConversations.on('conversationStarted', function (payload) {
dataLayer.push({'event': 'hs_chat_started'});
});
</script>

because dataLayer.push({'event': 'hs_chat_started'}); only communicates with Google Tag Manager.

 

If you wish to trigger a HubSpot event on your page, you must use this Events JavaScript API method.

 

Add the following to your "New HubSpot Conversation listener" tag, after dataLayer.push({'event': 'hs_chat_started'});:

_hsq.push(["trackEvent", {
        id: {YOUR_HS_EVENT_ID}
    }]);

Isaac Takushi

Associate Certification Manager
0 Upvotes
RiccardoPisani
Top Contributor

hi there @IsaacTakushi 

 

the script should look like this right? 

 

<script>
window.HubSpotConversations.on('conversationStarted', function (payload) {
dataLayer.push({'event': 'hs_chat_started'});
_hsq.push(["trackEvent", { id: {000007664686} }]);</script>

 

the id is this one, correct?

https://monosnap.com/file/mNXJw07Hl8odRmokEaDy7vMiBhaPHB

 

I still get en error on my tag

Tag: https://monosnap.com/file/EguNehjH7qJUIFnuIhDNW4zAgc5g1H

Error: https://monosnap.com/file/UTvYYRCOK0hO5JsHU3cyBR4GIG909X

 

Not sure if  I've inserted the part of the script you are suggesting in the right place. 

 

Thanks a lot for your help

Riccardo 

0 Upvotes