topic Re: Hubspot Livechat on Google Tag Manager in APIs & Integrations

Hubspot Livechat on Google Tag Manager

yudhi_hamzah — Tue, 11 Sep 2018 05:50:41 GMT

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.

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Wed, 19 Sep 2018 21:08:08 GMT

Hi @yudhi.hamzah,

While it's not possible to track clicks to open the live chat widget in HubSpot, there may be a way in Google Tag Manager.

Most of the live chat modal is loaded through an iframe, so its elements can't be tracked through GTM. The iframe exists within a div with the id hubspot-messages-iframe-container, however, so you may be able to create a click trigger with that id. See below.

Re: Hubspot Livechat on Google Tag Manager

yudhi_hamzah — Tue, 25 Sep 2018 02:21:50 GMT

Hi @Isaac_Takushi it still don't work. There is "hubspot-messages-iframe-container" ID in my HTML but somehow the trigger is not fired.

I think the click is happening in the iframe. That is why I can't recognize the action (click).

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Tue, 25 Sep 2018 12:51:25 GMT

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.

Re: Hubspot Livechat on Google Tag Manager

Pier — Tue, 24 Sep 2019 10:35:00 GMT

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

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Wed, 25 Sep 2019 15:54:36 GMT

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'});
});

Re: Hubspot Livechat on Google Tag Manager

Pier — Thu, 26 Sep 2019 07:30:34 GMT

Hi @IsaacTakushi

Thank you so much. I will try to track chat conversation.Unfortunately I'm not super competent with Google Tag Manager for custom tracking, a step by step guide would have been helpful.

I will try until I can! Fingers crossed.

Thank you again

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Thu, 26 Sep 2019 11:53:57 GMT

Hi, @Pier.

Happy I could be of assistance.

There are many step-by-step tutorials on tracking in Google Tag Manager available. Here are two I found:

Re: Hubspot Livechat on Google Tag Manager

RiccardoPisani — Wed, 11 Dec 2019 11:04:01 GMT

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

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Thu, 12 Dec 2019 14:55:37 GMT

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}
    }]);

Re: Hubspot Livechat on Google Tag Manager

RiccardoPisani — Mon, 16 Dec 2019 17:00:19 GMT

thanks a lot @IsaacTakushi 🙂

Re: Hubspot Livechat on Google Tag Manager

RiccardoPisani — Tue, 17 Dec 2019 07:35:45 GMT

hi there @IsaacTakushi

the script should look like this right?

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

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Thu, 19 Dec 2019 13:49:02 GMT

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.

Re: Hubspot Livechat on Google Tag Manager

stuartbrameld — Mon, 03 Feb 2020 22:04:37 GMT

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

Re: Hubspot Livechat on Google Tag Manager

gabrielxyzmkt — Wed, 05 Feb 2020 16:53:39 GMT

I'm looking for this solution too. Help!

Re: Hubspot Livechat on Google Tag Manager

stuartbrameld — Wed, 05 Feb 2020 16:57:58 GMT

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

Re: Hubspot Livechat on Google Tag Manager

gabrielxyzmkt — Wed, 05 Feb 2020 17:32:18 GMT

Friend, tell me if I did it right:

1 - create the listener tag as you said in All Pages
2 - create a trigger - custom event "hubspot-conversation-started"
3 - create a google ads tracking tag triggered by the "hubspot-conversation-started" trigger

Just this?

Re: Hubspot Livechat on Google Tag Manager

IsaacTakushi — Wed, 05 Feb 2020 17:37:44 GMT

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.)

Re: Hubspot Livechat on Google Tag Manager

stuartbrameld — Wed, 05 Feb 2020 18:54:00 GMT

@gabrielxyzmkt yup that's pretty much it. this link explains how to do it for HubSpot forms, the approach is pretty much exactly the same for chat, should give you everything you need. note: the link will automatically expire in a couple of weeks https://app.growthmethod.com/playbook/fyea0zyy9twh9gccx1dr8c50sfj20j.

Re: Hubspot Livechat on Google Tag Manager

gabrielxyzmkt — Thu, 06 Feb 2020 12:41:45 GMT

Your code is working fine. Thanks for sharing.