> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fitmyvehicle.com.au/llms.txt
> Use this file to discover all available pages before exploring further.

# Analytics Events

> Track user progress through the Builder with structured events for GTM, GA4, or custom JavaScript listeners.

## How it works

The FMV widget emits structured analytics events as the user progresses through the Builder. Events travel from the widget iframe to `fmv.js` on your page via `postMessage`. From there, they are automatically pushed to `window.dataLayer` (if it exists) for Google Tag Manager, and emitted through the `FMV.on('track:...')` JavaScript listener API for custom integrations.

```
Widget iframe  →  postMessage  →  fmv.js (your page)
                                    ├→ window.dataLayer.push()   (GTM)
                                    └→ FMV.on('track:...')        (JS)
```

<Note>
  Events contain only Builder metadata — step names, counts, and totals. No personally identifiable information (PII) is included in any event payload.
</Note>

## Available events

| Event name            | Trigger                   | Data fields                            |
| --------------------- | ------------------------- | -------------------------------------- |
| `fmv_started`         | Builder loads             | `builderId`                            |
| `fmv_step_completed`  | User clicks Next          | `builderId`, `stepIndex`, `stepName`   |
| `fmv_summary_viewed`  | Summary page mounts       | `builderId`, `itemCount`, `totalPrice` |
| `fmv_quote_submitted` | Quote API returns success | `builderId`, `quoteId`                 |

## Google Tag Manager (dataLayer)

If `window.dataLayer` exists on your page when `fmv.js` loads, events are automatically pushed — no FMV configuration needed.

Each push follows this shape:

```javascript theme={null}
window.dataLayer.push({
  event: "fmv_step_completed",
  fmv: {
    builderId: "abc123",
    stepIndex: 2,
    stepName: "Accessories"
  }
});
```

### GTM setup

1. **Create a Custom Event trigger** — set the event name to the FMV event you want to capture (e.g. `fmv_step_completed`).
2. **Create Data Layer Variables** — map each field under the `fmv` object (e.g. `fmv.builderId`, `fmv.stepIndex`).
3. **Attach to your tag** — wire the trigger and variables to your GA4, Meta, or other marketing tag.

Repeat for each event you want to track.

## JavaScript listener

Use `FMV.on()` to listen for events directly in JavaScript:

```javascript theme={null}
FMV.on('track:started', function (data) {
  console.log('Builder started:', data.builderId);
});

FMV.on('track:step_completed', function (data) {
  console.log('Step completed:', data.stepName);
});

FMV.on('track:summary_viewed', function (data) {
  console.log('Summary viewed — items:', data.itemCount, 'total:', data.totalPrice);
});

FMV.on('track:quote_submitted', function (data) {
  console.log('Quote submitted:', data.quoteId);
});
```

<Note>
  **Naming convention:** dataLayer events use the `fmv_` prefix (e.g. `fmv_step_completed`), while JavaScript listeners use the `track:` prefix without `fmv_` (e.g. `track:step_completed`).
</Note>

## Wix limitation

<Warning>
  Wix sandboxes custom HTML blocks inside their own iframe, which means `window.dataLayer` pushes from `fmv.js` may not reach the main page's GTM container. If you're on Wix, use the **JavaScript listener** approach or install GTM inside the same Wix HTML embed block as the FMV script.
</Warning>

## Privacy

<Info>
  Analytics events stay entirely on your page — FMV does not send event data to any third party. For more on how FMV handles data, see [Data & Privacy](/security/data-privacy).
</Info>