OnWeb Chat Event Listener

Use this event listener to track user interactions with your embedded OnWeb chat widget. With Google Tag Manager, you can send the data to Google Analytics 4, Piwik Pro, Mixpanel, Post Hog, etc. You can use this insight to measure how these interactions impact your business KPIs.

How to track OnWeb Chat Interactions with google tag manager

In your analytics stacks (Google Analytics, Piwik Pro, Mixpanel, etc.) you can track how users interact with the embedded OnWeb chat widget on your website.

This helps you in understanding the impact these interactions have on your marketing funnel, conversions, website engagement metrics, and other business KPIs.

For this implementation, you’ll be using Google Tag Manager and the OnWeb chat event listener script.

The first step will be to copy, and paste the event listener script in the GTM custom HTML tag and fire it on pageview or DOM ready (always recommended).

PRO TIP: if you installed the OnWeb chat script through Google Tag Manager, please use the DOM-ready or Window Loaded trigger instead.

Your next step should be creating a custom event with the name [onWebChat_Action], which happens on all OnWeb chat activity.

The next step will be creating a DataLayer variable with the key [chatAction], which gives us more information on the type of OnWeb chat interaction that happened.

the [chatAction] returns the following event description;

Clicked Chat Widget
Maximized Chat Widget
Minimized Chat Widget
Trigger Activated
Visitor is Typing

You can use the [chatAction] dataLayer variable as an event parameter or for streamlining your trigger to fire on specific OnWeb chat interactions.

Some of the optional DataLayer variables, you might have to create are;

[ChatStatus] -> Gives you info on the chat status, and it’s available on all OnWeb chat interactions

[chatUserName] -> Captures the website visitor’s name, if it has been provided during their chat session

[chatUserEmail] -> Captures the website visitor’s email, if it has been provided during their chat session

[chatUserPhone] -> Captures the website visitor’s phone number, if it has been provided during their chat session

Finally, to complete the implementation, you’ll have to add your marketing tags and attach the OnWeb chat trigger.

<script>
// executed when a visitor clicks on the chat widget
onWebChat.set("onClick",function(){ 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onWebChat_Action',
'chatAction': 'Clicked Chat Widget',
'ChatStatus': onWebChat.get("status"),
'chatUserName': onWebChat.get("name"),
'chatUserEmail': onWebChat.get("email"),
'chatUserPhone': onWebChat.get("phone")
}); 
}); 
// executed when the chat widget is maximized
onWebChat.set("onMaximize",function(){ 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onWebChat_Action',
'chatAction': 'Maximized Chat Widget',
'ChatStatus': onWebChat.get("status"),
'chatUserName': onWebChat.get("name"),
'chatUserEmail': onWebChat.get("email"),
'chatUserPhone': onWebChat.get("phone")
}); 
}); 
// executed when the chat widget is minimized
onWebChat.set("onMinimized",function(){ 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onWebChat_Action',
'chatAction': 'Minimized Chat Widget',
'ChatStatus': onWebChat.get("status"),
'chatUserName': onWebChat.get("name"),
'chatUserEmail': onWebChat.get("email"),
'chatUserPhone': onWebChat.get("phone")
}); 
});
// executed when a trigger is activated
onWebChat.set("onTrigger",function(){ 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onWebChat_Action',
'chatAction': 'Trigger Activated',
'ChatStatus': onWebChat.get("status"),
'chatUserName': onWebChat.get("name"),
'chatUserEmail': onWebChat.get("email"),
'chatUserPhone': onWebChat.get("phone")
}); 
}); 
// executed when a visitor starts to write
onWebChat.set("onStartWriting",function(){ 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'onWebChat_Action',
'chatAction': 'Visitor is Typing',
'ChatStatus': onWebChat.get("status"),
'chatUserName': onWebChat.get("name"),
'chatUserEmail': onWebChat.get("email"),
'chatUserPhone': onWebChat.get("phone")
}); 
}); 
</script>