Message Bird Event Listener
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>