Freshchat Event Listener

Unlock valuable insights into user engagement by tracking user interactions with your Freshchat chat widget. With the power of Google Tag Manager and the Freshchat event listener, you can seamlessly monitor and measure the impact on crucial business metrics like conversions, website engagement, and marketing funnel performance within your analytics tool.

How to track FreshChat Interactions with google tag manager

Using Google Tag Manager or your preferred tag management solution, in conjunction with the FreshChat event listener, you can effectively track and measure user interactions with the FreshChat chat widget on your website. Leveraging the insights derived from this data will provide a better understanding of how these interactions impact your website’s conversion rates and engagement metrics.

Whether you opt for Google Tag Manager or Piwik Pro TMS, the event listener enables you to track FreshChat chat interactions as events in 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 FreshChat event listener script. Provide a descriptive name for the tag and set it to trigger on either pageview or DOM ready.

Using the “DOM Ready” trigger is recommended.

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

The dataLayer event name assigned to all FreshChat chat interactions is “[freshChat_Event]“.

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

[freshEvent_type] – This variable provides detailed information about the type of FreshChat interaction that occurred. Examples include:

chat widget closed
chat widget opened
Chat trigger displayed
User has been created (when they also send their first message)
user receives a message
user sends a message
CSAT received
CSAT updated
file downloaded by the user

It would help if you also considered registering the following dataLayer variables, although they do not fire for every event:

[eventData] –> This object value contains information about the event that occurred. It is unavailable for open widgets, closed widgets, and user-created FreshChat interactions.

[fileURL] –> This variable includes the file URL of the user-downloaded file. It is only available for “file download” events.

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

<script>
//Fires when the chat widget is closed
window.fcWidget.on("widget:closed", function(resp) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'chat widget closed'
});
});
//Fires when the chat widget is opened
window.fcWidget.on("widget:opened", function(resp) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'chat widget opened'
});
});
// fires when a user has been created
window.fcWidget.on("user:created", function(resp) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'User has been created'
});
});
// fires when a user receives a message
window.fcWidget.on("message:received", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'user receives a message',
'eventData': data
});
});
// fires when a user sends a message
window.fcWidget.on("message:sent", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'user sends a message',
'eventData': data
});
});
// fires when a CSAT is received
window.fcWidget.on("csat:received", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'CSAT received',
'eventData': data
});
});
// fires when the received CSAT is updated
window.fcWidget.on("csat:updated", function(data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'CSAT updated',
'eventData': data
});
});
// fires after the user downloaded an asset sent by the Agent
window.fcWidget.on("download:file", function(response) {
if (response.success) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'freshChat_Event',
'freshEvent_type': 'file downloaded by the user',
'eventData': response,
'fileURL': response.data.url
});
}
});
</script>