E-commerce volgen

Deze handleiding beschrijft hoe je Trackboxx e-commerce tracking handmatig kunt integreren in een winkel - ongeacht of je een aangepast systeem, Shopify, Shopware, Magento of een andere winkel gebruikt. Er is een officiële plugin beschikbaar voor WooCommerce die alle hier beschreven gebeurtenissen automatisch activeert.

Basislogica: Wat betekent trackboxx('Purchase', [...])?

Voordat we naar de individuele gebeurtenissen gaan, is het belangrijk om dit punt te begrijpen - de ervaring heeft geleerd dat dit punt het vaakst verkeerd wordt geïnterpreteerd:

Belangrijk: trackboxx('Purchase', [...]) is geen afzonderlijke gebeurtenis, maar de algemene aanroep voor alle e-commerce-interacties. Het eerste object in de array bepaalt via zijn type-veld welke gebeurtenis wordt bijgehouden:

• { type: 'ViewProduct' } - Detailpagina product
• { type: 'AddToCart' } - Product toegevoegd aan winkelmandje
• { type: 'ViewCart' } - Winkelmandje pagina bekijken
• { type: 'order' } - Bestelling voltooid

De 'Purchase' in de functieaanroep verwijst alleen naar de actiecategorie “e-commerce” en blijft altijd gelijk, of je nu een productweergave, een toevoeging aan het winkelmandje of een daadwerkelijke aankoop bijhoudt.

De vier e-commercegebeurtenissen op een rij

1. ViewProduct – Productdetailpagina

Activering: Bij het openen van een productdetailpagina.
Minimale gegevens: Productnaam en eenheidsprijs.

<script>
trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 99.90 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• price = Prijs per eenheid van het product (numeriek, punt als decimaal scheidingsteken).
• Optionele extra velden: sku, category.
• Geef bij varianten of bundels de volledige variantnaam inclusief kenmerken door (bijvoorbeeld “T-shirt — rood, L”), zodat de rapporten consistent worden samengevoegd.

2. AddToCart – Product toegevoegd aan het winkelmandje

Activeren: Nadat de actie “Toevoegen aan winkelmandje” is geslaagd, niet alleen bij een klik.
Minimale gegevens: Productnaam en eenheidsprijs.

<script>
trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 19.99 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen over timing - afhankelijk van het winkeltype:

• Aangepaste winkels en AJAX-winkelmandjes: Activeer de gebeurtenis in de succes-callback van de actie voor toevoegen aan het winkelmandje, niet in de klikhandler. Zo wordt geen trackinggebeurtenis geregistreerd als het artikel door een voorraadcontrole, validatiefout of netwerkfout niet in het winkelmandje terechtkomt.
• Server-side shops met redirect: Activeer de gebeurtenis één keer op de volgende pagina nadat het product succesvol is toegevoegd.
• Eenvoudige knop-klik integraties: toegestaan, maar alleen als de klik daadwerkelijk leidt tot een geslaagde toevoeging, bijvoorbeeld door te controleren of de knop voor uitverkochte producten is uitgeschakeld.
• Deduplicatie: Verstuur AddToCart slechts één keer per actie, zonder dubbel te meten bij herladen of terugnavigeren.

3. ViewCart – Winkelmandpagina

Activering: Bij het openen van de winkelmandpagina.
Minimale gegevens: Totaalbedrag van het winkelmandje (amount). Optioneel: alle producten als afzonderlijke objecten.

