Artibot Event Listener

Listen to user interactions with the Artibot chatbot on your website by measuring and tracking this activity as events or conversions within your analytics stack, which may include Google Analytics (GA4), Mixpanel, Piwik Pro, and others. The implementation of Artibot chat event listeners through Google Tag Manager enables you to capture user engagements with the Artibot chatbot. Consequently, it emits an event that can be utilised to trigger your GA4 and other analytics tags.

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

Get a better understanding of how users interact with the embedded chatbot widget on your website.

Message Bird

Measure user interactions with the MessageBird widget on your website using this event listener.

Tally Forms

Measure when users submit your Tally Form and fire your marketing tags and pixels for conversion tracking.

download the google tag manager recipe for tracking Artibot Chatbot 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