Helpcrunch Chat Event Listener
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
Jivo Chat
OptinMonster
