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;

Start and end a chat
rate a chat
Expand and collapse a chat widget
restart a chat
view a chat widget in a popup state
when a user sends an email when an operator isn’t available
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>