Pure Chat Event Listener

Seamlessly and easily track how users interact with your Pure chat widget. Using this event listener and Google Tag Manager, you can capture Pure chat activity and push the data to your analytics tools (Google Analytics 4, Piwik Pro, Mixpanel, etc.) for making insightful data analysis.

How to track Pure Chat Interactions with google tag manager

Using this Pure chat event listener and Google Tag Manager, you can capture rich event data of user interactions with your Pure chat widget and seamlessly make them available in your analytics tools.

To start this implementation in Google Tag Manager, create a new custom HTML tag type, copy the Pure Chat API event listener code, paste it in the tag and add a pageview or DOM Ready (recommended) trigger.

💡 Pro Tip: fire on DOM ready if you implemented the Pure chat through Google Tag Manager

What the code does is to listen for Pure Chat interactions and then push the event in the dataLayer, these events are;

  1. Start and end a chat
  2. rate a chat
  3. Expand and collapse a chat widget
  4. restart a chat
  5. view a chat widget in a popup state
  6. when a user sends an email when an operator isn’t available
  7. when a visitor detail changes

To trigger your tags when these events happen, you’ll have to create a custom event with the event name [pure chat interaction], which gets fired on all Pure chat activity.

Alongside the event, there are dataLayer variables you can create to understand what specific interaction occurred and what data, Pure Chat has about the user.

These variables include;

[chatAction] –> returns the chat action

[chatId] –> the Pure chat chatbox ID

[PureChat_User_Name] –> the user name if they’ve submitted a Pure chat form

[PureChat_User_Email] –> the user email if they’ve submitted a Pure chat form

[PureChat_User_Phone] –> the user phone if they’ve submitted a Pure chat form

[PureChat_User_1stMessage] –> the user 1st message

[chatTranscriptID] –> the Pure chat transcript ID

[chatRating] –> the Pure chat transcript ID

You can then create a generic trigger or specific one using the [chatAction] dataLayer variable to listen for specific Pure chat interactions.

If you are using the generic event listener [pure chat interaction], you can use the dataLayer variable you created to enrich the data, 

using them as parameters of the event, and dynamically capture information about each event, the chat interaction type, and other insightful data for making analysis.

With segmentation, you can use the data in analytics like Google Analytics, Piwik Pro, Mixpanel, etc. in measuring how the user interacts with the Pure chat widget, how the live chat impacts website engagement, your marketing funnel, conversion, and other business KPIs.

<script>
// visitor starts a Chat
purechatApi.on('chat:start', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'chat_started',
'chatId': args.chatboxId,
'PureChat_User_Name': args.name,
'PureChat_User_Email': args.email,
'PureChat_User_Phone': args.phoneNumber,
'PureChat_User_1stMessage': args.question
});
});
// visitor ends a chat
purechatApi.on('chat:end', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'chat_ended',
'chatId': args.chatboxId,
'PureChat_User_Name': args.name,
'PureChat_User_Email': args.email,
'PureChat_User_Phone': args.phoneNumber,
'PureChat_User_1stMessage': args.question,
'chatTranscriptID': args.transcriptId
});
});
// Visitor has rated the chat
purechatApi.on('chat:rate', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'visitor_rate_chat',
'chatId': args.chatboxId,
'PureChat_User_Name': args.name,
'PureChat_User_Email': args.email,
'PureChat_User_Phone': args.phoneNumber,
'PureChat_User_1stMessage': args.question,
'chatTranscriptID': args.transcriptId,
'chatRating': args.rating
});
});
// Visitor collapses chat box
purechatApi.on('chatbox:collapse', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'Chatbox was collapsed',
'chatId': args.chatboxId
});
});

// Visitor expands chatbox
purechatApi.on('chatbox:expand', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'Chatbox was expanded',
'chatId': args.chatboxId
});
});

// Chat box popped-out into new window
purechatApi.on('chatbox:poppedOut', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'Chatbox was popped out into a new window',
'chatId': args.chatboxId
});
});
// Fired whenever a visitor restarts the chat box after a closed chat
purechatApi.on('chatbox:restart', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'Chat box was restarted by the visitor',
'chatId': args.chatboxId
});
});
// Fired whenever a visitor sends an email from the chat box when no operators are available.
purechatApi.on('email:send', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'An email was sent while you were unavailable',
'chatId': args.chatboxId,
'PureChat_User_Name': args.name,
'PureChat_User_Email': args.email,
'PureChat_User_Phone': args.phoneNumber,
'PureChat_User_1stMessage': args.question
});
});
// Fired whenever a visitor detail changes
purechatApi.on('email:send', function (args) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'pure chat interaction',
'chatAction': 'visitor detail has changed',
'chatId': args.chatboxId,
'PureChat_User_Name': args.name,
'PureChat_User_Email': args.email,
'PureChat_User_Phone': args.phoneNumber,
'PureChat_User_1stMessage': args.question
});
});
</script>

Video of how to use the listener

Related Event Listener

Chaport

Easily track when users engage with your Chaport chat widget, and fire your marketing pixels when these actions happen.

Olark Chat

With the Olark chat widget, you can track user interactions with the chat widget and fire your pixels/tag on these interactions & conversions.

Hubspot Live Chat

An event listener that makes it possible for you to track Hubspot chat interactions and trigger your tags when these interactions occur.

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