Analytics & Conversietracking

Meet in Google Analytics en Google Tag Manager precies wat bezoekers in de widget doen: welke aanvraagmodule ze gebruiken, of ze een aanvraag voltooien, én waar ze afhaken als ze dat niet doen.

Hoe het werkt

Twee dingen die vaak door elkaar lopen:

1. Het marketingkanaal kent Google Analytics al zelf. GA4 legt bij binnenkomst automatisch de bron vast (organisch, Google Ads, social, e-mail, een UTM-campagne, enzovoort). Je hoeft de widget dus niet te laten vertellen waar de bezoeker vandaan komt — GA koppelt elke conversie vanzelf aan het juiste kanaal.
2. Wat GA mist, is wat er in de widget gebeurt. De widget draait in een afgeschermde Shadow DOM: er is geen "succespagina" als losse URL en geen element op de pagina dat je van buitenaf kunt uitlezen. Daarom levert de widget die informatie zelf aan via events.

Bij elk belangrijk moment vuurt de widget twee dingen tegelijk af: een JavaScript-CustomEvent op window (voor wie zonder GTM werkt) én een push naar de dataLayer (voor Google Tag Manager). Jij kiest welke je gebruikt.

De events

Een bezoeker doorloopt een traject. Elke aanvraagmodule kan uit één of meerdere stappen bestaan. De widget meldt elke stap, zodat je een complete trechter kunt bouwen.

• module: welke aanvraagmodule (zie tabel hieronder). Hiermee onderscheid je waarmee de aanvraag is gedaan.
• stepId / stepIndex / stepName: de stap binnen de module (machinenaam, volgnummer en leesbare naam). Dit gebruik je om afhaakpunten te vinden.
• widgetSessionId: uniek id per bezoek; bindt alle events van één bezoeker aan elkaar.
• completed (op constell_widget_closed): true als de bezoeker de succespagina haalde, anders false. Een false met een lastStepIndex hoger dan 1 betekent: afgehaakt bij lastStepId.

De aanvraagmodules

Elk event bevat het veld module met een vaste slug per module:

Let op: de module "Private dining" is gereserveerd maar nog niet actief in de widget. De overige vijf modules vuren wel events af.

Voor een conversie kijk je naar constell_request_submitted en lees je module uit. Zo meet je per module een eigen conversie — bijvoorbeeld "afspraken" los van "arrangementen".

Waar haakt een bezoeker af? (trechter & afhaakpunt)

Omdat de widget bij elke stap een constell_step_viewed afvuurt, weet je altijd de laatst bereikte stap van een bezoeker. Wie de succespagina niet haalt, is afgehaakt op die laatste stap. Je leest dit op twee manieren:

1. Trechter-rapport in GA4. Bouw een Funnel exploration met de stappen op volgorde (stepIndex) en splits uit op module. GA4 laat per stap zien hoeveel bezoekers doorgaan en hoeveel afvallen.
2. Direct afhaak-event. Sluit een bezoeker de widget zonder te voltooien, dan vuurt constell_widget_closed met completed: false. Het veld lastStepId is dan letterlijk het afhaakpunt.

Google Tag Manager (aanbevolen)

De widget pusht alles naar de dataLayer. Per event maak je in GTM een Custom Event trigger.

• Conversie-trigger: Custom Event → Event name constell_request_submitted → GA4-event generate_lead met parameters module, request_id, event_type. Markeer dit in GA4 als key event (conversie).
• Trechter-triggers: op constell_step_viewed (parameters module, step_id, step_index, step_name) en op constell_widget_closed (parameters module, last_step_id, completed).

Maak hiervoor Data Layer Variables aan: module, step_id, step_index, step_name, request_id, last_step_id, completed.

Zonder GTM (gtag.js)

Werk je rechtstreeks met GA4, luister dan op de CustomEvents en stuur ze door:

<script>
  // Conversie
  window.addEventListener('constell_request_submitted', function (e) {
    gtag('event', 'generate_lead', {
      module: e.detail.module,
      transaction_id: e.detail.requestId,   // voorkomt dubbeltellingen
      event_type: e.detail.eventType || undefined,
      value: e.detail.budget || undefined,
      currency: 'EUR'
    });
  });

  // Trechterstappen
  window.addEventListener('constell_step_viewed', function (e) {
    gtag('event', 'constell_step', {
      module: e.detail.module,
      step_id: e.detail.stepId,
      step_index: e.detail.stepIndex,
      step_name: e.detail.stepName
    });
  });

  // Afhaakpunt
  window.addEventListener('constell_widget_closed', function (e) {
    if (!e.detail.completed) {
      gtag('event', 'constell_abandon', {
        module: e.detail.module,
        last_step_id: e.detail.lastStepId,
        last_step_index: e.detail.lastStepIndex
      });
    }
  });
</script>

Een trechter bouwen in GA4

1. Ga naar Verkennen → Funnel exploration.
2. Voeg stappen toe op basis van het constell_step / constell_step_viewed event, geordend op step_index.
3. Voeg constell_request_submitted toe als laatste stap (de conversie).
4. Zet module als uitsplitsing (breakdown) om per aanvraagmodule te vergelijken.
5. GA4 toont nu per stap het doorloop- en uitvalpercentage — je ziet direct waar bezoekers afhaken, per module.

Testen & verifiëren

Plak dit in de browserconsole op een pagina met de widget en doe een test-aanvraag:

['constell_widget_opened','constell_module_started','constell_step_viewed',
 'constell_request_submitted','constell_widget_closed']
  .forEach(function (n) {
    window.addEventListener(n, function (e) { console.log(n, e.detail); });
  });

Bij een voltooide aanvraag zie je de reeks: openen → module gestart → één step_viewed per stap → request_submitted → widget_closed (completed: true). Breek je af, dan zie je dezelfde reeks tot een bepaalde stap, gevolgd door widget_closed met completed: false en het afhaakpunt in lastStepId.

In GTM controleer je hetzelfde via de Preview-modus; in GA4 via DebugView.