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>