Track your contact widget in your own analytics

Once your contact widget is live, the obvious question is whether anyone is actually using it. The widget answers that by announcing what it does, and your website passes those announcements on to whatever analytics tool you already use.

There is nothing to switch on in Broadcaster. The widget always announces itself. You just need a few lines on your site to listen. This takes about ten minutes and you will need to be comfortable adding a small piece of code to your website, or have someone who is.

If you have not set the widget up yet, start with Add a WhatsApp contact button to your website and come back here.

What we do not do, and why

We do not ask you to paste your tracking code into Broadcaster. Some tools offer that. We deliberately do not, because it would mean our servers sending code to be run on your public website. If anyone ever broke into your Broadcaster account, they could use that box to run whatever they liked in front of your customers. So the code stays on your side, where only you control it.

The upshot is that this works with any analytics tool, not just the popular ones. We show four below, but the same pattern fits anything.

The four things the widget tells you

Event	What it means
loaded	The widget appeared on a page. Somebody saw the button.
opened	Somebody clicked the button and the message form opened.
handoff	Somebody was sent through to WhatsApp.
submitted	Somebody sent you a message through the form, and it reached us.

Each one carries the name of the widget and how it is displayed. It never carries the visitor’s name, phone number, or anything they typed. Those go to your inbox, not to your analytics.

The one that will mislead you

handoff is not a message. It means the visitor was handed to WhatsApp with a message ready to send. It does not mean they sent it. WhatsApp opens with the text pre-filled and the visitor still has to press send, and plenty of people do not. There is no way for your website to know either way, because by then they have left it.

submitted is different. That one is a real enquiry that reached your inbox.

So do not add the two together and call it “enquiries”. If you do, you will report leads you never received. Count them separately. handoff tells you how many people set off towards WhatsApp; your Broadcaster inbox tells you how many arrived.

Which events you get depends on the visitor

There is no single funnel here, and this trips people up when the numbers do not add up.

• Someone on a computer sees the button, clicks it, fills in the form: loaded, then opened, then submitted.
• Someone on a phone sees the button and taps it, and goes straight to WhatsApp: loaded, then handoff. There is no opened, because the form never appears. They went straight to WhatsApp.
• A form embedded directly in your page (rather than a floating button) has nothing to click open: loaded, then submitted. Again, no opened.

So if you are wondering why your opened count is far lower than your loaded count, this is usually why: your phone visitors never open anything.

Add the listener to your website

Pick your tool. Paste the snippet into your site’s custom code or footer scripts box, the same place the widget snippet went, and put it after the widget’s own script tag.

Umami

<script>
  window.addEventListener('broadcaster:widget', function (e) {
    window.umami && window.umami.track(e.detail.event, {
      widget: e.detail.widget,
      mode: e.detail.mode
    });
  });
</script>

Plausible

<script>
  window.addEventListener('broadcaster:widget', function (e) {
    window.plausible && window.plausible('Widget ' + e.detail.event, {
      props: { widget: e.detail.widget, mode: e.detail.mode }
    });
  });
</script>

Google Analytics 4

<script>
  window.addEventListener('broadcaster:widget', function (e) {
    window.gtag && window.gtag('event', 'broadcaster_widget_' + e.detail.event, {
      widget: e.detail.widget,
      mode: e.detail.mode
    });
  });
</script>

Google Tag Manager

Good news: nothing to paste. If your page runs Tag Manager, the widget already pushes to its dataLayer on its own. You will see these arrive:

{ event: 'broadcaster_widget_loaded',    widget: 'Main website', mode: 'floating' }
{ event: 'broadcaster_widget_opened',    widget: 'Main website', mode: 'floating' }
{ event: 'broadcaster_widget_handoff',   widget: 'Main website', mode: 'floating' }
{ event: 'broadcaster_widget_submitted', widget: 'Main website', mode: 'floating' }

In Tag Manager, create a Custom Event trigger matching the event name you want, and point your tag at it.

This shortcut is for Tag Manager only. Umami, Plausible and GA4 do not read the dataLayer, so if you use one of those, you still need its listener above.

Common gotchas

• Put the listener after the widget’s script tag. If it runs first, it will miss the loaded event, and your load count will be zero while everything else looks fine.
• If you send events to your own server, use sendBeacon. The handoff event fires at the moment the visitor leaves your site for WhatsApp. An ordinary request can be cancelled by that departure and quietly lost. navigator.sendBeacon is built to survive it. Every tool listed above already handles this for you. This only matters if you are wiring up something custom.
• Do not treat handoff as a conversion. Worth repeating, because it is the mistake that makes the numbers lie. It counts departures, not conversations.
• The numbers live in your tool, not in Broadcaster. These events are sent to your analytics, so the Broadcaster widget settings page will not show any figures. That is by design: your analytics is where the rest of your website traffic already lives, and this puts the widget alongside it.
• Your Broadcaster inbox will not say which enquiries came from the widget. A visitor who taps through to WhatsApp arrives like any other new contact. Your analytics tells you the widget is working; the inbox tells you what people said.

Related