Message Bird Event Listener

Monitor the interactions of your website users with the Message Bird chat widget, and record this engagement as events or conversions within your analytics stack, encompassing tools like Google Analytics (GA4), Mixpanel, Piwik Pro, and others. Using Google Tag Manager along with the Message Bird chat event listeners, you can effectively capture user interactions with your website’s embedded Message Bird chat widget.

How to track Message Bird Chat Interactions with google tag manager

Utilise Google Tag Manager along with the Message Bird chat event listener script to track website interactions with your Message Bird chat widget as analytics events within your analytics stacks (Google Analytics, Piwik Pro, Mixpanel, etc.).

Implementing this event listener code in Google Tag Manager is straightforward, which helps facilitate the emission of DataLayer events when users minimise and maximise the embedded Message Bird chat widget on your website.

To initiate the setup process, copy the event listener and proceed to create a custom HTML tag in GTM, where you’ll then paste the code. 

Add a pageview or DOM-ready trigger (recommended) to your custom HTML tag.

💡 Pro Tip: Opt for firing on DOM ready if you integrated the Message Bird chat widget through GTM.

The subsequent step involves adding a custom event trigger with the event name [messageBirdEvent] that triggers every instance of opening and closing interactions with the Message Bird chat widget.

For additional event properties/parameters, create a dataLayer variable labelled with the key [chatAction]. This variable proves instrumental in determining the action performed on the Message Bird chat widget, with possible values being:

  • Opened the widget
  • Closed the widget

Subsequently, integrate your tags (Google Analytics (GA4), Piwik Pro, Mixpanel, etc.), incorporating any necessary customisations, and conduct thorough testing before publishing your setup.

<script>
window.MessageBirdChatWidget.on('toggle', function (isOpen) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'messageBirdEvent',
'chatAction': isOpen === true ? "opened the widget" : "closed the widget"
});

// isOpen === true -> customer opened the widget
// isOpen === false -> customer closed the widget
console.log(isOpen === true ? "DD - opened the widget" : "DD - closed the widget");
});
</script>

Video of how to use the listener

Related Event Listener

Helpscout

Measure how users interact with your embedded Helpscout chat widget, and use the insights to improve your strategy.

Artibot AI

Efficiently capture user interactions with your Airbot chatbot widget with the help of this event listener.

Tidio Chat

Send to your analytics, data of how users interact with your Tidio Chat widget, using GTM and this event listener.

download the google tag manager recipe for tracking Message Bird Chat Interactions

we make you smarter with data

made with ❤️

The DumbData Team
Before you leave, try out these free tools.
FREE GA4 AUDIT TOOL & UTM AUDIT TOOL