Chatflow Event Listener
How to track Chatflow Chat Interactions with google tag manager
Here is the instructions that walks you through how to use the Chatflow event listener in Google Tag Manager (GTM) to track user interactions with the Chatflow chat widget. By implementing this solution, you can capture interactions as events in analytics tools like Google Analytics (GA4), Piwik Pro, etc.
Step 1: Add the Chatflow Event Listener Script to GTM
Start by copying and implementing the Chatflow event listener script on your website via your GTM container:
- Create a New Tag
- Go to your GTM account and create a new tag.
- Set the tag type to Custom HTML.
- Paste the Script
- Copy and paste the Chatflow event listener script into the custom HTML tag.
- Name the tag appropriately (e.g., “Chatflow Event Listener”).
- Set a Trigger
- Configure the tag to fire on the DOM Ready trigger type. This ensures that the event listener script loads only after the Chatflow widget is available.
What Does the Event Listener Script Do?
The Chatflow event listener monitors key user interactions with the Chatflow widget, such as opening, closing, sending messages, and more. When one of these events occurs, it triggers a dataLayer event named “chatflow_interactions“.
These interactions are tracked with dataLayer variables such as:
- chat_Action – Indicates the type of interaction (e.g., “opened,” “closed,” “message:sent“).
Step 2: Create a Custom Event Trigger
The next step is to set up a trigger that listens for Chatflow interactions:
- Create a New Trigger
- In GTM, go to Triggers and click New.
- Choose the Custom Event trigger type.
- Configure the Trigger
- Set the event name to:
- chatflow_interactions
- Name your trigger (e.g., “CE – Chatflow Interactions Trigger”).
Step 3: Define DataLayer Variables
To enrich your tracking setup, create the following variables in GTM. These variables will extract specific details from the dataLayer for each Chatflow interaction:
- chat_Action: Captures the type of interaction (e.g., “opened,” “message:sent“).
How to Create DataLayer Variables:
- Navigate to Variables in GTM and click New.
- Select Data Layer Variable as the variable type.
- Set the variable name (e.g., “chat_Action“) and corresponding key.
- Repeat for each variable needed.
Step 4: Create Marketing Tags and Pixels
Once your variables and triggers are in place, it’s time to configure your marketing tags or analytics pixels to utilize the Chatflow data.
- Set Up a Tag
- Create a new tag for platforms like Google Analytics (GA4), Piwik Pro, or others.
- Use the “chat_Action” variable in your tag configuration to add context to tracked events.
- Attach the Trigger
- Attach the “CE – Chatflow Interactions Trigger” to your tag to ensure it fires on all relevant events.
Implementation Notes:
The Chatflow event listener can be used without Google Tag Manager and other Tag Management Systems (TMS), such as Piwik Pro Tag Manager. The implementation principles remain the same across platforms.
💡 Pro Tip: To simplify your setup, download the GTM recipe template on this resource page. Customize it to suit your needs, and you can seamlessly track Chatflow interactions.
<script>
(function () {
var chatEvents = [
"opened",
"closed",
"maximized",
"minimized",
"halfed",
"message:sending",
"message:sent",
"reply:requested",
"reply:received",
"identified"
];
var pushToDataLayer = function (eventName, eventDetails) {
var data = {
event: "chatflow_interactions",
chat_Action: eventName
};
if (eventDetails && typeof eventDetails === "object") {
for (var key in eventDetails) {
if (eventDetails.hasOwnProperty(key)) {
data[key] = eventDetails[key];
}
}
}
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(data);
};
// Attach listeners for specified events
for (var i = 0; i < chatEvents.length; i++) {
Chatflow.on(chatEvents[i], (function (eventName) {
return function (event) {
pushToDataLayer(eventName, event.detail || {});
};
})(chatEvents[i]));
}
})();
</script>
Video of how to use the listener
Related Event Listener
OnSched
Amelia Event Form
RingCentral
