Customerly Chat Event Listener
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
Chatlio
Typeform
