Analytics & GTM

iConfigure records configurator sessions in the Manager dashboard when tracking is enabled on a product. On the host page (script inject), the tracking store also pushes events to window.dataLayer when that array exists — Google Tag Manager listens to those pushes.

Implementation source: packages/stores/tracking.js in the v2 monorepo.

Enable tracking

1. Open Manager → your product → Submission & tracking.
2. Enable Enable tracking to get insights (tracking_enabled on the product).
3. Save and publish the product.

On load, _StartProductTracking in the form store starts a session and inserts a row in the Supabase tracking table. The same data appears on Dashboard and Export data → tracking.

If the insert fails, tracking is disabled for that session (no further ic_* events).

iFrame vs inject

Embed mode	Host-page GTM
iFrame	Configurator JS runs in the iframe's own window. Host-page GTM does not see dataLayer.push calls.
Script inject	Configurator runs on the host window — use this for GTM / GA4 on your site.

The code does not check embed mode explicitly; it only checks typeof dataLayer !== 'undefined'. Inject works because configurator and GTM share the same window.

Prerequisites on the host page

1. Tracking enabled on the product in Manager.
2. window.dataLayer must exist before the session starts — normally created by the GTM container snippet. Minimal alternative:

<script>window.dataLayer = window.dataLayer || [];</script>

3. Load GTM before inject.iife.js and injectApp(). See Script inject.

GTM itself is optional; any script that defines dataLayer is enough for the pushes to land somewhere you can read.

dataLayer events (verified)

Event	When	Supabase
ic_setup	Session starts after product load	Insert
ic_update	Feature change recorded + debounce (see below)	Update
ic_finish	Successful submit (info step / quotation)	Update

Each push has the shape:

{ event: 'ic_setup' | 'ic_update' | 'ic_finish', data: { /* tracking object */ } }

data object (all events)

Field	Description
user.device	e.g. smartphone, desktop
user.browser	e.g. Chrome, Mobile Safari
user.os	e.g. iOS, Windows
product_id	Product UUID
company_id	Company UUID
dealer_id	Dealer UUID or null
finished	false until submit; true on ic_finish
time.loading	Ms from navigation start (approx.)
time.total	Ms from session start (set on update/finish)
updates[]	Step, feature ID, value, timestamp, timeSpentOnFeature, totalPrice

ic_setup

Fired once in trackingSetup, immediately before the Supabase insert.

ic_update — debounce

Fired from trackingUpdate when both are true:

1. A feature change was recorded in updates[].
2. lastChange.time - tracking.lastSync > 3000 (3 second gap).

So it is not a fixed 3-second interval timer; rapid clicks may batch into fewer pushes.

Which interactions call trackingUpdate today:

UI path	ic_update
Number inputs (FormFeatureNumberBox)	Yes
Radio/checkbox via legacy SelectInput (form app)	Yes
Most other display widgets (buttons, toggles, dropdowns in ui-components)	Not wired yet

ic_setup and ic_finish still fire regardless. For full step-level GTM on button/toggle configurators, treat ic_finish as the conversion event until selection widgets emit updates.

ic_finish

Fired in trackingFinish when submit completes successfully (useSubmitQuote, cart flow). Adds an update with changedFeature: 'info_form' and sets finished: true.

GTM setup example

1. Container snippet (head)

Standard GTM install — creates dataLayer.

2. Custom Event trigger

Setting	Value
Trigger type	Custom Event
Event name	ic_finish (conversion) or ic_update (engagement)

Repeat for ic_setup if you need a session-start tag.

3. Data Layer Variables

Create Data Layer Variable types in GTM:

Variable name	Data Layer Variable Name
DL - product id	data.product_id
DL - finished	data.finished
DL - total time	data.time.total

For the last feature changed, use a Custom JavaScript variable or map from data.updates in a tag template.

4. GA4 event tag (example)

Setting	Value
Tag type	Google Analytics: GA4 Event
Event name	iconfigure_finish
Trigger	Custom Event ic_finish
Event parameter product_id	GTM variable DL - product id

Debug checklist

1. Product has tracking enabled in Manager.
2. Page uses script inject, not iframe.
3. GTM Preview open; dataLayer exists before configurator loads.
4. Console after load:

window.dataLayer.filter((e) => e.event?.startsWith('ic_'))

5. Change a number feature → expect ic_update after debounce.
6. Complete submit → expect ic_finish with data.finished === true.

Manager analytics vs GTM

Source	Use case
Manager Dashboard	Funnel, conversion, step drop-off (Supabase tracking)
Export data → tracking	Raw CSV
GTM / GA4	Marketing tags on your domain

See Tracking & analytics for the Manager side.

Related

• Script inject
• Tracking & analytics