Tidio Chat Event Listener

Want to measure how your website visitors interact with your Tidio chat widget. You can use this Tidio chat event listeners and Google Tag Manager to track these interactions in your measurement stack (Google Analytics 4, Piwik Pro, Mixpanel, Amplitude, Segment, etc.)

How to track Tidio Chat Interactions with google tag manager

Enhance the data in your measurement stacks (Google Analytics, Piwik Pro, Mixpanel, etc.) with Tidio chat interaction data.

With this data, you can have valuable insights into what impact does these interactions have on your marketing funnel, conversions, website engagement metrics, and other business KPIs.

Google Tag Manager, and the Tidio chat event listener script, will be needed for this implementation.

Your first step will be to copy, and paste the event listener script in the GTM custom HTML tag and fire it on pageview or DOM ready (always recommended).

PRO TIP: if you installed the Tidio chat script through Google Tag Manager, please use the DOM-ready trigger instead.

Your next step should be creating a custom event with the name [Tidio_chat_interaction], which happens on all Tidio chat activity.

DataLayer variable with the key [chatAction] should be created for you to capture in GTM, the Tidio chat event type.

[chatAction] returns the following event description;

Opened Tidio Chat widget
Closed Tidio Chat widget
User Sent First Message
Message Sent By Operator
Message Sent By Visitor
Tidio Prefill Form Submitted
Tidio Chat Status

You can use the [chatAction] dataLayer variable as an event parameter or for streamlining your trigger to fire on specific Tidio chat interactions.

Connect your marketing tags to the trigger and use the dataLayer variables you created to push more information about each Tidio chat interaction.

<script>
//fires on opening tidio chat
window.tidioChatApi.on("open", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Opened Tidio Chat widget'
});
});
// fires on closing tidio chat
window.tidioChatApi.on("close", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Closed Tidio Chat widget'
});
});
// fires on first user message
window.tidioChatApi.on("conversationStart", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'User Sent First Message'
});
});
//fires when an operator sends a mesaage
window.tidioChatApi.on("messageFromOperator", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Message Sent By Operator'
});
});
//fires when a visitor sends a mesaage
window.tidioChatApi.on("messageFromVisitor", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Message Sent By Visitor'
});
});
//fires when a visitor submits prefill form
window.tidioChatApi.on("preFormFilled", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Tidio Prefill Form Submitted'
});
});
//fires when Tido chat status change
window.tidioChatApi.on("setStatus", function(onTidioChatApiReady){
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'Tidio_chat_interaction',
'chatAction': 'Tidio Chat Status'
});
});
</script>