Chatlio chat Event Listener

Capture valuable user engagement data by measuring interactions with Chatlio chat. Utilize event listeners to automatically track and capture these chat interactions, enabling you to leverage Google Tag Manager to seamlessly send the data to your preferred analytics platforms such as Google Analytics 4, Piwik Pro, Mixpanel, and more.

How to track Chatlio Interactions with google tag manager

The help of the Chatlio chat event listener with Google Tag Manager allows for effective tracking and measurement of user interactions with the Chatlio chat embedded on your website. By harnessing the insights from this data, you can better understand how these interactions influence your website’s conversion rates.

Whether you utilize Google Tag Manager or Piwik Pro TMS, the event listener transmits Chatlio chat interaction events to various analytics tools, such as Google Analytics (GA4), Mixpanel, PiwikPro, and more.

To initiate the implementation within GTM, create a custom HTML tag and incorporate the Chatlio event listener script. Assign a descriptive name to the tag and set it to trigger on either pageview or DOM ready.

Using the “DOM Ready” trigger is highly recommended.

This script actively listens for user interactions with your website’s embedded Chatlio chat widget, capturing relevant events and their associated attributes and forwarding them to the dataLayer.

The dataLayer event name assigned to all Chatlio chat interactions is “[chatlio_event]“.

Next, establish a dataLayer variable to provide additional context for the event. The event variable is defined as follows:

[chatlio_action] – This variable furnishes further details about the specific type of Chatlio interaction that transpired. Examples of these interactions include:

  • chat widget minified
  • chat widget expanded
  • chat trigger message shown
  • visitor sends first message
  • visitor sends message
  • visitor receives message
  • submits prechat form
  • conversation ended

In the last stage of the instrumentation, you’ll create your measurement tags, add your custom event trigger, apply the relevant variables as needed, preview your setup, and publish them.

 

<script>
//fires When the widget is collapsed
document.addEventListener("chatlio.collapsed", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'chat widget minified'
});
});
//fires When the widget is expanded
document.addEventListener("chatlio.expanded", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'chat widget expanded'
});
});
//fires When the widget fires a triggered message
document.addEventListener("chatlio.trigger", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'chat trigger message shown'
});
});
//fires When the visitor sends their first message to you
document.addEventListener("chatlio.firstMessageSent", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'visitor sends first message'
});
});
//fires When the visitor sends message
document.addEventListener("chatlio.messageSent", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'visitor sends message'
});
});
//fires When the visitor receives message
document.addEventListener("chatlio.messageReceived", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'visitor receives message'
});
});
//fires When the visitors submits the pre-chat form
document.addEventListener("chatlio.preChatInfoSubmitted", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'submits prechat form'
});
});
//fires When the visitor or the operator ends the chat
document.addEventListener("chatlio.conversationEnded", function(event){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatlio_event',
'chatlio_action': 'conversation ended'
});
});
</script>

Video of how to use the listener

Related Event Listener

Freshchat

Capture user interactions with your Freshchat Chat widget by implementing this event listener.

Customerly.io

Gain valuable insights into user engagement with your Customerly chat widget and enrich your marketing data.

Unbounce Form

Capture the successful submission of your Unbounce forms, and trigger your marketing pixels on this action.

download the google tag manager recipe for tracking Chatlio 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