Analytics & GTM

iConfigure registreert configuratorsessies in het Manager-dashboard wanneer tracking is ingeschakeld voor een product. Op de hostpagina (script-injectie) pusht de tracking store ook events naar window.dataLayer wanneer die array bestaat — Google Tag Manager luistert naar die pushes.

Bron van de implementatie: packages/stores/tracking.js in de v2-monorepo.

Tracking inschakelen

1. Open Manager → je product → Inzending & tracking.
2. Schakel Tracking inschakelen voor inzichten in (tracking_enabled op het product).
3. Sla op en publiceer het product.

Bij het laden start _StartProductTracking in de form store een sessie en voegt een rij toe in de Supabase-tabel tracking. Dezelfde data verschijnt op Dashboard en bij Data exporteren → tracking.

Als de insert mislukt, wordt tracking voor die sessie uitgeschakeld (geen verdere ic_*-events).

iFrame versus inject

Insluitmodus	GTM op de hostpagina
iFrame	Configurator-JS draait in de eigen window van de iframe. GTM op de hostpagina ziet de dataLayer.push-aanroepen niet.
Script-injectie	Configurator draait op de host-window — gebruik dit voor GTM / GA4 op je site.

De code controleert de insluitmodus niet expliciet; het controleert alleen typeof dataLayer !== 'undefined'. Inject werkt omdat de configurator en GTM dezelfde window delen.

Vereisten op de hostpagina

1. Tracking ingeschakeld voor het product in Manager.
2. window.dataLayer moet bestaan voordat de sessie start — normaal gesproken aangemaakt door het GTM-containersnippet. Minimaal alternatief:

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

3. Laad GTM voor inject.iife.js en injectApp(). Zie Script-injectie.

GTM zelf is optioneel; elk script dat dataLayer definieert is voldoende om de pushes ergens te laten landen waar je ze kunt lezen.

dataLayer-events (geverifieerd)

Event	Wanneer	Supabase
ic_setup	Sessie start na laden van het product	Insert
ic_step	Bij elke stapwisseling in de configurator	Update
ic_update	Featurewijziging geregistreerd + debounce (zie hieronder)	Update
ic_finish	Geslaagde verzending (infostap / offerte)	Update

Daarnaast wordt bij elke geslaagde verzending het legacy-event offerte_submit (v1-formaat, platte offerte-velden) gepusht — onafhankelijk van tracking_enabled — direct bij het indrukken van de verzendknop. De host-pagina krijgt daarna minimaal 1 seconde later pas de quotation/finished-postMessage, zodat de redirect naar de bedankt-pagina het event niet inhaalt.

Het ic_step-event heeft een plat formaat (geen data-wrapper) zodat het direct in GTM te gebruiken is:

{ event: 'ic_step', step: <0-based index>, step_name: '<stapnaam>', product_id, company_id, dealer_id, total_price }

ic_step wordt altijd gepusht (ook zonder tracking_enabled); de bijbehorende updates[]-registratie in Supabase gebeurt alleen bij een actieve trackingsessie.

Elke push heeft de vorm:

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

data-object (alle events)

Veld	Beschrijving
user.device	bijv. smartphone, desktop
user.browser	bijv. Chrome, Mobile Safari
user.os	bijv. iOS, Windows
product_id	Product-UUID
company_id	Bedrijf-UUID
dealer_id	Dealer-UUID of null
finished	false tot verzending; true bij ic_finish
time.loading	Ms vanaf start van de navigatie (bij benadering)
time.total	Ms vanaf start van de sessie (ingesteld bij update/finish)
updates[]	Stap, feature-ID, waarde, timestamp, timeSpentOnFeature, totalPrice

ic_setup

Eenmalig afgevuurd in trackingSetup, vlak voor de Supabase-insert.

ic_update — debounce

Afgevuurd vanuit trackingUpdate wanneer beide waar zijn:

1. Er is een featurewijziging geregistreerd in updates[].
2. lastChange.time - tracking.lastSync > 3000 (3 seconden tussenruimte).

Het is dus geen vaste timer van 3 seconden; snelle klikken kunnen samengebundeld worden tot minder pushes.

Welke interacties roepen vandaag trackingUpdate aan:

UI-pad	ic_update
Numerieke invoer (FormFeatureNumberBox)	Ja
Radio/checkbox via oude SelectInput (form-app)	Ja
De meeste andere weergavewidgets (knoppen, schakelaars, dropdowns in ui-components)	Nog niet gekoppeld

ic_setup en ic_finish worden hoe dan ook afgevuurd. Voor volledige GTM op stapniveau bij knop-/schakelaarconfigurators behandel je ic_finish als het conversie-event totdat de selectiewidgets updates uitzenden.

ic_finish

Afgevuurd in trackingFinish wanneer de verzending succesvol voltooit (useSubmitQuote, winkelwagenflow). Voegt een update toe met changedFeature: 'info_form' en zet finished: true.

Voorbeeld van GTM-instelling

1. Containersnippet (head)

Standaard GTM-installatie — maakt dataLayer aan.

2. Custom Event-trigger

Instelling	Waarde
Triggertype	Custom Event
Eventnaam	ic_finish (conversie) of ic_update (engagement)

Herhaal voor ic_setup als je een tag voor sessiestart nodig hebt.

3. Data Layer-variabelen

Maak Data Layer Variable-types aan in GTM:

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

Gebruik voor de laatst gewijzigde feature een Custom JavaScript-variabele of map vanuit data.updates in een tagtemplate.

4. GA4-event-tag (voorbeeld)

Instelling	Waarde
Tagtype	Google Analytics: GA4 Event
Eventnaam	iconfigure_finish
Trigger	Custom Event ic_finish
Eventparameter product_id	GTM-variabele DL - product id

Debug-checklist

1. Product heeft tracking ingeschakeld in Manager.
2. Pagina gebruikt script-injectie, geen iframe.
3. GTM Preview open; dataLayer bestaat voordat de configurator laadt.
4. Console na het laden:

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

5. Wijzig een numerieke feature → verwacht ic_update na debounce.
6. Voltooi een verzending → verwacht ic_finish met data.finished === true.

Manager-analytics versus GTM

Bron	Toepassing
Manager-dashboard	Funnel, conversie, uitstroom per stap (Supabase tracking)
Data exporteren → tracking	Ruwe CSV
GTM / GA4	Marketingtags op jouw domein

Zie Tracking & analytics voor de Manager-kant.

Verder lezen

• Script-injectie
• Tracking & analytics