Live Chat Event Listener
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>