Reporting & Analytics

ErinGerg
Participant | Gold Partner
Participant | Gold Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Does anyone have any solutions/suggestions for recording live chat conversions in Analytics/Adwords? Can I record contacts created from live chat in Analytics and then create a goal that could translate to a conversion in Adwords? 

We are using the Hubspot chat tool.

We would like to use chat on our ppc landing pages, but because we cannot record chats and conversions, we have not yet set them up.

1 Accepted solution
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

UPDATE:

 

Actually, digging into this further, tracking when the "conversation is started" is possible. 

 

 

<script>
window.addEventListener( 'message', function(event) {
  if ( event.origin !== 'https://app.hubspot.com' )
    return false;
  
  var eventData = JSON.parse(event.data);
  var eventAction = false;
  
  switch( eventData.type ) {
    case 'closed-welcome-message':
      eventAction = 'Closed - Welcome Message';
    break;
    case 'open-change':
      eventAction = ( eventData.data ) ? 'Opened - Window' : 'Closed - Window';
    break;
    case 'external-api-event':
      if ( eventData.data.eventType = 'conversationStarted' )
      	eventAction = 'Conversation Started';
    break;
    default:
      eventAction = false;
    break;
  }
  
  if ( eventAction ) {
    dataLayer.push({
      'event': 'Send Event',
      'event_category': 'Live Chat',
      'event_action': eventAction,
      'event_label': eventData.uuid,
      'event_value': 10
    });
  }
  
});
</script>

 

 

