Reporting & Analytics

jamesthrasher
Participant

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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>

 

 

2 Accepted solutions
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

View solution in original post

piersg
Solution
Key Advisor

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

 

 

 

 

View solution in original post

10 Replies 10
Djones
Participant

HubSpot Chat & Google Analytics Event Tracking

SOLVE

Hoping this helps someone.

 

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

kvlschaefer
Community Manager
Community Manager

HubSpot Chat & Google Analytics Event Tracking

SOLVE

Thanks for sharing, @Djones


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !
EXWE-GmbH
Member

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

 

0 Upvotes
piersg
Solution
Key Advisor

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

HubSpot Chat & Google Analytics Event Tracking

SOLVE

Thank you.

Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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
Participant

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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
Participant

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

0 Upvotes
Mike_Eastwood
Key Advisor | Gold Partner
Key Advisor | Gold Partner

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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

HubSpot Chat & Google Analytics Event Tracking

SOLVE

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   


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, in dem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !