Artibot Event Listener
How to track Artibot Chatbot Interactions with google tag manager
By using the Artibot chatbot event listener in conjunction with Google Tag Manager or whatever TMS you’re using for tag deployment and management, you gain the capability to measure interactions with your Artibot chatbot on your website and leverage the data to enrich your insights in analytics tools such as Google Analytics (GA4), Piwik Pro, and others.
For you to capture this valuable data in your analytics tool, whether it’s Google Analytics (GA4), Mixpanel, Piwik Pro, etc., the process is straightforward, and you can follow the instructions outlined below.
Begin by creating a new tag in Google Tag Manager of the custom HTML tag type. Please copy and paste the Artibot chat event listener code into this tag, assign a name to the GTM tag, and configure it to trigger on pageview or DOM ready.
💡 Pro Tip: Opt for firing on DOM ready if you’ve implemented the Smartsupp chat widget through GTM.
The purpose of this event listener script is to monitor user interactions with the Artibot chatbot on your website and trigger a dataLayer event with the name [artibot_event].
To determine the specific chatbot event, create a dataLayer variable with the key [artibot_action], with possible values including:
- Artibot widget expanded
- Artibot widget collapsed
- Chat started
- Visitor sends message
- Visitor receives message
- Chat ended
The dataLayer event also includes a variable with the key [artibot_id], representing your website’s embedded Artibot chatbot ID. This identifier proves useful for measuring the performance impact of various Artibot chatbots utilised on your site.
The next step involves creating your tags in Google Tag Manager, such as Google Analytics (GA4) tags, Piwik Pro event tags, and others.
Note that this dataLayer event listener is adaptable to Piwik Pro Tag Manager and other Tag Management Solutions (TMS) vendors in use.
As a crucial step, ensure that you thoroughly test your implementation in Google Tag Manager before proceeding with publishing.
<script>
// fires When your ArtiBot has loaded and is ready for use
window.artibotApi.on('bot:ready', function () {
console.log('bot ready');
});
// fires When your ArtiBot is expaneded
window.artibotApi.on('bot:expanded', function () {
console.log('DD - bot expanded');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'artibot widget expanded',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
// fires When your ArtiBot is collapsed
window.artibotApi.on('bot:collapsed', function () {
console.log('DD - bot collapsed');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'artibot widget collapsed',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
// fires When your ArtiBot has started a chat
window.artibotApi.on('chat:started', function () {
console.log('DD - chat started');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'chat started',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
// fires When a visitor sends a message
window.artibotApi.on('chat:message-sent', function () {
console.log('DD - message sent');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'visitor sents message',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
// fires When ArtiBot sends a message
window.artibotApi.on('chat:message-received', function () {
console.log('DD - message received');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'visitor receives message',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
// fires When the chat with ArtiBot has ended
window.artibotApi.on('chat:ended', function () {
console.log('DD - chat ended');
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'artibot_event',
'artibot_action': 'chat ended',
'artibot_id': window.artibotApi.get('bot.botId')
});
});
</script>
Video of how to use the listener
Related Event Listener
ChatBot
Message Bird
Tally Forms