<script>
trackboxx('Purchase', [
  { type: 'ViewCart' },
  { type: 'cart', amount: 149.70 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• amount = totaalbedrag van het winkelmandje. Standaard: netto (komt overeen met het gedrag van de officiële WooCommerce-plugin).
• Als je winkel met brutoprijzen werkt, zijn brutowaarden ook toegestaan. Het gaat om consistentie binnen één gebeurtenis: cart.amount en alle product.price-waarden moeten op dezelfde basis worden berekend, allemaal netto of allemaal bruto.
• Voeg voor elke regel in het winkelmandje een afzonderlijk product-object toe.
• De waarde price per product is hier het regeltotaal (eenheidsprijs × hoeveelheid); zie de paragraaf “Prijslogica & hoeveelheid”.

4. Purchase – Bestelling voltooid (bedankpagina)

Activering: Op de bevestigingspagina na een geslaagde betaling, precies één keer per bestelling.
Minimale gegevens: Bestel-ID, totaalbedrag en alle gekochte producten.

<script>
trackboxx('Purchase', [
  { type: 'order', id: 'ORDER_ID', total: 149.70 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Optioneel — met kortingscode: Voeg voor elke gebruikte kortingscode een extra coupon-object toe.

<script>
trackboxx('Purchase', [
  { type: 'order', id: '12345', total: 149.70 },
  { type: 'coupon', name: 'SUMMER10', discount: 10.00 },
  { type: 'product', name: 'Produkt A', price: 99.90 },
  { type: 'product', name: 'Produkt B', price: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• Het Purchase-event heeft geen voorafgaande gebeurtenismarkering zoals bij ViewProduct of AddToCart: het order-object identificeert de gebeurtenis zelf.
• order.id = unieke bestel-ID van het shopsysteem.
• order.total = totale waarde van de bestelling (bruto eindbedrag inclusief verzendkosten en belastingen wordt aanbevolen, maar moet overeenkomen met de product.price waarden).
• product.price = regeltotaal (eenheidsprijs × hoeveelheid), niet de eenheidsprijs.
• Voorkom herhaalde activering bij het herladen, bijvoorbeeld met een server-side vlag of een sessiemarkering.

Prijslogica & hoeveelheid

Trackboxx gebruikt geen afzonderlijk quantity-veld. Hoeveelheden worden impliciet via de prijs weergegeven. Deze regel is bindend en moet in elke integratie op dezelfde manier worden toegepast:

Voorbeeld: Drie identieke artikelen van elk € 19,99 in het winkelmandje worden voor ViewCart en Purchase verzonden als één product-object met price: 59.97, niet als drie afzonderlijke objecten en zonder quantity-veld.

Volgorde van objecten in de matrix

Voor een schone, consistente integratie raden we de volgende volgorde van objecten aan:

1. Gebeurtenismarkering of order-object (ViewProduct / AddToCart / ViewCart / order)
2. cart-object (alleen voor ViewCart)
3. coupon-objecten (alleen voor Purchase, indien aanwezig)
4. product-objecten

Beste praktijken

• Deduplicatie: Verstuur elke gebeurtenis slechts één keer per daadwerkelijke actie: voorkom dubbele metingen bij herladen, terugnavigeren of nieuwe AJAX-pogingen.
• Timing: Activeer ViewProduct en ViewCart bij het laden van de pagina, AddToCart nadat de toevoeging aan het winkelmandje is bevestigd en Purchase één keer op de bedankpagina.
• Prijzen en bedragen: Geef ze door als Number, niet als tekenreeks, met een punt als decimaal scheidingsteken (bijvoorbeeld 19.99, niet "19,99").
• Consistentie: Kies netto- of brutowaarden voor je winkel en pas die keuze consequent toe op cart.amount, product.price en order.total.
• Gegevensbescherming: Verstuur nooit persoonsgegevens: geen e-mailadressen, namen, klantnummers of adressen. Respecteer de toestemming.

Snelle checklist per winkelsysteem

• WooCommerce: Gebruik de officiële Trackboxx-plugin. Deze activeert alle vier de gebeurtenissen (ViewProduct, AddToCart, ViewCart, Purchase) automatisch - geen handmatige integratie nodig.
• Custom Shops: Voeg aan de serverzijde de productnaam, de prijs en het totaal als variabelen toe aan het betreffende inline-script.
• Shopify: Voeg de snippets toe aan de templates (product.liquid, cart.liquid, bedankpagina na het afrekenen). Gebruik voor AddToCart de AJAX-succescallback.
• Shopware / Magento: Koppel de aanroepen aan de bijbehorende gebeurtenissen of hooks in het thema of de plugin: productpagina, winkelmandpagina, toevoegen aan het winkelmandje en voltooien van de bestelling.

Referentie: Minimumvarianten

ViewProduct (minimaal)

trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Taal van de code: JavaScript (javascript)

AddToCart (minimaal)

trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Taal van de code: JavaScript (javascript)

ViewCart (minimaal)

trackboxx('Purchase', [
  { type: 'ViewCart' },
  { type: 'cart', amount: 19.99 }
]);Taal van de code: JavaScript (javascript)

Purchase (minimaal)

trackboxx('Purchase', [
  { type: 'order', id: 'ORDER_ID', total: 19.99 },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Taal van de code: JavaScript (javascript)

Kort overzicht: De belangrijkste regels

• trackboxx('Purchase', [...]) is een algemene e-commerce-aanroep, geen gebeurtenis.
• Het gebeurtenistype staat in het type-veld van het eerste object in de payload, niet in de functieaanroep.
• Activeer AddToCart nadat het product met succes aan het winkelmandje is toegevoegd, niet alleen bij een klik.
• cart.amount is standaard een nettowaarde; brutowaarden zijn toegestaan, maar moeten binnen de gebeurtenis consistent zijn.
• price is de eenheidsprijs voor ViewProduct en AddToCart, en het regeltotaal voor ViewCart en Purchase.
• Geen afzonderlijk quantity-veld: hoeveelheden worden via de prijs weergegeven.
• De Purchase-gebeurtenis is gebaseerd op { type: 'order' }, zonder voorafgaande gebeurtenismarkering.
• Geef prijzen door als Number met een punt als decimaal scheidingsteken, nooit als String.
• Geen persoonsgegevens in de payload.