Adaptive AI Knowledge Base
Conversations & Customer Communication
This article provides guidance on integrating Adaptive AI's Chat Widget with Google Analytics 4 to monitor user interactions effectively across funnel steps, website pages, Wordpress websites and any other integration like Shopify, Wix or Squarespace.
What is Chat Widget GA4 Tracking?
Adaptive AI's Chat Widget can be embedded across various platforms, including funnels, websites, and WordPress sites. By integrating GA4 (Google Analytics), you can track user interactions with the Chat Widget, enabling better insights into user behavior and engagement.
Key Benefits of GA4 Tracking for Chat Widget
- Enhanced User Insights: Monitor how users interact with the Chat Widget to optimize engagement strategies.
- Performance Monitoring: Identify and address potential issues in the chat experience.
- Data-Driven Decisions: Leverage analytics to make informed decisions about chat functionalities.
- Seamless Integration: Combine Chat Widget and GA4 scripts without conflicts.
Integrate Chat Widget with GA4 Tracking
Make sure Google Analytics 4 (GA4) is already installed on the site or funnel where your Chat Widget will appear. No additional configuration is required for the Chat Widget to send events to GA4.
- This applies to all platforms — including Adaptive AI sites, funnels, WordPress, Wix, Shopify, and others.
- You do not need to install GA4 separately for the widget to work.
Follow this structured setup to install GA4 tracking, embed the chat widget, and begin capturing custom analytics events related to widget usage.
- 1Add GA4 Global Site Tag Embed the following code in the <head> section of your webpage or in a GTM Custom HTML tag.
<!-- Google Analytics 4 Global Site Tag --> <script async src="https://www.googletagmanager.com/gtag/js?id=your-GA-code"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'your-GA-code'); </script>
Key Notes:
- This script loads the GA4 library and initializes it using your GA4 measurement ID: your-GA-code.
- dataLayer is used for storing events and sending them to GA4.
- 1Embed the Chat Widget Insert this snippet in the <body> section of your site to load the chat widget.
Use Get Code in Adaptive AI to copy the current chat widget snippet. Paste that generated snippet into your tag manager or website without editing its identifiers or resource URLs.
Click on the "Get Code" button, then navigate to "Via GTM" section to find this snippet.
Attributes Breakdown:
- data-widget-id: Unique identifier for the widget.
- data-location-id: Corresponds to your business/location.
- 1Add GA4 Custom Event Tracking Script Paste this script below your chat widget embed to enable event tracking for widget interactions.
<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 (Adaptive AI Communications.chatWidget.isActive()) { trackGAEvent('widget-open', 'Widget Open'); } else { trackGAEvent('widget-close', 'Widget Close'); } }); observer.observe(e.detail, { attributes: true }); window.Adaptive AI Communications.chatWidget.registerBeforeSubmit(beforeSubmit); }, false); </script>
Event Reference for GA4
Understanding what each event tracks helps you validate and use the data more effectively in GA4.
Event Name | Trigger Condition | Category | Label
widget-open | When the widget is opened | Live Chat | Widget Open
widget-close | When the widget is closed | Live Chat | Widget Close
form-submit | When a chat form is submitted | Live Chat | Form Submitted
Testing & Debugging Tips
Use these techniques to confirm your event tracking is correctly set up and working in real time.
- 1Google Tag Assistant Extension: Monitor events as you interact with the widget.
- 2GA4 DebugView: Track real-time events in your Google Analytics dashboard.
- 3Network Logs: Use browser DevTools → Network tab to verify event payloads.
- 4Live Test: Open, close, and submit the chat form to validate the respective events.
Frequently Asked Questions
Q: Will this track users across all pages? Yes, as long as the widget and tracking script are embedded on those pages.
Q: Can I customize the events tracked by the Chat Widget? Currently, the Chat Widget tracks a predefined set of events. Custom event tracking is not supported.
Q: Where can I view the Chat Widget events in GA4? Navigate to the "Events" section in your GA4 property to view the tracked Chat Widget events.
Related Articles
- How to Install Adaptive AI's Chat Widget
- Google Analytics 4 Tracking
- Getting Started with Chat Widget