However, there isn't a way to track when a user provides their email address - which is really when you would truely count a conversation as a "lead" for analytical purposes. So this above script would track the following (assuming you use Google Tag Manager):

 

  • Users who open/close the chat window
  • Users who close the chat welcome message (if you're using one)
  • Users who start a new conversation
Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com

View solution in original post

33 Replies 33
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@adampatpattison good catch, definately useful.

 

I will say it is best practice to push an event to something like GTMs dataLayer rather than explicitly pushing to a platform in the event listener itself. That keeps your tracking tags visible inside GTM and auditable/testable using its debug and preview tools.

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
adampatpattison
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Most of the replies so far have involved using the Conversations API event listeners. 

@derekcavaliero's reply being the accepted solution. 

I just wanted to add to this that HubSpot have now introduced a `contactAssociated` event. 

I have just implemented a usage for this to push an AdWords conversion event when triggered by our Chat Flow setup which asked for name and email, thus creating/associating a contact from the chat user. We are considering this as conversion rather than just starting a chat conversation.

An approximation of what I implemented:

function onConversationsAPIReady() {
    window.HubSpotConversations.on('conversationStarted', function(payload){
      //console.log("HubSpot Conversation Started");
      // Do something here to track if necessary
    });
    
    window.HubSpotConversations.on('contactAssociated', function(payload){
      //console.log("HubSpot Contact Associated");
      // Do whatever you like here to track
      if(typeof window.gtag === 'function'){
        //Event snippet for Chat Contact Associated conversion page
        window.gtag('event', 'conversion', {'send_to': 'YOUR/CONVERSION/ID/HERE'});
      }
    });
    
  }


Hope this helps!

acgorecki
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

I was able to get it working on my site. Would anyone be interested in a pre-made GTM recipe that leverages the Conversations API events?

Edit: You can track the Conversation API events from the HubSpot Live Chat widget using this GTM recipe.

0 Upvotes
takenote
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

This recipe is brilliant, but we really need it to include "contactAssociated" for conversion tracking, is there any update on this?

0 Upvotes
AdRockers
Member

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Yes send de json to me please, or paste here GTM prints... 😃

0 Upvotes
PolFisas
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Hello,
I have met your post and we have managed to send sales to Google Ads, Analytics and send click and lead event with the HubSpot chat.

I am not a technician but it still helps you with your development team.

1. We collect variables such as clientid and gclid in each user's session cookie (client with Google Analytics and Google Ads, and gclid to attribute sales to campaigns in Ads).

2. You must save this information as a contact property in HubSpot. And save it as a hidden field in a form.

3. With this information you can generate a Webhook that you can send to the different platforms by API in Google Ads (complicated by Google documentation) and Measurement protocol by Google Analytics (I do not know if there is another way but surely this is the easiest ).
In this way you can send the information in a workflow and webhook when there is a sale, lead or any action (for example).

4. For the chat, we have recently been able to send all user information. To do this you must activate the possibility of creating contacts in HubSpot without the need for email. Then after a chat action event (click or conversation), send the information via the HubSpot API and create a form with the user token to associate the Chat conversation and the information collected with the contact. (look this post)
Then in the logic of the chat you can send a webhook to Google Analytics or Google Ads to send the event.


In short, this is what we have implemented to be able to collect and send events with the integral and measured funnel.

 

Your post and requirement has time, but I hope it helps you or someone else.

 

🙂

znicholson
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Is this still the best method for tracking Chat in GTM? 

More recently HS have released "Conversation Live Chat Widget API" (https://community.hubspot.com/t5/APIs-Integrations/Hubspot-Livechat-on-Google-Tag-Manager/m-p/293219...)

 

However it seems less straightforward than the solution in this thread.

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@znicholson both will likely work. Probably best to use the public API though. Do you have specific questions about how to use it? HubSpot writes their JavaScript docs using ES6 syntax which isn't natively supported in all browsers and it can look a little odd. See below for a more supported JS syntax: 

 

<script>
window.HubSpotConversations.on('conversationStarted', function(payload){ dataLayer.push({'event': 'hs_chat_started'}); // This will need customized to your particular needs. });
</script>

 

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
jamesthrasher
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@derekcavaliero 

 

I've used both snippets below to push a GA event whenever a conversation is started, but neither seem to work. Do you know what I'm doing wrong here?

 

//Option A
<script type="text/javascript">
   window.HubSpotConversations.on('conversationStarted', payload => { ga('send', 'event', 'Beacon', 'chat-started', 'Hubspot'); });
</script>

//Option B
<script type="text/javascript">
window.HubSpotConversations.on('conversationStarted', function(payload){ ga('send', 'event', 'Beacon', 'chat-started', 'Hubspot'); });
</script>
0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@jamesthrasher do you have a URL where you are attempting this?

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
jamesthrasher
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@derekcavaliero 

 

It should be on any page here: https://www.atlasrfidstore.com/

 

I tried a third snippet found here, and it didn't work either for some reason: https://gist.github.com/robwent/0375f2926d175d99224d8725d6e39d7b

 

 

0 Upvotes
derekcavaliero
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

@ErinGerg 

 

I recently looked into this for our agency as well.

 

Unfortunately, I wasn't able to track when a visitor actually sent a message. What I was able to do was implement interaction tracking on the chat window itself using the following code (note that this has some customizations for our Google Tag Manager setup).

 

<script>
window.addEventListener( 'message', function(event) {
  if ( event.origin !== 'https://app.hubspot.com' )
    return false;
  
  var eventData = JSON.parse(event.data);
  if ( eventData.type == 'open-change' ) {
  	dataLayer.push({
      'event': 'Send Event',
	  'event_category': 'Live Chat',
      'event_action': ( eventData.data ) ? 'Opened Chat' : 'Closed Chat',
      'event_label': eventData.uuid,
      'event_value': 10
    });
  }
});
</script>

That will push a dataLayer event for opened/closed click interaction, which isn't perfect, but it's a start.

 

HubSpot needs to implement a window message event for "message sent" so we can truely know when a chat has been started (not just assuming a click = a conversation). 

Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
derekcavaliero
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

UPDATE:

 

Actually, digging into this further, tracking when the "conversation is started" is possible. 

 

 

<script>
window.addEventListener( 'message', function(event) {
  if ( event.origin !== 'https://app.hubspot.com' )
    return false;
  
  var eventData = JSON.parse(event.data);
  var eventAction = false;
  
  switch( eventData.type ) {
    case 'closed-welcome-message':
      eventAction = 'Closed - Welcome Message';
    break;
    case 'open-change':
      eventAction = ( eventData.data ) ? 'Opened - Window' : 'Closed - Window';
    break;
    case 'external-api-event':
      if ( eventData.data.eventType = 'conversationStarted' )
      	eventAction = 'Conversation Started';
    break;
    default:
      eventAction = false;
    break;
  }
  
  if ( eventAction ) {
    dataLayer.push({
      'event': 'Send Event',
      'event_category': 'Live Chat',
      'event_action': eventAction,
      'event_label': eventData.uuid,
      'event_value': 10
    });
  }
  
});
</script>

 

 

However, there isn't a way to track when a user provides their email address - which is really when you would truely count a conversation as a "lead" for analytical purposes. So this above script would track the following (assuming you use Google Tag Manager):

 

  • Users who open/close the chat window
  • Users who close the chat welcome message (if you're using one)
  • Users who start a new conversation
Derek Cavaliero
Director of Engineering

WebMechanix
www.webmechanix.com
factsetresearch
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

I entered your code and not seeing data come through in GA, any tips?  Also, I need to push multiple converion pixels though this code, what is the best way to do this?  Copy and paste the code multiple times, our append the code at the end to fire all the pixels I need fired?

0 Upvotes
ivailo
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Do you add the script you provided as a custom HTML tag in Tag Manager that fires on "All Pages" (the Page View trigger)?

It does not seem to fire any events when I set it up this way.

0 Upvotes
Anonymous
Not applicable

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Hi! Thank you for the script. Do you mind telling me how you got it in a GMT trigger, so that it can fire?

0 Upvotes
bradgerlach
Contributor | Platinum Partner
Contributor | Platinum Partner

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Update: Apparently the trigger isn't very clear and could be due to newer ways to set up listeners for chat events. 

I am trying to reconcile the data here. 27 total events with 7 Unique events this week (Monday and Tuesday). 

When looking at the Conversations Inbox within the HS portal, I see 6 chat sessions. 

My question is, what constitutes that a conversation started? If someone clicks one of the screening questions from the bot but doesn't finish with the form (provide email) is that a Conversation Started event? Does that mean if there are 7 unique events and only 6 chat sessions, that one person never actually connected with an agent? 

 

Station.png

0 Upvotes
kaimaan
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

conversationstarted event is not working for me. Anyone else with same issue?

0 Upvotes
AdRockers
Member

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

Hi,

 

How to install de chat tracking in Google Tag Manager?

 

Thanks!

0 Upvotes
oqm4
Participant

Hubspot Chat Tool: Recording Conversions in Analytics/Adwords

SOLVE

derekcavaliero's code works really well. Thank you!

 

Here's what we did to install via GTM and start writing data to GA. At a high level, the flow runs like this:

 

Event Tracking > GTM Event > GTM Variables > GTM Trigger > GA

 

1. Add derekcavaliero's code using a custom HTML tag, and make sure it fires on all pages.

Screen Shot 2019-09-26 at 9.11.27 AM.png

 

2. Next, register each data layer from the code (event, event_category, event_action, event_label, event_value) as a user-defined variable.

Screen Shot 2019-09-26 at 9.13.34 AM.png

3. Here's a sample:

Screen Shot 2019-09-26 at 9.14.30 AM.png

 

4. Next, visit "Triggers" and register the event name from the code. In our case, we're using: "Widgets." derekcavaliero's default is "Send Event."

Screen Shot 2019-09-26 at 9.17.42 AM.png

Here's our example:

Screen Shot 2019-09-26 at 9.21.06 AM.png


5. Finally, go back to "Tags" and register a new GA tag. Include the event variables and fire on the trigger you created in step 3.

Screen Shot 2019-09-26 at 9.23.12 AM.png

 

6. After you publish the update, you'll see the events in Google Analytics:

Screen Shot 2019-09-26 at 9.26.07 AM.png

You can see this solution live on our marketing intelligence solution's marketing in China and marketing benchmarks pages. This Chrome extension can be helpful for previewing events.