Text Event Listener
Using the Text.com event listener with Google Tag Manager (GTM) or other TMS, you’ll be able to listen to and measure website visitors’ interactions with the embedded Text.com chat widget on your website to track user engagement and conversions in your analytics tools, such as Google Analytics, Piwik Pro, Matomo, etc.
How to track Text chat widget engagement with google tag manager
The Text.com chat event listener in combination with Google Tag Manager (GTM) enables you to effectively track website visitors’ interactions within your embedded Text.com chat widget, and do analysis on the data.
This setup allows for capturing valuable data about customer behavior, chat events, and interactions, empowering you to gain an understanding of how these actions influence your website’s performance and conversions.
By leveraging the Text.com chat event listener, you can capture a range of actions, including chat visibility changes, customer status updates, form submissions, and more. These interactions can then be forwarded to your analytics platforms such as Google Analytics, Microsoft Clarity, and Piwik Pro for reporting and analysis.
Steps to Set Up the Text Chat Widget Interaction Listener in Google Tag Manager
- Create a Custom HTML Tag in GTM:
- Navigate to GTM and create a new Custom HTML tag.
- Paste the Text.com chat event listener script into the tag.
- Name your tag (e.g., Text Chat Event Listener).
- Set the tag to trigger on Pageview or DOM Ready, depending on when you load the Text chat script (using DOM Ready or Window Loaded is recommended).
After setting up the tag, it will begin listening for interactions within the chat widget and emit dataLayer events for each interaction.
- Create Text Custom Event Trigger:
- The custom event that will be captured in the dataLayer is “text_chat_interactions”.
- Set up a trigger in GTM to listen for the “text_chat_interactions” event.
- Create a Data Layer Variable:
To capture detailed chat interaction data, create a Data Layer Variable to capture the specific chat action type. The key for this variable will be “text_action_type”.
Some of the chat actions you can track include:- chat widget visibility changed
- chat customer status changed
- chat conversation event
- chat form submitted
- chat rating submitted
- chat greeting dismissed
- chat rich message button clicked
Data Layer Variables You Can Capture
For every chat interaction, the listener will push specific data to the dataLayer. The key information pulled from the chat interactions includes:
- text_action_type: The type of action that was triggered (e.g., “chat widget visibility changed”, “chat form submitted”, etc.).
- customer_id: The unique ID of the customer interacting with the chat.
- customer_name: The name of the customer interacting with the chat.
- customer_email: The email address of the customer.
- customer_isReturning: Whether the customer is a returning visitor.
- customer_status: The current status of the customer (e.g., active, idle).
- session_variables: Any custom session variables tied to the customer.
- chat_id: The unique identifier for the chat session.
- thread_id: The identifier for the specific thread within the chat session.
- form_type: The type of form that was submitted during the chat.
- rating_value: The rating submitted by the customer for the chat experience.
- greeting_id: The unique ID of a greeting message, if applicable.
- greeting_unique_id: The unique ID for a greeting that was triggered in the chat.
- event_id: The ID of a rich message event.
- postback_id: The postback ID for a clicked button within a rich message.
Execute Tracking Tags in Google Tag Manager
Once the interactions are captured, you can send these events to your analytics platform for further analysis. Here’s how you can proceed with each platform:
- Google Analytics (GA4):
- Set up a custom event in GA4 that listens for the “text_chat_interactions” event.
- Use the data captured (such as text_action_type, customer_id, and rating_value) to track these as events in your GA4 reports.
You can also measure these interactions in tools such as Microsoft Clarity, Piwik Pro, Matomo, etc. You can also save time by downloading the ready-made recipes (the GTM template that you can download and import into the GTM container workspace), which includes the tracking setup.
<script>
// Function to push data to dataLayer
function pushToDataLayer(eventType, additionalData) {
// Get customer and chat data using the getters
var customerData = LiveChatWidget.get("customer_data");
var chatData = LiveChatWidget.get("chat_data");
// Prepare the event data
var eventData = {
event: "text_chat_interactions",
text_action_type: eventType,
customer_id: customerData.id,
customer_name: customerData.name,
customer_email: customerData.email,
customer_isReturning: customerData.isReturning,
customer_status: customerData.status,
session_variables: customerData.sessionVariables,
chat_id: chatData.chatId,
thread_id: chatData.threadId
};
// Merge additional data into eventData
if (additionalData) {
eventData = Object.assign(eventData, additionalData);
}
// Push to dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(eventData);
}
// Event listener for "On visibility changed"
LiveChatWidget.on('visibility_changed', function(data) {
var additionalData = {
text_action_type: "chat widget visibility changed",
visibility: data.visibility
};
pushToDataLayer("chat visibility changed", additionalData);
});
// Event listener for "On customer status changed"
LiveChatWidget.on('customer_status_changed', function(data) {
var additionalData = {
text_action_type: "chat customer status changed",
customer_status: data.status
};
pushToDataLayer("chat customer status changed", additionalData);
});
// Event listener for "On new event"
LiveChatWidget.on('new_event', function(event) {
var additionalData = {
text_action_type: "chat conversation event",
event_type: event.type,
author_id: event.author.id,
author_type: event.author.type
};
// Check if the event is a greeting and add greeting data
if (event.greeting) {
additionalData.greeting_id = event.greeting.id;
additionalData.greeting_unique_id = event.greeting.uniqueId;
}
pushToDataLayer("chat conversation event", additionalData);
});
// Event listener for "On form submitted"
LiveChatWidget.on('form_submitted', function(data) {
var additionalData = {
text_action_type: "chat form submitted",
form_type: data.type
};
pushToDataLayer("chat form submitted", additionalData);
});
// Event listener for "On rating submitted"
LiveChatWidget.on('rating_submitted', function(value) {
var additionalData = {
text_action_type: "chat rating submitted",
rating_value: value
};
pushToDataLayer("chat rating submitted", additionalData);
});
// Event listener for "On greeting dismissed"
LiveChatWidget.on('greeting_hidden', function() {
var additionalData = {
text_action_type: "chat greeting dismissed"
};
pushToDataLayer("chat greeting dismissed", additionalData);
});
// Event listener for "On rich message button clicked"
LiveChatWidget.on('rich_message_button_clicked', function(data) {
var additionalData = {
text_action_type: "chat rich message button clicked",
event_id: data.eventId,
postback_id: data.postbackId
};
// Check if the clicked button belongs to a greeting event and add greeting data
if (data.greeting) {
additionalData.greeting_id = data.greeting.id;
additionalData.greeting_unique_id = data.greeting.uniqueId;
}
pushToDataLayer("chat rich message button clicked", additionalData);
});
</script>
Video of how to use the listener
Related Event Listener
Reve Chat
Use this to measure how website visitors engage with the Reve chat widget on your website.
OnSched
Measure website visitors’ appointment flow and scheduling on OnSched for better insights.
SurveyCompo
Track and analyze all user interactions with your SurveyCompo survey forms on your website.
we make you smarter with data
made with ❤️
The DumbData Team