RingCentral Event Listener
How to track RingCentral Ring CX Interactions as Events In GA4, etc., with google tag manager
You can use the RingCentral CX event listener script and Google Tag Manager (GTM) to track your website visitors’ interactions with the RingCentral RingCX chat widget as events in tools like Google Analytics (GA4), Piwik Pro, etc.
By implementing the steps outlined below, you’ll be able to collect actionable insights and improve your marketing data.
Step 1: Add the Event Listener Script to GTM
Start by creating a new Custom HTML Tag in GTM. Copy and paste the provided RingCentral CX event listener script into this tag. Assign the tag a name and set its trigger to DOM Ready to ensure it fires once the necessary elements have loaded on the page.
💡 Pro Tip: Using the DOM Ready trigger type ensures that the event listener is active only when the RingCentral RingCX chat widget is fully initialized.
This event listener script registers various user interactions with the RingCentral chat widget and pushes a dataLayer event with the name ringCentralEvents. Some of the interactions it tracks include:
- button_shown: When the RingCX chat button is displayed.
- chat_engaged: When a visitor engages with the chat.
- message_sent/message_received: For tracking sent and received messages.
- trigger_activated: When a trigger is executed.
- chat_shown/chat_closed: Tracks when a chat client is created and shown, or when a client closes and leaves a chat.
- invitation_shown
- item_shown, etc.
The dataLayer event also includes additional dataLayer keys like triggerId, itemType, and mode to provide more context about each interaction.
Step 2: Create a Custom Event Trigger in GTM
Next, create a Custom Event Trigger in GTM. Use “ringCentralEvents“ as the event name for the trigger. This ensures the trigger fires for all chat interactions logged by the event listener.
Step 3: Set Up DataLayer Variables in GTM
To extract detailed information about the interactions, create the following Data Layer Variables in GTM:
-
- rcEventTypeProvides the type of interaction or event, such as message_sent, chat_engaged, etc.
- triggerIdContains the unique identifier for the trigger.
- triggerLabelDescribes the label of the activated trigger.
- triggerHumanIdRepresents the human-readable identifier for the trigger.
- triggerContinuationIndicates whether the trigger is part of a continuation flow.
- itemIdRefers to the ID of the specific item associated with the event.
- itemTypeSpecifies the type of item involved, such as button or message.
These variables enable you to capture granular details about user interactions, allowing for precise tracking and reporting.
Step 4: Create Marketing Tags and Attach Triggers
With the variables and triggers in place, the next step is to create marketing tags or pixels in GTM (e.g., Google Analytics GA4 tags). Attach the custom event trigger (ringCentralEvents) to these tags, and use the variables you set up to add detailed context about the events being tracked.
For instance, in a GA4 Event Tag configuration, you can send rcEventType as the event name and include additional parameters like triggerId and itemType as custom dimensions or metrics.
Extra Implementation Notes:
The RingCentral CX event listener can be utilized with other Tag Management Solutions (TMS) besides GTM. The implementation’s fundamental principles remain the same, making it versatile for different platforms.
To expedite your setup, scroll down this resource page to download a GTM recipe template. This template can be customized to streamline the process of tracking RingCX chat widget interactions.
<script> // Initialize _chatq array if not already defined var _chatq = window._chatq || []; window._chatq = _chatq; // List of RingCentral event names to track var ringCentralEvents = [ "button_shown", "chat_engaged", "chat_shown", "chat_closed", "invitation_shown", "message_received", "message_sent", "started", "trigger_activated", "trigger_executed", "item_shown" ]; // Register event handlers for each RingCentral event ringCentralEvents.forEach(function(eventName) { _chatq.push(["_onEvent", eventName, function(data) { // Push data to dataLayer with event-specific information window.dataLayer = window.dataLayer || []; window.dataLayer.push({ event: "ringCentralEvents", rcEventType: eventName, triggerId: data.trigger_id || null, triggerLabel: data.trigger_label || null, triggerHumanId: data.trigger_human_id || null, triggerContinuation: data.trigger_continuation || null, mode: data.mode || null, itemId: data.item_id || null, itemLabel: data.item_label || null, itemHumanId: data.item_human_id || null, itemType: data.item_type || null }); }]); }); </script>