Reve Chat Event Listener
How to track Embedded Reve chat widget interactions with google tag manager
The Reve Chat event listener integrated with Google Tag Manager (GTM) provides a powerful way to track interactions between website visitors and your embedded Reve chat widget, allowing you to capture specific interactions when visitors send or receive messages through the Reve Chat widget, enabling you to gain a deeper understanding of how chat-based communication impacts user engagement and conversions.
Steps to Set Up the Reve Chat Event Listener in Google Tag Manager
- Create a Custom HTML Tag in GTM:
- In GTM, create a new Custom HTML tag.
- Insert the Reve Chat event listener script into the tag.
- Give your tag a descriptive name, such as Reve Chat Interaction Listener.
- Configure the tag to trigger when the page is loaded or on DOM Ready.
- In GTM, create a new Custom HTML tag.
- Define the Trigger for Reve Chat Interactions:
- The custom event name for Reve Chat interactions will be “revechat_interaction”.
- This event will only be triggered when a website visitor sends or receives a message via the chat widget. This ensures that only relevant events are captured.
- Set up a trigger in GTM to listen for the “revechat_interaction” event.
- The custom event name for Reve Chat interactions will be “revechat_interaction”.
- Create a Data Layer Variable:
To capture detailed chat interaction data, you will need to create two key Data Layer Variables in GTM:
- revechat_type: This variable will return the value of “customRevechatMessage”, indicating that the interaction involves a custom message being sent or received via the chat widget.
- message_content: This variable holds detailed information about the message being sent or received. It can include a range of data points related to the chat interaction, such as message type, content, timestamp, and user details. You can drill down into these data points to track specific aspects of the interaction.
- revechat_type: This variable will return the value of “customRevechatMessage”, indicating that the interaction involves a custom message being sent or received via the chat widget.
Data Layer Variables You Can Capture
Here are the dataLayer variables associated with Reve Chat interactions:
- revechat_type:
- Returns the value of “customRevechatMessage”, indicating that the action is related to sending or receiving a message.
- Returns the value of “customRevechatMessage”, indicating that the action is related to sending or receiving a message.
You can use this variable to drill down and capture specific data points for analysis in your analytics platforms.
Send Data To Your Analytics Property In Google Tag Manager
Once the interaction events are configured to have Google Tag Manager aware when these interactions happen, you can send the data to your analytics platform to gain knowledge into user engagement and behavior, in tools like Google Analytics (GA4), Microsoft Clarity, Piwik Pro, Maromo, etc.
<script>
function handleCustomMessage(event) {
if (event.type === 'customRevechatMessage') {
// Extract the message from event.data
var message = event.data;
// Prepare data for the dataLayer push
var dataLayerEvent = {
event: 'revechat_interaction',
revechat_type: event.type, // Value of event.type ('customRevechatMessage')
message_content: message // Including the message content
};
// Push to the dataLayer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(dataLayerEvent);
}
}
// Add an event listener for the 'customRevechatMessage' event
document.addEventListener('customRevechatMessage', handleCustomMessage);
</script>
Video of how to use the listener
Related Event Listener
Kustomer
Helpscout
Qualaroo
download the google tag manager recipe for tracking Embedded Reve chat widget interactions
