Chaport Chat Event Listener

Measuring user interactions with your Chaport chat widget in your analytics tools gives you actionable insights into how these interactions impact business KPIs such as website engagement, conversions and overall marketing funnel.

How to track Chaport Chat Interactions with google tag manager

If you use Chaport to provide customer support to your website visitors, you can seamlessly push user interactions with your Chaport chat widget to your analytics tools (Google Analytics, Heap, Piwik Pro, Mixpanel).

For this implementation, you’ll create a new custom HTML tag, copy and paste the Chaport event listener in the tag

Add a trigger and fire in on DOM ready or Window Loaded.

Next is to create a custom event with the event name [chaport_Action], which triggers on all chaport Events.

For more information on the specific event that occurred, create a dataLayer variable with the key [ChatAction], which will return the following;

Chat initiated (meaning the user started a conversation)
chat widget expanded
chat widget collapsed
chat widget semiExpanded
chat widget unreadMessage (when you have an unread message)

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

With this data in your analytics, you can measure how these chat interactions impact conversions, your marketing funnel and other business KPIs.

<script>
//chat widget status update
window.chaport.on('widget.stateChange', function(widgetstate){
window.dataLayer.push({
"event": "chaport_Action",
"ChatAction": "Chat widget " + window.chaport.getWidgetState()
});
});
//Fires when the visitor starts a chat.
window.chaport.on('chat.started', function(listener) {
window.dataLayer.push({
"event": "chaport_Action",
"ChatAction": "Chat initiated"
}); 
});
</script>