Spårning av e-handel

Denna guide beskriver hur du manuellt integrerar Trackboxx e-handelsspårning i en butik - oavsett om du använder ett anpassat system, Shopify, Shopware, Magento eller en annan butik. För WooCommerce finns ett officiellt plugin som automatiskt triggar alla de händelser som beskrivs här.

Grundläggande logik: Vad betyder trackboxx('Purchase', [...])?

Innan vi går in på de enskilda händelserna är det viktigt att förstå en sak - erfarenheten har visat att denna punkt oftast misstolkas:

Viktigt: trackboxx('Purchase', [...]) är inte en enskild händelse, utan det generiska anropet för alla e-handelsinteraktioner. Det första objektet i arrayen avgör vilken händelse som spåras genom sitt type-fält:

• { type: 'ViewProduct' } - Sidan med produktdetaljer
• { type: 'AddToCart' } - Produkten läggs till i varukorgen
• { type: 'ViewCart' } - Visa varukorgens sida
• { type: 'order' } - Beställning slutförd

Beteckningen 'Purchase' i funktionsanropet syftar bara på åtgärdskategorin ”e-handel” och är alltid densamma, oavsett om du spårar en produktvisning, ett tillägg i varukorgen eller ett faktiskt köp.

De fyra e-handelshändelserna i korthet

1. ViewProduct – Produktdetaljsida

Utlösning: När en produktdetaljsida öppnas.
Minimiuppgifter: Produktnamn och styckpris.

<script>
trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 99.90 }
]);
</script>Kodspråk: HTML, XML (xml)

Anteckningar:

• price = Pris per enhet av produkten (numerisk, punkt som decimalavgränsare).
• Valfria ytterligare fält: sku, category.
• För varianter eller paket anger du hela variantnamnet inklusive attribut (till exempel ”T-shirt — röd, L”), så att uppgifterna i rapporterna grupperas konsekvent.

2. AddToCart – Vara tillagd i varukorgen

Utlösning: Efter en lyckad ”Lägg i varukorgen”-åtgärd, inte bara vid ett klick.
Minimiuppgifter: Produktnamn och styckpris.

<script>
trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: '%%PRODUCT_NAME%%', price: 19.99 }
]);
</script>Kodspråk: HTML, XML (xml)

Anmärkningar om timing - beroende på butikstyp:

• Anpassade butiker och AJAX-varukorgar: Utlös händelsen i återanropsfunktionen när varan har lagts till i varukorgen, inte i klickhanteraren. Då registreras ingen spårningshändelse om varan inte hamnar i varukorgen på grund av lagerkontroll, valideringsfel eller nätverksfel.
• Butiker på serversidan med omdirigering: Utlös händelsen en gång på följande sida efter ett lyckat tillägg.
• Integrationer med enkla knapptryckningar: tillåtet, men bara om klicket faktiskt leder till att varan läggs till, till exempel genom att kontrollera att knappen är inaktiverad för slutsålda produkter.
• Deduplicering: Skicka AddToCart endast en gång per åtgärd - ingen duplicering för omladdning eller bakåtnavigering.

3. ViewCart – Varukorgssida

Utlösning: När varukorgssidan öppnas.
Minimiuppgifter: Varukorgens totalbelopp (amount). Valfritt: alla produkter i varukorgen som separata objekt.

<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>Kodspråk: HTML, XML (xml)

Anteckningar:

• amount = varukorgens totala belopp. Standard: Netto (motsvarar beteendet hos det officiella WooCommerce-pluginet).
• Om din butik använder bruttopriser är även bruttovärden tillåtna. Det viktiga är konsekvens inom en händelse: cart.amount och alla product.price-värden måste beräknas på samma grund, antingen alla netto eller alla brutto.
• Lägg till ett separat product-objekt för varje rad i varukorgen.
• Värdet price per produkt motsvarar här radsumman (styckpris × antal); se avsnittet ”Prislogik & kvantitet”.

4. Purchase – Slutförd beställning (tacksida)

Trigger: På sidan för orderbekräftelse efter genomförd betalning - exakt en gång per beställning.
Minimiuppgifter: Order-ID, totalbelopp, alla produkter som köpts.

<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>Kodspråk: HTML, XML (xml)

Valfritt — med rabattkupong: Lägg till ett extra coupon-objekt för varje kupong som används.

<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>Kodspråk: HTML, XML (xml)

Anteckningar:

