Support Board Event Listener
How to track Support Board Chat Interactions with google tag manager
Here’s how to use the Support Board chat event listener and a Tag Management Solution (TMS) like Google Tag Manager to track website visitor interactions with the Support Board Chat widget on your site and send the data to analytics tools like Google Analytics (GA4), Piwik Pro, and others.
1. Create an Event Listener Custom HTML Tag & Attach a Trigger:
- Begin by creating a custom HTML tag in Google Tag Manager.
- Paste the Support Board chat event listener script into this tag.
- Name the tag and add a trigger to fire it.
It’s recommended that you fire this script only after the Support Board chat widget has loaded on your website. To ensure the tag fires at the appropriate time, you can use a DOM Ready or Window Loaded trigger type.
2. Understand the DataLayer Events:
The Support Board chat event listener monitors visitor interactions with the chat widget and triggers the following DataLayer events:
- [SBChatOpen]: When the chat widget is maximized (opened).
- [SBChatClose]: When the chat widget is minimized (closed).
- [SBNewConversationCreated]: When a user starts a new conversation.
- [SBConversationOpen]: When a user opens an existing conversation thread.
- [SBArticles]: When a user engages with articles within the chat widget.
- [SBRegistrationForm]: When a user successfully submits the lead form through the chat widget.
- [SBPopup]: When a pop-up message is displayed or closed.
- [SBMessageSent]: When a user sends a message through the chat widget.
3. Create Custom Event Triggers:
Set up custom event triggers for each of these DataLayer events, which you’ll later use to fire your analytics tags.
4. Send Data to Analytics Tools:
To send this chat widget interaction data to tools like Google Analytics (GA4), Piwik Pro, etc., you’ll need to create their respective event tags, attach the custom event triggers you’ve created for the dataLayer event, and make the necessary tag configuration.
Some of the dataLayer events include dataLayer keys, which you can create as dataLayer variables in GTM and use to add context to your analytics events.
You should Interact with the Support Board chat widget to identify which DataLayer variables are relevant.
Scroll further down the resource page to find a downloadable GTM recipe template. Importing this into your container can help expedite the setup process.
<script>
// Function to push event data to the GTM dataLayer
function pushToDataLayer(eventName, data) {
window.dataLayer = window.dataLayer || [];
var eventData = Object.assign({ event: eventName }, data);
window.dataLayer.push(eventData);
}
// Event listeners for Support Board events
$(document).on("SBChatOpen", function (e) {
pushToDataLayer("SBChatOpen", {});
});
$(document).on("SBChatClose", function (e) {
pushToDataLayer("SBChatClose", {});
});
$(document).on("SBNewConversationCreated", function (e, response) {
pushToDataLayer("SBNewConversationCreated", {
conversation: response
});
});
$(document).on("SBConversationOpen", function (e, response) {
pushToDataLayer("SBConversationOpen", {
conversation: response
});
});
$(document).on("SBArticles", function (e, response) {
pushToDataLayer("SBArticles", {
articles: response.articles,
articleId: response.id
});
});
$(document).on("SBRegistrationForm", function (e, response) {
pushToDataLayer("SBRegistrationForm", {
user: response.user,
extra: response.extra
});
});
$(document).on("SBPopup", function (e, response) {
pushToDataLayer("SBPopup", {
popupContent: response
});
});
$(document).on("SBMessageSent", function (e, response) {
pushToDataLayer("SBMessageSent", {
userId: response.user_id,
conversationId: response.conversation_id,
message: response.message,
attachments: response.attachments,
conversationSource: response.conversation_source
});
});
</script>
Video of how to use the listener
Related Event Listener
Kustomer
Freshchat
PaperForm
