Live Chat Event Listener

Live chat makes it possible to provide customer support to your customer, but tracking in your analytics tools how users engage with this chat widget can help enhance your measurement and provide you with helpful insights.

How to track Live Chat Interactions with google tag manager

If you have a Live Chat widget on your website, you can measure how users interact with the chat widget.

Use the data to build a marketing audience, segmentation analysis on how the interaction impacts your conversions, website engagement metrics, marketing funnel, and other KPIs.

You can use Google Tag Manager and the Live chat event listener for implementing this tracking.

Sending the data to your analytics tools (Google Analytics, Piwik Pro, Yandex Metrica, Mixpanel, Amplitude, Heap, etc.)

Begin by creating a new custom HTML tag type in Google Tag Manager, copy and paste the Live chat event listener code in this tag, fire it on DOM Ready or Window loaded (Recommended)

💡PRO TIP: use the DOM ready if you implemented live chat through Google Tag Manager

What this code does is listen for Live Chat activities such as;

Minimize and Maximize chat widget
chat rating
send a message, file or rich-text
greeting message impression and dismissal
Clicking on the rich message button
submits pre-chat, survey or ticket form

To fire your tags when this event happens, you can create a custom event trigger with the name [livechat interaction]

🚨 This event [livechat interaction] gets fired for all Live chat interactions.

Using Google Tag Manager dataLayer variables, you can get more data about the chat interactions, which includes;

[chatAction] –> tells you what chat action occurred (examples are minimized chat widget, submit the pre-chat form, dismiss greeting message, etc.)

[greetingId] –> returns the greeting ID (for greeting related events).

To have these data available in your analytics tool or advertising platform, you’ll have to create the needed tag and attach the Live chat trigger.

💡 You can streamline the event to fire on specific Livechat interactions by using the dataLayer variables and trigger conditions

<script>
//when the chat window state is changed, minimized, maximized or hidden
LiveChatWidget.on('visibility_changed', onVisibilityChanged)
function onVisibilityChanged(data) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: "chat window" + ' ' + data.visibility
})
};
// when form is submitted, prechat, survey or ticket
LiveChatWidget.on('form_submitted', onFormSubmitted)
function onFormSubmitted(data) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: "submitted" + ' ' + data.type + " form"
})
};
// user sents a message, file or rich message
LiveChatWidget.on('new_event', onNewEvent)
function onNewEvent(event) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: event.type + " sent"
})
};
//It is called after the customer has rated the chat, or cancelled the previous rating.
LiveChatWidget.on('rating_submitted', onRatingSubmitted)
function onRatingSubmitted(value) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: value + " rating submitted"
})
};
//It is called after the greeting has been displayed to the customer.
LiveChatWidget.on('greeting_displayed', onGreetingDisplayed)
function onGreetingDisplayed(greeting) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: "greeting message displayed",
greetingId: greeting.id
})
};
//It is called after the greeting has been cancelled by the customer
LiveChatWidget.on('greeting_hidden', onGreetingHidden)
function onGreetingHidden(greeting) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: "greeting message dismissed",
greetingId: greeting.id
})
};
//It is called after the rich message button has been clicked by the customer.
LiveChatWidget.on('rich_message_button_clicked', onRichMessageButtonClicked)
function onRichMessageButtonClicked(data) {
dataLayer.push({ 
event: 'livechat interaction', 
chatAction: "clicked rich message button",
greetingId: greeting.id
})
}; 
</script>