Comm100 Event Listener
How to track Interactions With The Embedded Comm100 Chat Widget with google tag manager
Here are the instructions for using the Comm100 event listener script with Google Tag Manager (GTM) to track website visitor interactions with the Comm100 chat widget. You’ll learn how to capture these events in analytics tools like Google Analytics (GA4), Piwik Pro, and others. Follow the step-by-step instructions below to implement this setup efficiently.
Step 1: Add the Event Listener Script to GTM
Begin by creating a new custom HTML tag in Google Tag Manager. Paste the provided Comm100 event listener script into the tag and configure it to trigger on DOM Ready. Naming the tag appropriately (e.g., “cHTML – Comm100 Event Listener”) will help with organization.
💡 Pro Tip: Firing on DOM Ready ensures the Comm100 widget has loaded before the event listener is initialized.
This script listens for various Comm100 chat widget interactions and pushes corresponding events into the dataLayer. The emitted dataLayer event name is comm100_interactions, and the tracked interactions include:
- Chat panel displayed
- Visitor sent a message
- Agent joined the chat
- Visitor is typing
- And more
Step 2: Create a Custom Event Trigger
Next, create a custom event trigger in GTM. Use comm100_interactions as the event name. This trigger will ensure your tags fire whenever the Comm100 chat widget interactions are pushed to the dataLayer. Name the trigger appropriately, such as “CE – Comm100 Interaction Trigger.”
Step 3: Define Comm100 Related DataLayer Variables In GTM
To utilize the event details, define the following dataLayer variables in GTM. These variables capture the specific attributes of Comm100 interactions:
- comm100_action – The interaction type (e.g., “Visitor sent text message,” “Chat panel restored”).
- rating_score – The rating score provided by the visitor (if applicable).
- rating_comment – Any comments left by the visitor during a rating event.
- message_content – The content of messages sent by the visitor or agent.
- agent_id – The unique ID of the agent.
- agent_name – The agent’s name.
- agent_title – The agent’s title.
- agent_bio – Additional details about the agent.
Step 4: Create Tags and Use Variables
With triggers and variables set up, the next step is to create your marketing tags or pixels. For example, you might create a Google Analytics (GA4) tag to capture Comm100 interactions.
Attach the “CE – Comm100 Interaction Trigger“ to these tags and utilize the dataLayer variables in the tag configuration to provide context. For instance:
- Use comm100_action to track specific events, such as “Visitor is typing“ or “Agent joined chat.”
- Include agent_name or message_content in custom dimensions or event parameters to enrich your analytics data.
Additional Notes:
This Comm100 event listener script can be implemented using other Tag Management Solutions (TMS), such as Piwik Pro Tag Manager. The setup process remains similar across platforms.
Scrolling down this page, you can download a GTM recipe template, which can save you hours in implementation. Customize it and use it to easily start tracking Comm100 interactions.
<script>
// Ensure Comm100API is available before setting up listeners
if (typeof Comm100API !== 'undefined') {
// Rating Event
Comm100API.on('livechat.chat.visitor.rate', function (rating) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Visitor rated chat',
rating_score: rating.score || null,
rating_comment: rating.comment || null
});
});
// Visitor Send Text Message Event
Comm100API.on('livechat.chat.visitor.sendText', function (event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Visitor sent text message',
message_content: event.data.text || null
});
});
// Visitor Input Event
Comm100API.on('livechat.chat.visitor.input', function (content) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Visitor is typing',
input_content: content || null
});
});
// Chat Display Event
Comm100API.on('livechat.chat.display', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Chat panel displayed'
});
});
// Chat Minimize Event
Comm100API.on('livechat.chat.minimize', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Chat panel minimized'
});
});
// Chat Restore Event
Comm100API.on('livechat.chat.restore', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Chat panel restored'
});
});
// Chat Close Event
Comm100API.on('livechat.chat.close', function () {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Chat panel closed'
});
});
// Agent Join Chat Event
Comm100API.on('livechat.chat.agent.join', function (agent) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Agent joined chat',
agent_id: agent.id || null,
agent_name: agent.name || null,
agent_title: agent.title || null,
agent_bio: agent.bio || null
});
});
// Agent Leave Chat Event
Comm100API.on('livechat.chat.agent.leave', function (agent) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Agent left chat',
agent_id: agent.id || null,
agent_name: agent.name || null,
agent_title: agent.title || null,
agent_bio: agent.bio || null
});
});
// Agent Input Event
Comm100API.on('livechat.chat.agent.input', function (agent, content) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'comm100_interactions',
comm100_action: 'Agent is typing',
agent_id: agent.id || null,
agent_name: agent.name || null,
message_content: content || null
});
});
} else {
console.error('Comm100API is not defined. Ensure the Comm100 widget is loaded.');
}
</script>
Video of how to use the listener
Related Event Listener
RingCentral
Freshchat
Chatflow
download the google tag manager recipe for tracking Interactions With The Embedded Comm100 Chat Widget
