Customerly Chat Event Listener

Effortlessly track and capture Customerly chat interactions with the help of Customerly chat event listener and Google Tag Manager. Collect valuable user engagement data and seamlessly send it to your preferred marketing analytics tools, including Google Analytics, Piwik Pro, Heap, Mixpanel, Amplitude, Fullstory, and more. Utilize the Customerly chat interactions data to enhance your customer support strategy and drive impactful improvements to your business KPIs.

How to track Customerly Chat Interactions with google tag manager

With the assistance of the Customerly chat event listener and Google Tag Manager, you can effectively track and measure user interactions with the Customerly chat on your website. By leveraging the insights derived from this data, you can better understand how these interactions impact your website conversions.

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

To initiate the implementation in GTM, create a custom HTML tag to which you will add the Customerly event listener script. Give the tag a descriptive name and set it to trigger on pageview or DOM ready. 

I would recommend using the “DOM Ready” trigger.

This script actively listens for user interactions with your website’s embedded Customerly chat widget and sends the corresponding events and their attributes to the dataLayer.

The dataLayer event name emitted for all Customerly chat interactions is “[customerly_Event]“.

Next, set up a dataLayer variable to provide additional context about the event. The event variable is as follows:

[customerly_action] –> This variable provides more details about the type of Customerly interaction that occurred. Examples include:

  • Chat widget opened
  • Chat widget closed
  • Chat trigger displayed
  • New chat lead
  • Starts a new conversation
  • Answer profiling question
  • Shown profiling question
  • Answers a Realtime Video Call
  • Rejects a Realtime Video Call
  • Opens a Help Center Article

Additionally, it can be beneficial to create the following dataLayer variables, although they do not fire for every event:

[profiling_answer] –> This variable contains the user’s answer to a profiling question or displays the question to the user.

[profiling_attribute] –> This variable includes the user’s profile attribute value based on the displayed profiling question.

[customerly_trigger_id] –> This variable returns the trigger ID of the chat trigger that was displayed to the website visitor.

[customerly_user_email] –> This variable returns the user’s email when they submit a chat lead form.

[article_object_data] –> This variable holds an object with the details of the Help Center article the user interacted with.

Finally, add your tags to the created trigger, apply the appropriate variables where necessary, preview your changes, and publish them.

<script>
//fires when a user opens the chat widget
customerly.onChatOpened = function() { 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'chat widget opened'
}); 
}
//fires when a user closes the chat widget 
customerly.onChatClosed = function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'chat widget closed'
}); 
}
//triggered when the customer is receiving a chat trigger message
customerly.onTriggerFired = function(triggerId) { 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'chat trigger displayed',
'customerly_trigger_id': triggerId
}); 
}
//fires when a chat lead is generated
customerly.onLeadGenerated = function(email) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'new chat lead',
'customerly_user_email': email
}); 
}
//fires when a user starts a new conversation
customerly.onNewConversation = function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'starts a new conversation'
}); 
}
//triggered when the lead answer to any of the profiling questions 
customerly.onProfilingQuestionAnswered = function(attribute, value) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'answer profiling question',
'profiling_answer': value,
'profiling_attribute': attribute
}); 
}
//triggered when any of the profiling questions have been shown to the visitor 
customerly.onProfilingQuestionAsked = function(attribute) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'shown profiling question',
'profiling_attribute': attribute
}); 
}
//triggered when the client answers a Realtime Video Call
customerly.onRealtimeVideoAnswered = function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'answers a Realtime Video Call'
}); 
}
//triggered when the client rejects a Realtime Video Call
customerly.onRealtimeVideoRejected = function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'rejects a Realtime Video Call'
}); 
}
// triggered when the client opens a Help Center Article within the live chat widget.
customerly.onHelpCenterArticleOpened = function(article) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'customerly_Event',
'customerly_action': 'opens a Help Center Article',
'article_object_data': article
}); 
}
</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.

Chatlio

Enhance your event data by tracking users’ interactions with your embedded Chatlio chat widget.

Typeform

Ensure you always complete all Type form conversions by monitoring successful Type form submissions made by users.

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