Monitor Chat Widget Activity with Google Analytics 4 (GA4)

Overview

You can connect your CRM's Chat Widget to Google Analytics 4 (GA4) to gain valuable insights into how visitors interact with the chat feature on your website, funnel, or other integrated platforms like WordPress, Shopify, or Wix. This integration automatically sends specific interaction data to your GA4 property for analysis.

Benefits of GA4 Tracking

Integrating GA4 with your Chat Widget provides several key advantages:

  • Understand User Engagement: See when and how often users open and use the chat.
  • Monitor Performance: Identify potential issues or popular chat flows.
  • Make Data-Informed Decisions: Use analytics to refine your chat strategy and improve user experience.
  • Simple Setup: The integration is designed to work seamlessly without conflicts.

How to Set Up GA4 Tracking

Before you begin, ensure the Google Analytics 4 tracking code is already installed on the site or page where your Chat Widget is embedded. The Chat Widget itself does not require a separate GA4 installation. Follow these steps to enable event tracking.

Step 1: Embed the GA4 Global Site Tag

First, make sure the standard GA4 global site tag is present in the <head> section of your webpage. This code initializes GA4 on your site.

Step 2: Embed the Chat Widget Code

Next, place the Chat Widget embed code within the <body> section of your site. You can copy this code from your CRM sub-account settings.

Step 3: Add the Custom Event Tracking Script

After the Chat Widget code, add the following script to enable event tracking. This script listens for specific widget interactions and sends corresponding events to GA4.

Custom Event Tracking Script:

<script>
function trackGAEvent(eventName, label) {
    gtag('event', eventName, {
        event_category: 'Chat',
        event_label: label
    });
}

function beforeSubmit(values, host) {
    trackGAEvent('form-submit', 'Form Submitted');
    return true;
}

window.addEventListener("LC_chatWidgetLoaded", function (e) {
    var observer = new MutationObserver(function () {
        if (CRM.chatWidget.isActive()) {
            trackGAEvent('widget-open', 'Widget Open');
        } else {
            trackGAEvent('widget-close', 'Widget Close');
        }
    });
    observer.observe(e.detail, { attributes: true });
    window.CRM.chatWidget.registerBeforeSubmit(beforeSubmit);
}, false);
</script>

Events Tracked by the Chat Widget

The integration automatically tracks the following events in Google Analytics 4:

  • widget-open: Triggered when a visitor opens the chat widget.
  • widget-close: Triggered when the chat widget is closed.
  • form-submit: Triggered when a visitor submits a form within the chat.

All events are categorized under "Chat" for easy filtering within your GA4 reports.

Testing and Verification

After implementing the code, test your setup to ensure events are being sent correctly.

  • Use the Google Tag Assistant browser extension to monitor events in real-time.
  • Check the DebugView section in your GA4 property to see events as they occur.
  • Open and close the chat widget and submit a test form to trigger the events.

Frequently Asked Questions

Will tracking work on all pages of my site?

Yes, tracking will function on any page where both the GA4 code and the Chat Widget code with the event tracking script are present.

Can I track custom events beyond the predefined ones?

Currently, the Chat Widget tracks a fixed set of events. Custom event tracking is not available.

Where do I view the chat events in GA4?

You can find all tracked events in the "Events" report within your Google Analytics 4 property.