• Purchase-händelsen har ingen föregående händelsemarkör som ViewProduct eller AddToCart — order-objektet identifierar själva händelsen.
• order.id = unikt order-ID från butikssystemet.
• order.total = orderns totala värde (slutligt bruttobelopp inklusive frakt och skatter rekommenderas, men måste överensstämma med värdena för product.price).
• product.price = radsumma (styckpris × antal), inte styckpris.
• Förhindra att händelsen utlöses flera gånger vid omladdning, till exempel med en flagga på serversidan eller en sessionsmarkör.

Prislogik & kvantitet

Trackboxx använder inget separat quantity-fält. Antal anges indirekt via priset. Denna regel är bindande och ska tillämpas på samma sätt i varje integration:

Exempel: Tre identiska varor för 19,99 € styck i varukorgen skickas för ViewCart och Purchase som ett enda product-objekt med price: 59.97, inte som tre separata objekt och utan ett quantity-fält.

Sekvens av objekt i matrisen

För en ren och konsekvent integration rekommenderar vi följande sekvens av objekt:

1. Händelsemarkör eller order-objekt (ViewProduct / AddToCart / ViewCart / order)
2. cart-objekt (endast för ViewCart)
3. coupon-objekt (endast för Purchase, om de finns)
4. product-objekt

Bästa praxis

• Deduplicering: Skicka varje händelse bara en gång per faktisk åtgärd. Undvik dubbelspårning vid omladdning, bakåtnavigering eller nya försök med AJAX-anrop.
• Tidpunkt: Utlös ViewProduct och ViewCart när sidan laddas, AddToCart efter bekräftelse på att varan har lagts till i varukorgen och Purchase en enda gång på tacksidan.
• Priser och belopp: Skicka dem som Number, inte som en sträng, med punkt som decimalavgränsare (till exempel 19.99, inte "19,99").
• Konsekvens: Välj netto- eller bruttovärden för din butik och tillämpa samma val på cart.amount, product.price och order.total.
• Skydd av personuppgifter: Lämna aldrig ut personuppgifter - inga e-postadresser, namn, kundnummer eller adresser. Respektera samtycke.

Snabb checklista per butikssystem

• WooCommerce: Använd det officiella Trackboxx-tillägget. Det utlöser alla fyra händelserna (ViewProduct, AddToCart, ViewCart, Purchase) automatiskt - ingen manuell integration behövs.
• Custom Shops: På serversidan infogar du produktnamn, pris och total som variabler i respektive inline-skript.
• Shopify: Infoga kodsnuttarna i mallarna (product.liquid, cart.liquid, tacksidan efter genomfört köp). Använd AJAX-anropets success-callback för AddToCart.
• Shopware / Magento: Koppla anropen till motsvarande händelser eller hooks i temat eller tillägget: produktsida, varukorgssida, tillägg i varukorgen och slutförd beställning.

Referens: Minimivarianter

ViewProduct (minimal)

trackboxx('Purchase', [
  { type: 'ViewProduct' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Kodspråk: JavaScript (javascript)

AddToCart (minimal)

trackboxx('Purchase', [
  { type: 'AddToCart' },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Kodspråk: JavaScript (javascript)

ViewCart (minimal)

trackboxx('Purchase', [
  { type: 'ViewCart' },
  { type: 'cart', amount: 19.99 }
]);Kodspråk: JavaScript (javascript)

Purchase (minimal)

trackboxx('Purchase', [
  { type: 'order', id: 'ORDER_ID', total: 19.99 },
  { type: 'product', name: 'Product Name 1', price: 19.99 }
]);Kodspråk: JavaScript (javascript)

Kortfattad översikt: De viktigaste reglerna

• trackboxx('Purchase', [...]) är ett generiskt e-handelsanrop, inte en händelse.
• Händelsetypen anges i type-fältet i det första objektet i nyttolasten, inte i funktionsanropet.
• Utlös AddToCart efter att varan har lagts till i varukorgen, inte bara vid ett klick.
• cart.amount är ett nettovärde som standard. Bruttovärden är tillåtna, men måste vara konsekventa inom händelsen.
• price är styckpriset för ViewProduct och AddToCart, och radsumman för ViewCart och Purchase.
• Det finns inget separat quantity-fält: antal anges via priset.
• Purchase-händelsen bygger på { type: 'order' }, utan en föregående händelsemarkör.
• Skicka priser som Number med punkt som decimalavgränsare, aldrig som String.
• Inga personuppgifter i nyttolasten.