Skip to main content

Support Board GTM Event Listener

Track Support Board chat widget interactions in GTM. Monitor widget open, messages, conversations, and agent events with SBChatOpen, SBMessageSent events.

support-boardchatwordpressgtmga4supportopen-source

Event fired

SBChatOpen

Key variable

conversation

Support Board

Overview

Support Board is an open-source chat and customer support plugin for WordPress. It fires native JavaScript events on the document that this listener intercepts.

Events fired: SBChatOpen, SBChatClose, SBMessageSent, SBMessageReceived, SBConversationStart Variables: conversation, message

Tracked Events

Event NameDescription
SBChatOpenWidget opens
SBChatCloseWidget closes
SBMessageSentVisitor sends message
SBMessageReceivedAgent replies
SBConversationStartNew conversation

Installation

html
<!-- GTM Custom HTML Tag: Support Board Listener -->
<script>
(function() {
  function sbPush(eventName, extra) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(Object.assign({ 'event': eventName }, extra || {}));
  }

  var sbEvents = {
    'SBChatOpen': function() { sbPush('SBChatOpen'); },
    'SBChatClose': function() { sbPush('SBChatClose'); },
    'SBMessageSent': function(e) {
      sbPush('SBMessageSent', { message: e.detail && e.detail.message });
    },
    'SBMessageReceived': function(e) {
      sbPush('SBMessageReceived', { message: e.detail && e.detail.message });
    },
    'SBConversationStart': function(e) {
      sbPush('SBConversationStart', { conversation: e.detail });
    }
  };

  Object.keys(sbEvents).forEach(function(ev) {
    document.addEventListener(ev, sbEvents[ev]);
  });
})();
</script>

Data Layer Output

json
{
  "event": "SBMessageSent",
  "message": "I need help with my order"
}

Trigger Configuration

Trigger: CE – SB Chat Open → Event Name: SBChatOpen Trigger: CE – SB Message Sent → Event Name: SBMessageSent

GA4 Mapping

GA4 EventGTM TriggerParameters
chat_widget_openSBChatOpenchat_platform: "support_board"

Related Listeners