APIs & Integrations

yudhi_hamzah
Membre

Hubspot Livechat on Google Tag Manager

Résolue

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.

3 Solutions acceptées
IsaacTakushi
Solution
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

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

Voir la solution dans l'envoi d'origine

stuartbrameld
Solution
Participant

Hubspot Livechat on Google Tag Manager

Résolue

@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>

Voir la solution dans l'envoi d'origine

Djones
Solution
Participant

Hubspot Livechat on Google Tag Manager

Résolue

I wrote a step by step guide with screenshots on how I track Hubspot live chat with Google Tag Manager

Voir la solution dans l'envoi d'origine

50 Réponses
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

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
Membre

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
LaetitiaS
Participant

Hubspot Livechat on Google Tag Manager

Résolue

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
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
RiccardoPisani
Contributeur de premier rang

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
RiccardoPisani
Contributeur de premier rang

Hubspot Livechat on Google Tag Manager

Résolue

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 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

Hey, @RiccardoPisani.

 

Yep, that is the event ID, however it shouldn't be within {}; I just used those to highlight where the ID should go.

 

It also looks like you're missing a closing });. The combined code should be:

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

Let me know if this resolves your issue. 

Isaac Takushi

Associate Certification Manager
0 Votes
stuartbrameld
Participant

Hubspot Livechat on Google Tag Manager

Résolue

Hi @IsaacTakushi I'm really struggling with this too, hoping you can help

 

I'm trying to get a 'hs_chat_started' event pushed into the datalayer when a chat is initiated. I've tried your code, but it's not working:

 

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

 I have a global form listener (below) which works perfectly:

 

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>

 

We are trying to do the same for chat, but I can't get it to work. All I want to do is use a GTM listener to listen for the 'conversationStarted' event and then push the conversation ID into the datalayer.

 

Are you able to help?

 

Thank you

gabrielxyzmkt
Participant

Hubspot Livechat on Google Tag Manager

Résolue

I'm looking for this solution too. Help!

0 Votes
stuartbrameld
Solution
Participant

Hubspot Livechat on Google Tag Manager

Résolue

@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>
MariZanchetta
Contributeur

Hubspot Livechat on Google Tag Manager

Résolue

Hi, 

Are these solutions still working?

I have tried all the triggers and tags mentioned in this Topic, however, I'm still not being able to track the conversations started in the Chat. I might be using the wrong trigger or tag type or something (not advanced with GTM).

Would it be possible for anyone to add the step-by-step here of the trigger and tag I have to create in GTM for it to work? With the types I have to use, please, non-techie here 🙂 

 

thanks!

 

 

 

 

TomShakir
Membre

Hubspot Livechat on Google Tag Manager

Résolue

Hi,

 

This script is not wokring for me. Im using this wordpress plugin to intergrate the chat widget. https://wordpress.org/plugins/leadin/

I tried adding the script through the tag manager as well as through the theme. But none of them working.

0 Votes
NeelP
Participant

Hubspot Livechat on Google Tag Manager

Résolue

Hi Tom, did you ever get this working?  I have the same setup as you and am using the WordPress plugin.

0 Votes
KB56
Membre

Hubspot Livechat on Google Tag Manager

Résolue

Hey, where do we place this code in order for it to tack the Hubspot Live chat submissions? Is the tag type custom HTML in GTM? What's the trigger?

0 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

Hi, @KB56.

 

There is no single correct way to use Google Tag Manager to process HubSpot conversation events. An optimal solution depends on your goals and your current setup.

 

First, can you specify the "code" to which you are referring (e.g. @stuartbrameld's solution)?

 

It's possible to implement custom JavaScript like this in a GTM "Custom HTML"-type tag. just as it's possible to embed directly on your page.

 

If you're planning to implement window.dataLayer.push() via a GTM "Custom HTML" tag, then an "All Pages" or "Page View" trigger might be your best bet.

 

If you're embedding the script directly on your page and triggering implement window.dataLayer.push() from there, the trigger for subsequent tags in GTM will be your chosen event name (e.g. hubspot-conversation-started).

Isaac Takushi

Associate Certification Manager
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

Thanks so much for sharing, @stuartbrameld! I was just about to take a look at your question from Monday.

 

Since authoring my original solution, I've found that it only fires if it loads after window.HubSpotConversations. This tends to be unpredictable so the if/else statement with window.hsConversationsOnReady is often a more reliable option. (This is also outlined in the API's documentation.)

Isaac Takushi

Associate Certification Manager
SamOrton
Participant

Hubspot Livechat on Google Tag Manager

Résolue

Hi Isaac,

 

From some the past posts you have made, you indicated using the javascript API method and custom event. This is for Enterprise clients only, is that correct? And if it is, is there any other work around?

 

Thanks,

Sam

0 Votes
IsaacTakushi
HubSpot Employee
HubSpot Employee

Hubspot Livechat on Google Tag Manager

Résolue

Hi, @SamOrton.

 

Apologies for the delayed response.

 

Custom analytics events do require a Marketing Hub Enterprise subscription, however, depending on your goal, they may not be necessary.

 

Are you trying to trigger custom Google Tag Manager events on HubSpot pages? That use case does not require an Enterprise subscription.

Isaac Takushi

Associate Certification Manager
SamOrton
Participant

Hubspot Livechat on Google Tag Manager

Résolue

Figured it out. Thanks Isaac.

 

Sam