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 doet trackboxx('Aankoop', [...])?

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('Aankoop', [...]) is geen enkele gebeurtenis, maar de algemene oproep voor alle e-commerce interacties. Welke gebeurtenis daadwerkelijk wordt bijgehouden, wordt bepaald door de eerste object in de matrix over zijn type:

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

De 'Kopen' in de functieaanroep verwijst gewoon naar de actiecategorie „e-commerce“ en blijft altijd hetzelfde, ongeacht of je een productweergave, een add-to-cart of een daadwerkelijke aankoop volgt.

De vier e-commerce events in een oogopslag

1. BekijkProduct - product detailpagina

Trekker: Bij het oproepen van een productdetailpagina.
Minimale gegevens: Productnaam en eenheidsprijs.

<script>
trackboxx('Kopen', [
  {type: 'BekijkProduct' },
  {type: 'product', naam: '%%PRODUCT_NAME%%'.', prijs: 99.90 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• prijs = Prijs per eenheid van het product (numeriek, punt als decimaal scheidingsteken).
• Optionele extra velden: sku, categorie.
• Voor varianten of bundels: breng de volledige variantnaam over, inclusief attributen (bijv. „T-shirt - rood, L“) zodat rapporten consistent worden samengevoegd.

2e AddToCart - Product toegevoegd aan winkelmandje

Trekker: Na een succesvolle „Proces “Toevoegen aan winkelwagentje" - niet blind bij klikken.
Minimale gegevens: Productnaam en eenheidsprijs.

<script>
trackboxx('Kopen', [
  {type: 'Toevoegen aan winkelwagen' },
  {type: 'product', naam: '%%PRODUCT_NAME%%'.', prijs: 19.99 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen over timing - afhankelijk van het winkeltype:

• Aangepaste winkels en AJAX-winkelmandjes: Fire event in de succes callback van de add-to-cart actie, niet in de click handler. Dit betekent dat er geen tracking-event wordt gegenereerd als het item helemaal niet in het winkelmandje terechtkomt door voorraadcontroles, validatie of netwerkfouten.
• Server-side shops met redirect: Trigger event eenmalig op de volgende pagina na een succesvolle toevoeging.
• Eenvoudige knop-klik integraties: toegestaan, maar alleen als is gegarandeerd dat de klik daadwerkelijk leidt tot een succesvolle toevoeging (bijv. controle via een knop die is uitgeschakeld voor uitverkochte producten).
• Deduplicatie: Stuur AddToCart slechts eenmaal per actie - geen duplicatie voor herladen of terugnavigatie.

3. viewCart - pagina met winkelmandje

Trekker: Wanneer u de pagina met het winkelwagentje oproept.
Minimale gegevens: Totaal winkelwagen (bedrag). Optioneel: alle opgenomen producten als afzonderlijke objecten.

<script>
trackboxx('Kopen', [
  {type: 'ViewCart'.' },
  {type: 'winkelwagen', bedrag: 149.70 },
  {type: 'product', naam: 'Product A', prijs: 99.90 },
  {type: 'product', naam: 'Product B', prijs: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• bedrag = totaalbedrag van het winkelmandje. Standaard: Net (komt overeen met het gedrag van de officiële WooCommerce-plugin).
• Als je winkel met brutoprijzen werkt, zijn brutowaarden ook toegestaan - de beslissende factor is Consistentie binnen een evenement: winkelwagen.bedrag en alle product.prijs-waarden moeten op dezelfde basis worden berekend (alles netto of alles bruto).
• Een apart winkelmandje voor elk product-object.
• De prijs per product komt overeen met de Totaal (eenheidsprijs × hoeveelheid) - zie hoofdstuk „Prijslogica & hoeveelheid“.

4. aankoop - bestelling voltooid (bedankpagina)

Trekker: Op de bevestigingspagina van de bestelling na een succesvolle betaling - precies eenmaal per bestelling.
Minimale gegevens: Bestel-ID, totaalbedrag, alle gekochte producten.

<script>
trackboxx('Kopen', [
  {type: 'bestelling', id: 'ORDER_ID'.', totaal: 149.70 },
  {type: 'product', naam: 'Product A', prijs: 99.90 },
  {type: 'product', naam: 'Product B', prijs: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Optioneel - met voucher: Eén extra voucher per gebruikte voucher coupon-object.

<script>
trackboxx('Kopen', [
  {type: 'bestelling', id: '12345', totaal: 149.70 },
  {type: 'coupon', naam: 'ZOMER10', korting: 10.00 },
  {type: 'product', naam: 'Product A', prijs: 99.90 },
  {type: 'product', naam: 'Product B', prijs: 49.80 }
]);
</script>Taal van de code: HTML, XML (xml)

Opmerkingen:

• Op het aankoopevenement zijn er geen voorafgaande gebeurtenismarkering zoals bij ViewProduct of AddToCart - de bestel-object identificeert de gebeurtenis zelf.
• order.id = unieke bestel-ID van het shopsysteem.
• order.totaal = totale waarde van de bestelling (bruto eindbedrag inclusief verzendkosten en belastingen wordt aanbevolen, maar moet overeenkomen met de product.price waarden).
• product.prijs = Totaal (eenheidsprijs × hoeveelheid), niet de eenheidsprijs.
• Beschermen tegen meervoudig afvuren (herlaadbescherming), bijvoorbeeld via een server-side vlag of sessiemarkering.

Prijslogica & hoeveelheid

Trackboxx gebruikt geen afzonderlijke hoeveelheid-veld. Hoeveelheden worden impliciet in kaart gebracht via de prijs. Deze regel is bindend en moet in elke integratie op dezelfde manier worden geïmplementeerd:

Voorbeeld: Drie identieke artikelen van elk €19,99 in het winkelmandje worden verkocht bij ViewCart en Koop als een product-object met prijs: 59,97 verzonden - niet als drie afzonderlijke objecten en zonder hoeveelheid-veld.

Volgorde van objecten in de matrix

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

1. Gebeurtenismarkering of. bestel-object (BekijkProduct / AddToCart / ViewCart / bestel)
2. wagen-object (alleen voor ViewCart)
3. coupon-Objecten (alleen voor Aankoop, indien beschikbaar)
4. product-objecten

Beste praktijken

• Deduplicatie: Verzend elke gebeurtenis slechts eenmaal per actie - geen dubbele tracering voor herladen, terugnavigatie of AJAX-terugzendingen.
• Timing: BekijkProduct en ViewCart afgaan bij het laden van de pagina. AddToCart na bevestigde toevoeging. Koop eenmaal op de bedankpagina.
• Prijzen en bedragen: Als Aantal (geen tekenreeks), met een punt als decimaal scheidingsteken (bijv. 19.99 - niet "19,99").
• Consistentie: Netto of bruto is een beslissing per winkel - maar dan consequent voor winkelwagen.bedrag, product.prijs en order.totaal.
• Gegevensbescherming: Geef nooit persoonlijke gegevens - geen e-mailadressen, namen, klantnummers of adressen. Respecteer toestemming.

Snelle checklist per winkelsysteem

• WooCommerce: Gebruik de officiële Trackboxx-plugin. Deze activeert alle vier de gebeurtenissen (BekijkProduct, AddToCart, ViewCart, Koop) automatisch - geen handmatige integratie nodig.
• Custom Shops: Aan de serverzijde voegt u de productnaam, de prijs en het totaal in als variabelen in het respectieve inline script.
• Shopify: Voeg knipsels in de sjablonen in (product.vloeistof, winkelwagen.vloeistof, Checkout-Thank-You-Page). Voor AddToCart dock op de AJAX succes callback.
• Shopware / Magento: Koppel aan de overeenkomstige gebeurtenissen of haken in het thema of de plugin - productpagina, pagina met winkelmandje, gebeurtenis voor toevoegen aan winkelwagentje, gebeurtenis voor bestelling voltooid.

Referentie: Minimumvarianten

Bekijk product (minimaal)

trackboxx('Kopen', [
  { type: 'BekijkProduct' },
  { type: 'product', naam: 'Productnaam 1', prijs: 19.99 }
]);Taal van de code: JavaScript (javascript)

AddToCart (minimaal)

trackboxx('Kopen', [
  { type: 'Toevoegen aan winkelwagen' },
  { type: 'product', naam: 'Productnaam 1', prijs: 19.99 }
]);Taal van de code: JavaScript (javascript)

ViewCart (minimaal)

trackboxx('Kopen', [
  { type: 'ViewCart'.' },
  { type: 'winkelwagen', bedrag: 19.99 }
]);Taal van de code: JavaScript (javascript)

Aankoop (minimaal)

trackboxx('Kopen', [
  { type: 'bestelling', id: 'ORDER_ID'.', totaal: 19.99 },
  { type: 'product', naam: 'Productnaam 1', prijs: 19.99 }
]);Taal van de code: JavaScript (javascript)

Kort overzicht: De belangrijkste regels

• trackboxx('Aankoop', [...]) is een algemene e-commerce-oproep, geen gebeurtenis.
• Het gebeurtenistype staat in de payload (type-veld van het eerste object), niet in de functieaanroep.
• AddToCart na een succesvolle toevoeging - niet blindelings na een klik.
• winkelwagen.bedrag standaard een nettowaarde; bruto is toegestaan, maar consistent binnen het evenement.
• prijs = Eenheidsprijs bij BekijkProduct / AddToCart, itemtotaal voor ViewCart / Koop.
• Geen afzonderlijke hoeveelheid-veld - hoeveelheden via de prijs.
• Aankoopevenement gebaseerd op {type: 'order' } zonder voorafgaande gebeurtenismarkering.
• Prijzen als getal met decimaalteken, nooit als tekenreeks.
• Geen persoonlijke gegevens in de payload.