Helpcrunch Chat Event Listener

Get insights into how users interact with your Helpcrunch chat widget and how these interactions impact your marketing funnel, conversions, website engagement and other business KPIs. Google Tag Manager and the Helpcrunch Chat event listener make tracking this interaction in your analytics tool easy.

How to track Helpcrunch Chat Interactions with google tag manager

Tracking Helpcrunch chat interactions in your analytics tools give you valuable insights into the impact these chat interactions have on your marketing funnel, conversions, and other business KPIs.

To implement the Helpcrunch chat activity tracking, you’ll need Google Tag Manager and the Helpcrunch chat event listener javascript code.

To begin, create a custom HTML tag where you’ll paste the event listener code and fire it on pageview or DOM ready (always recommended).

💡PRO TIP: if you installed the Helpcrunch chat script through Google Tag Manager, please use the DOM ready trigger instead.

The next step in this implementation is to create a custom event with the event name of [helpcrunch_chat_action], which gets fired on all chat activity

To get more information on what chat activity happened, you’ll need to create a dataLayer variable with the key [chatAction]

[chatAction] returns the following event description;

  • Visitor Sent Message
  • Opened Chat Widget
  • Closed Chat Widget
  • Agent Sent Message

You can use the [chatAction] dataLayer variable as event parameters or for streamlining your trigger to fire on specific Helpcrunch chat interactions.

On “Visitor Sent Message” and “Agent Sent Message” you can capture the userID in Helpcrunch, chat operator name, message, and type by creating dataLayer variables with the following keys;

[chatMessage] –> returns the message.

[chatUserID] –> the user ID in Helpcrunch

[chatOperator] –> the chat operator name

[chatMessageContent.0.type] –> Gives the message type, text, file, etc.

To start sending data to your analytics tools, you’ll have to create the appropriate tag and attach the [helpcrunch_chat_action] trigger you created.

<script>
//Track when your customer sends a message in chat 
HelpCrunch('onCustomerMessage', function (event) {
window.dataLayer.push({
"event": "helpcrunch_chat_action",
"ChatAction": "Visitor Sent Message",
"ChatEventDetail": event,
"chatMessage": event.detail.message.text,
"chatMessageContent": event.detail.message.content,
"chatOperator": event.detail.message.author_name,
"chatUserID": event.detail.message.cid
}); 
});
//Track when your customer opens the chat 
HelpCrunch('onChatOpen', function () {
window.dataLayer.push({
"event": "helpcrunch_chat_action",
"ChatAction": "Opened Chat Widget"
}); 
});
//Track when your customer closes the chat 
HelpCrunch('onChatClose', function () {
window.dataLayer.push({
"event": "helpcrunch_chat_action",
"ChatAction": "Closed Chat Widget"
}); 
});
//Track when your agents sends a message in chat 
HelpCrunch('onAgentMessage', function (event) {
window.dataLayer.push({
"event": "helpcrunch_chat_action",
"ChatAction": "Agent Sent Message",
"chatMessageContent": event.detail.message.content,
"chatMessage": event.detail.message.text,
"chatOperator": event.detail.message.author_name,
"chatUserID": event.detail.message.cid
}); 
});
</script>

Video of how to use the listener

Related Event Listener

Live Chat

Measure how users are interacting with your Livechat and fire your tags based on these actions using the Live Chat event listener.

Jivo Chat

the Jivo chat event listener makes it possible and easy for you to track Jivo chat interactions and enhance your measurement for success.
optin monster event listener

OptinMonster

Track Optin Monster pop up interactions and conversions in Google Tag Manager, using the datalayer information and events

download the google tag manager recipe for tracking Helpcrunch Chat Interactions

we make you smarter with data

made with ❤️

The DumbData Team
Before you leave, try out these free tools.
FREE GA4 AUDIT TOOL & UTM AUDIT TOOL