What is Chat Widget GA4 Tracking? | Kyrios Systems Help Center

How Chat Widget GA4 Tracking Works

Kyrios Chat Widgets can be embedded on websites, funnels, landing pages, and external sites. When Google Analytics 4 is installed on the same page, GA4 can receive event data related to Chat Widget usage. Tracked interactions may include:

Widget opened
Widget closed
Chat form submitted

GA4 must be installed on the page where the Chat Widget appears.

Before You Start

Make sure you have:

A GA4 Measurement ID
Access to the website or funnel page code
Access to the Kyrios Chat Widget embed code
Permission to edit the page header or Google Tag Manager setup

You do not need to install GA4 inside the Chat Widget itself.

Add the GA4 Global Site Tag

Add the GA4 global site tag to the <head> section of the page. You can also add this code through Google Tag Manager using a 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>

Replace your-GA-code with your GA4 Measurement ID.

Embed the Chat Widget

Add the Chat Widget embed code to the <body> section of the page. In Kyrios, open the Chat Widget settings and use the Get Code option. If you are using Google Tag Manager, use the Via GTM code option.

<!-- Chat Widget Embed -->
<div
  data-chat-widget
  data-widget-id="widget-id"
  data-location-id="location-id">
</div>

<script
  src="https://widgets.leadconnectorhq.com/loader.js"
  data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js"
  data-widget-id="widget-id">
</script>

Replace:

widget-id with the widget ID from your Kyrios account
location-id with the location ID from your Kyrios account

Add Custom GA4 Event Tracking

Add this script below the Chat Widget embed code.

<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 (leadConnector.chatWidget.isActive()) {
        trackGAEvent('widget-open', 'Widget Open');
      } else {
        trackGAEvent('widget-close', 'Widget Close');
      }
    });

    observer.observe(e.detail, { attributes: true });
    window.leadConnector.chatWidget.registerBeforeSubmit(beforeSubmit);
  }, false);
</script>

This script sends custom GA4 events when visitors open the widget, close the widget, or submit the chat form.

GA4 Event Reference

Event Name	Trigger Condition	Category	Label
`widget-open`	Visitor opens the Chat Widget	Chat	Widget Open
`widget-close`	Visitor closes the Chat Widget	Chat	Widget Close
`form-submit`	Visitor submits the chat form	Chat	Form Submitted

Test Chat Widget GA4 Tracking

Use these tools to confirm events are working:

Open the page where the Chat Widget is installed.
Open and close the Chat Widget.
Submit the chat form.
Check Google Tag Assistant for fired events.
Check GA4 DebugView for real-time event activity.
Use browser DevTools → Network to verify event payloads.

Events may take time to appear in standard GA4 reports.

Common Issues and Fixes

Events do not appear in GA4

Confirm the GA4 global site tag is installed on the same page as the Chat Widget. Also confirm your-GA-code was replaced with the correct GA4 Measurement ID.

The Chat Widget loads, but events do not fire

Make sure the custom tracking script is placed below the Chat Widget embed code. The tracking script depends on the Chat Widget loading first.

Events appear with the wrong category

The provided script sends events under the category Chat. To use a different category, edit the event_category value in the custom tracking script.