Team Support Chat Event Listener
How to track Website Visitor's Engagement With The TeamSupport Chat Widget with google tag manager
This instructional guide will show you how to use the TeamSupport chat event listener and Google Tag Manager (GTM) to track website visitors’ interactions with the TeamSupport chat widget in analytics platforms such as Google Analytics (GA4), Piwik Pro, and others. By implementing the steps below, you’ll gain deeper insights into user engagement with the chat widget.
Step 1: Add the TeamSupport Chat Event Listener Script in GTM
Start by creating a new Custom HTML tag in Google Tag Manager. Copy and paste the TeamSupport chat event listener script (provided above) into this tag. Name the tag appropriately, such as “TeamSupport Chat Listener,” and configure it to fire using the DOM Ready trigger type.
💡 Pro Tip: Firing on DOM Ready ensures the event listener is initialized only after the necessary elements of your webpage are loaded, particularly if the TeamSupport chat widget is implemented via GTM.
This event listener script monitors various user interactions with the TeamSupport chat widget and sends events to the dataLayer with the event name teamSupport_interactions. These events include interactions like chat message sent, message received, chat opened, and more.
Step 2: Create a Custom Event Trigger in GTM
To process the events captured by the listener, create a Custom Event Trigger in GTM:
- Navigate to the Triggers section.
- Click New, then select Custom Event as the trigger type.
- Enter teamSupport_interactions as the event name.
- Save the trigger with a descriptive name like “TeamSupport Chat Interaction Trigger.”
Step 3: Define DataLayer Variables in GTM
Next, create the following Data Layer Variables to extract specific details from the dataLayer events:
- tsAction: Represents the type of interaction or event (e.g., ChatMessageSent, ChatMessageReceived).
- tsData: Contains additional data about the interaction in an object format. You can extract specific attributes from this object based on your reporting needs, such as:
- Agent name
- Message content
- Visitor email
- Interaction status
💡 Pro Tip: Use GTM’s Data Layer Variable feature to pull specific keys from the tsData object for advanced tracking and segmentation.
Step 4: Create Marketing Tags and Attach Triggers
Once your triggers and variables are configured, you’re ready to create your marketing tags (e.g., Google Analytics [GA4] event tags, Piwik Pro tags) to track these interactions.
- Create a new tag in GTM for your analytics platform.
- Use the trigger created in Step 2 to fire the tag when a teamSupport_interactions event occurs.
- Leverage the variables defined in Step 3 to populate event parameters, such as:
- Action (tsAction)
- Additional interaction details (tsData)
This allows you to add meaningful context to the TeamSupport chat widget events captured in your analytics reports.
Additional Notes:
The TeamSupport chat event listener script can be implemented using GTM and other Tag Management Solutions (TMS). The core implementation principles remain consistent, ensuring flexibility across platforms.
💡 Quick Start: Scroll down this resource page to download a GTM recipe template that you can customize and use to track TeamSupport chat widget interactions seamlessly.
<script>
(function () {
// Utility function to push dataLayer event
function pushToDataLayer(action, data) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "teamSupport_interactions",
tsAction: action,
tsData: data
});
}
// Close Event
SnapEngage.setCallback('Close', function (type, status) {
pushToDataLayer('Close', { type: type, status: status });
});
// ChatMessageReceived Event
SnapEngage.setCallback('ChatMessageReceived', function (agent, msg) {
pushToDataLayer('ChatMessageReceived', { agent: agent, message: msg });
});
// ChatMessageSent Event
SnapEngage.setCallback('ChatMessageSent', function (msg) {
pushToDataLayer('ChatMessageSent', { message: msg });
});
// MessageSubmit Event
SnapEngage.setCallback('MessageSubmit', function (email, msg) {
pushToDataLayer('MessageSubmit', { email: email, message: msg });
});
// Minimize Event
SnapEngage.setCallback('Minimize', function (isMinimized, chatType, boxType) {
pushToDataLayer('Minimize', {
isMinimized: isMinimized,
chatType: chatType,
boxType: boxType
});
});
// Open Event
SnapEngage.setCallback('Open', function (status) {
pushToDataLayer('Open', { status: status });
});
// OpenProactive Event
SnapEngage.setCallback('OpenProactive', function (agent, msg) {
pushToDataLayer('OpenProactive', { agent: agent, message: msg });
});
// StartChat Event
SnapEngage.setCallback('StartChat', function (email, msg, type) {
pushToDataLayer('StartChat', {
email: email,
message: msg,
type: type
});
});
// StartCallme Event
SnapEngage.setCallback('StartCallMe', function (phone) {
pushToDataLayer('StartCallMe', { phone: phone });
});
// SwitchWidget Event
SnapEngage.setCallback('SwitchWidget', function (widget) {
pushToDataLayer('SwitchWidget', { widget: widget });
});
// Button Event
SnapEngage.setCallback('Button', function (buttonId) {
pushToDataLayer('Button', { buttonId: buttonId });
});
// ChatEnded Event
SnapEngage.setCallback('ChatEnded', function (reason) {
pushToDataLayer('ChatEnded', { reason: reason });
});
// Rating Prompt Clicked Event
SnapEngage.setCallback('RatingPromptClicked', function (rating) {
pushToDataLayer('RatingPromptClicked', { rating: rating });
});
})();
</script>
Video of how to use the listener
Related Event Listener
Salesmate
Userpilot
Tidio Chat
download the google tag manager recipe for tracking Website Visitor's Engagement With The TeamSupport Chat Widget
