HubSpot Chat & Google Analytics Event Tracking

[jamesthrasher]

I've used both snippets below to push a GA event whenever a conversation is started, but neither seem to work. Can anyone tell me 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>

[Mike_Eastwood · Accepted solution]

Looks to me like the HubSpot Javascript is loading after your Javascript fires.

So, James added the On Load Event Listener so the Javascript fired after everything loaded.

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

Notice the line:

window.addEventListener("load", function(){

and it's closed with

});

Have fun

Mike

[Djones]

Hoping this helps someone.

I wrote an article here that breaks down how I track Hubspot chats as GA events  

[kvlschaefer]

Thanks for sharing, @Djones! 

[EXWE-GmbH]

Hey,

we also ran into some issues regarding the chat widget and tracking our conversions.

Our problem was, that we were using a CookieManager to fulfill German/EU DSGVO...
We found a solution where we first checked for the CookieConsent and later added the eventListeners for the widget, when ready. We wrote everything down in a small article:

English:
https://www.exwe.de/en/news/web-development/googleanalytics-hubspot-chat-tracking-with-cookiemanager...

Deutsch:
https://www.exwe.de/de/news/web-entwicklung/googleanalytics-hubspot-chat-tracking-mit-cookiemanager/

The main trick is to check the status:

              if (window.HubSpotConversations) {
                console.log('hubspot chat already running'); 
                onConversationsAPIReady();
              } else {
                console.log('hubspot chat awaiting'); 
                window.hsConversationsOnReady = [onConversationsAPIReady];
              } 

[piersg · Accepted solution]

@AORourke @Rortega you can't use arrow functions (and other ECMA6 features) in JS that you use in GTM. @Mike_Eastwood's code was to put on your site to send an event straight to GA. To add it in GTM instead, change Mike's code to remove the arrow function, and also you would have to change the ga() call as that wouldn't work in GTM. Maybe make it a custom HTML tag that pushes a custom event to the dataLayer that you can then use as a trigger for to fire a GTM event that will send event data to GA.

<script type="text/javascript">
  window.addEventListener("load", function(){
	window.HubSpotConversations.on('conversationStarted', function(payload){
	    // ga('send', 'event', 'Beacon', 'chat-started', 'Hubspot');
		window.dataLayer.push({
			'event': 'hubspot-chat-started',
			'hs-chat-id': payload.conversation.conversationId
		});
	});
  });
</script>

[AORourke]

Thank you.

[Mike_Eastwood · Accepted solution]

Looks to me like the HubSpot Javascript is loading after your Javascript fires.

So, James added the On Load Event Listener so the Javascript fired after everything loaded.

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

Notice the line:

window.addEventListener("load", function(){

and it's closed with

});

Have fun

Mike

[Rortega]

Hello!

I want to tag the chat with tag manager but when I add your script I get and error: 

---

Hay un error en la línea 3, carácter 58: This language feature is only supported for ECMASCRIPT6 mode or better: arrow function.

---

Do you know how to solve it?

Best regards

[AORourke]

I got the same issue. Did you ever find a fix?
The closest related issues i can find is here but their fix does not work on the above code. https://stackoverflow.com/questions/48922855/javascript-compiler-error-in-google-tag-manager-this-la... 

[Mike_Eastwood]

Sorry for the delayed reaction @jamesthrasher 

Do you see any errors in your browser's inspector when the page loads?

Are you able to share (by direct message) a link to the page you're testing?

Or ,did you work it out already?

Mike

[JessicaH]

Hi @jamesthrasher,

Thanks for reaching out.

I want to tag in some subject matter experts to see if they can assist with this.

Hi @derekcavaliero @Mike_Eastwood @MikeCormack, would you be able to share your thoughts with @jamesthrasher?

Thanks!

Jess