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

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 Upvotes
stuartbrameld
Participant

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

I'm looking for this solution too. Help!

0 Upvotes
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>
MariZanchetta
Participant

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
Member

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 Upvotes
NeelP
Participant

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

0 Upvotes
KB56
Member

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

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

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

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

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

Figured it out. Thanks Isaac.

 

Sam

gabrielxyzmkt
Participant

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?

0 Upvotes
stuartbrameld
Participant

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

gabrielxyzmkt
Participant

Your code is working fine. Thanks for sharing.

0 Upvotes
jteglgaaard
Member

Can you share the complete code/script here? I'm interesting in counting the chat starts.

0 Upvotes
RiccardoPisani
Top Contributor

thanks a lot @IsaacTakushi  🙂

0 Upvotes
Pier
Participant

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

0 Upvotes
IsaacTakushi
HubSpot Employee

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:

Isaac Takushi

Associate Certification Manager
0 Upvotes
IsaacTakushi
HubSpot Employee

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.

Isaac Takushi

Associate Certification Manager
0 Upvotes