Smartsupp Chat Event Listener

You can measure how users interact with your Smartsupp chat widget and use the data to understand how these interactions impact conversions and other business KPIs. This event listener provides you with rich data about the Smartsupp chat event.

How to track Smartsupp Chat Interactions with google tag manager

Enhance your marketing data with this Smartsupp event listener that automatically pushes Smartupps activity into the dataLayer for use in your analytics.

To capture this data in Analytics, such as Google Analytics (Universal and GA4), Mixpanel, Piwik Pro, etc. You can use Google Tag manager to make this possible and seamless.

The first step is to create a new tag in Google Tag Manager, a custom HTML tag type (copy and paste this Smartsupp chat event listener code in this tag), give it a name, and set it to trigger on pageview or DOM ready.

💡 Pro Tip: fire on DOM ready if you implemented the Smartsupp chat widget through GTM).

What this event listener script does, is to listen for Smartsupp events (message sent and message received), then fire a dataLayer event [SmartsuppChatEvent] about the event and its attributes (such as visitorID, chatAction, ChatID, messageID, etc.)

The next step is to create the variables that you need;
[chatAction] –> tells you the action type, message sent or received
[chatBoxID] –> returns the chat widget ID
[visitorID] –> has the value of the visitor ID in Smartsupp
[messageID] –> which gives the unique ID of the message
[ChatSubType] –> returns the chat type, bot, contact, etc.
[userLang] –> is the language of the user browser

These variables can help you streamline your trigger with trigger conditions and can also be used to enrich your event data.

To complete the implementation, create a GTM trigger [SmartsuppChatEvent] which should fire your tag on all Smartsupp events

💡 To streamline your trigger in Google Tag Manager, use the variables you created to achieve your needs.

<script>
smartsupp('on', 'message_sent', function(message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'SmartsuppChatEvent',
'chatAction': 'message sent',
'chatBoxID': message.chatId,
'visitorID': message.visitorId,
'messageID': message.id,
'ChatSubType': message.subType,
'userLang': navigator.language
});
});
smartsupp('on', 'message_received', function(message) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'SmartsuppChatEvent',
'chatAction': 'message received',
'chatBoxID': message.chatId,
'visitorID': message.visitorId,
'messageID': message.id,
'ChatSubType': message.subType,
'userLang': navigator.language
});
});
</script>