How to Track Sparkforge Chat Widget Activity in GA4

Sparkforge's chat widget can be embedded on funnels, Sparkforge sites, WordPress, Wix, Shopify, Squarespace, and most other platforms. Once Google Analytics 4 (GA4) is installed on the host page, the widget will send custom events you can use to track engagement.

What you need first

• GA4 already installed on the host site or funnel.
• Edit access to the page <head> and <body>, or a Google Tag Manager (GTM) container.
• Your Sparkforge chat widget embed code from the sub-account.

You do not need to install GA4 again for the widget. The events ride on the GA4 instance already on the page.

1. Add the GA4 global site tag

Place this in the <head> of your page or in a GTM Custom HTML tag. Replace your-GA-code with your GA4 measurement ID.

<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>

2. Embed the chat widget

Grab the widget snippet from the sub-account (Sites > Chat Widget > Get Code). For GTM, use the GTM tab. Paste it into the <body> of your page.

Two attributes matter:

• data-widget-id — unique ID for the widget.
• data-location-id — your sub-account/location ID.

3. Add the GA4 event listener

Paste this below the widget embed. It listens for widget state changes and form submits and pushes named events into GA4.

<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>

Events sent to GA4

Verify it works

• GA4 DebugView — watch events in real time as you open and close the widget.
• Google Tag Assistant — confirm the GA4 tag fires on the page.
• DevTools Network tab — check the outgoing collect requests carry the right event names.
• Live test — open, close, and submit the chat form and confirm three events show up.

Find these events in GA4 under Reports > Engagement > Events, or use them as conversions in your custom reports.