ChatStack Event Listener
How to track Visitor Interactions with ChatStack Chat Widget with google tag manager
Here’s how to use Google Tag Manager and the ChatStack chat event listener to track interactions with the ChatStack widget in analytics platforms like Google Analytics (GA4), Piwik Pro, and others.
Step 1: Create a Custom HTML Tag & Trigger
Start by creating a new custom HTML tag in Google Tag Manager. Copy and paste the ChatStack event listener script into this tag. Then, attach a trigger that fires the tag on DOM Ready, ensuring the ChatStack chat widget is fully loaded on the website.
About the ChatStack Chat Event Listener:
The ChatStack event listener will register a dataLayer event named “[chatStackEvent]” for the following types of interactions with the ChatStack widget:
- Chat widget status change
- Chat widget state change (maximize and minimize)
- Chat initiation
Step 2: Create a ChatStack Custom Event Trigger
Next, create a custom event trigger in Google Tag Manager, using “[chatStackEvent]” as the event name. Name the trigger and save it for later use in your tags.
Step 3: Define ChatStack DataLayer Variables
To provide more context about the type of ChatStack interaction, create a set of dataLayer variables in Google Tag Manager. Use the following keys in your variable configuration:
- [chatStack_Action]: Describes the specific ChatStack interaction.
- [chatStack_Status]: Returns the status of the ChatStack widget at the time of the interaction.
- [chatStack_Widget_State]: Provides context about the widget’s state (e.g., maximized, minimized).
- [chatStack_chat_state]: Captures the state of the chat session.
- [event_data]: An object containing details of the ChatStack event interaction.
Step 5: Capture Event Data In GA4, Piwik Pro, etc.
Once the variables are created, use them in your tags, such as a Google Analytics (GA4) event tag, to capture these interactions in your analytics platform.
You can also track these ChatStack chat widget interactions in Piwik Pro Analytics using either Google Tag Manager or Piwik Pro Tag Manager.
Note: The event listener is Tag Manager agnostic, meaning it can be used with other Tag Management Solutions. However, the implementation principles remain the same.
To expedite your setup, scroll down this resource page to find a GTM recipe template that you can download and use.
<script>
// Chat Status Changed Event Received
Chatstack.events.on('StatusModeChanged', function (e, data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatStackEvent',
'chatStack_Action': "chat_session_status_" + data.status, // Corrected
'chatStack_Status': data.status, // Corrected
'chatStack_Widget_State': Chatstack.windowState,
'chatStack_chat_state': Chatstack.chatState,
'event_data': data
});
});
// Chat State Changed Event Received
Chatstack.events.on('ChatStateChanged', function (e, data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatStackEvent',
'chatStack_Action': "chat_state_" + data.state, // Corrected
'chatStack_Status': Chatstack.statusMode, // Optional: no direct status in data
'chatStack_Widget_State': Chatstack.windowState,
'chatStack_chat_state': data.state, // Corrected
'event_data': data
});
});
// Initiate Chat State Changed Event Received
Chatstack.events.on('InitiateChatStateChanged', function (e, data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'chatStackEvent',
'chatStack_Action': "initiate_chat_state_" + data.state, // Corrected
'chatStack_Status': Chatstack.statusMode, // Optional: no direct status in data
'chatStack_Widget_State': Chatstack.windowState,
'chatStack_chat_state': data.state, // Corrected
'event_data': data
});
});
</script>
Video of how to use the listener
Related Event Listener
Support Board
Zoho Sales IQ
Formidable Form
download the google tag manager recipe for tracking Visitor Interactions with ChatStack Chat Widget
