# Widget events and analytics

The widget tells the page it's on its height and each step the homeowner reaches. Use the steps to track the quote funnel in Google Tag Manager, GA4 or your own code.

Source: https://measuredbid.com/docs/events

## Messages the widget sends

The widget uses `window.postMessage` to talk to the page that embeds it.

| type | Fields | When |
| --- | --- | --- |
| `instant-quote:height` | `height`: the widget's height in pixels | When its size changes, and before each step message. |
| `instant-quote:step` | `step`, and `brand`: the widget ID | Each time the homeowner reaches a new step. |

> **Check the sender.** The widget posts to any parent page. In your listener, check that `event.origin` is `https://measuredbid.com` and `event.source` is your iframe's `contentWindow`, as the embed code does.

## Steps

| step | Means |
| --- | --- |
| `address` | The widget loaded and shows the address box. |
| `confirm` | The homeowner picked a house to confirm. |
| `result` | A price range is on screen. |
| `no_data` | No price this time: the address is outside the service area, the house can't be measured from above, the account's plan is paused, or something failed. The widget offers a visit request form instead. |
| `booked` | The homeowner sent the form. This is the lead. |

## Listen in your own code

Step listener:

```js
const frame = document.querySelector("iframe[data-measuredbid-widget]");

window.addEventListener("message", (e) => {
  // The widget posts to any parent, so check who sent it.
  if (e.origin !== "https://measuredbid.com" || e.source !== frame.contentWindow) return;
  if (e.data?.type !== "instant-quote:step") return;

  if (e.data.step === "result") console.log("Price shown", e.data.brand);
  if (e.data.step === "booked") console.log("Lead sent", e.data.brand);
});
```

## Google Tag Manager and GA4

The embed code pushes `{ event: "iq_step", step, brand }` to `window.dataLayer` for each step when Tag Manager is on the page. The WordPress plugin does the same and creates `dataLayer` if it's missing.

1. **Add variables.** In Tag Manager, create two Data Layer Variables: `step` and `brand`.
2. **Add a trigger.** Create a Custom Event trigger with the event name `iq_step`.
3. **Send it to GA4.** Create a GA4 Event tag on that trigger, for example named `quote_step`, with a `step` parameter set to the `step` variable.
4. **Mark the lead.** For a conversion, add a second trigger where `step` equals `booked`, and send a `generate_lead` event from it.

> **Which step is the conversion.** `booked` is the lead. `result` means a price was shown, which is a good middle-of-funnel step.