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('Köp', [...])?

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('Köp', [...]) är ingen enskild händelse, men det generiska anropet för alla e-handelsinteraktioner. Vilken händelse som faktiskt spåras avgörs av första objektet i matrisen om hans typ:

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

Den 'Köp' i funktionsanropet hänvisar helt enkelt till åtgärdskategorin „e-handel“ och förblir alltid densamma - oavsett om du spårar en produktvisning, ett tillägg till varukorgen eller ett faktiskt köp.

De fyra e-handelsevenemangen i korthet

1. viewProduct - sida med produktdetaljer

Trigger: När du ringer upp en produktdetaljsida.
Minimiuppgifter: Produktnamn och enhetspris.

<manus>
trackboxx('Köp', [
  { typ: 'VisaProdukt' },
  { typ: 'produkt', namn: '%%PRODUKTNAMN%%', pris: 99.90 }
]);
</manus>Kodspråk: HTML, XML (xml)

Anteckningar:

• pris = Pris per enhet av produkten (numerisk, punkt som decimalavgränsare).
• Valfria ytterligare fält: sku, kategori.
• För varianter eller buntar: överför det fullständiga variantnamnet inklusive attribut (t.ex. „T-shirt - röd, L“) så att rapporterna aggregeras på ett konsekvent sätt.

2nd AddToCart - Produkten läggs till i varukorgen

Trigger: Efter en framgångsrik „Lägg till i korgen“-processen - inte blind vid klick.
Minimiuppgifter: Produktnamn och enhetspris.

<manus>
trackboxx('Köp', [
  { typ: 'AddToCart' },
  { typ: 'produkt', namn: '%%PRODUKTNAMN%%', pris: 19.99 }
]);
</manus>Kodspråk: HTML, XML (xml)

Anmärkningar om timing - beroende på butikstyp:

• Anpassade butiker och AJAX-varukorgar: Utlös händelsen i success callback för add-to-cart-åtgärden, inte i klickhanteraren. Det innebär att ingen spårningshändelse genereras om artikeln inte alls hamnar i varukorgen på grund av lagerkontroller, validerings- 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 endast om det säkerställs att klicket faktiskt leder till ett lyckat tillägg (t.ex. knappavaktiverad kontroll 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

Trigger: Vid uppringning av varukorgssidan.
Minimiuppgifter: Vagn totalt (belopp). Valfritt: alla inkluderade produkter som separata objekt.

<manus>
trackboxx('Köp', [
  { typ: 'ViewCart' },
  { typ: 'varukorg', belopp: 149.70 },
  { typ: 'produkt', namn: 'Produkt A', pris: 99.90 },
  { typ: 'produkt', namn: 'Produkt B', pris: 49.80 }
]);
</manus>Kodspråk: HTML, XML (xml)

Anteckningar:

• belopp = varukorgens totala belopp. Standard: Netto (motsvarar beteendet hos det officiella WooCommerce-pluginet).
• Om din butik arbetar med bruttopriser är det också tillåtet med bruttovärden - den avgörande faktorn är Enhetlighet inom ett evenemang: varukorg.belopp och alla produkt.pris-värdena måste beräknas på samma grund (alla netto eller alla brutto).
• En separat varukorgsartikel för varje Produkt-objekt.
• Den pris per produkt motsvarar Artikel totalt (enhetspris × kvantitet) - se avsnitt „Prislogik & kvantitet“.

4. Köp - orderavslut (tack-sida)

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.

<manus>
trackboxx('Köp', [
  { typ: 'order', id: 'ORDER_ID', totalt: 149.70 },
  { typ: 'produkt', namn: 'Produkt A', pris: 99.90 },
  { typ: 'produkt', namn: 'Produkt B', pris: 49.80 }
]);
</manus>Kodspråk: HTML, XML (xml)

Valfritt - med kupong: En extra värdecheck per använd värdecheck kupong-objekt.

<manus>
trackboxx('Köp', [
  { typ: 'order', id: '12345', totalt: 149.70 },
  { typ: 'kupong', namn: 'SOMMAR10', rabatt: 10.00 },
  { typ: 'produkt', namn: 'Produkt A', pris: 99.90 },
  { typ: 'produkt', namn: 'Produkt B', pris: 49.80 }
]);
</manus>Kodspråk: HTML, XML (xml)

Anteckningar:

• Vid köptillfället finns det ingen föregående händelsemarkör som med ViewProduct eller AddToCart - den ordning-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).
• produkt.pris = Artikel totalt (pris per enhet × kvantitet), inte pris per enhet.
• Skydda mot multipel avfyrning (reload protection), t.ex. via flagga på serversidan eller sessionsmarkör.

Prislogik & kvantitet

Trackboxx används ingen separat mängd-fält. Mängder mappas implicit via priset. Denna regel är bindande och bör implementeras på samma sätt i varje integration:

Exempel: Tre identiska varor för 19,99 euro vardera i kundkorgen säljs till Visa varukorg och Köp som en Produkt-objekt med pris: 59,97 skickas - inte som tre separata objekt och utan mängd-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. ordning-objekt (VisaProdukt / Lägg till i kundvagnen / Visa varukorg / ordning)
2. vagn-objekt (endast för ViewCart)
3. kupong-Objekt (endast för köp, om tillgängligt)
4. Produkt-föremål

Bästa praxis

• Deduplicering: Skicka varje händelse endast en gång per faktisk åtgärd - ingen dubbel spårning för omladdning, bakåtnavigering eller AJAX-returer.
• Tidpunkt: VisaProdukt och Visa varukorg avfyras vid sidladdning. Lägg till i kundvagnen efter bekräftad tillsättning. Köp en gång på tacksidan.
• Priser & belopp: Som Antal (inte en sträng), med en punkt som decimalavgränsare (t.ex. 19.99 - inte "19,99").
• Konsekvent: Netto eller brutto är ett beslut per butik - men då genomgående för varukorg.belopp, produkt.pris 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 den officiella Trackboxx plugin. Det utlöser alla fyra händelser (VisaProdukt, Lägg till i kundvagnen, Visa varukorg, Köp) automatiskt - ingen manuell integration behövs.
• Custom Shops: På serversidan infogar du produktnamn, pris och total som variabler i respektive inline-skript.
• Shopify: Infoga snippets i mallarna (produkt.vätska, vagn.vätska, Checkout-Thank-You-Page). För Lägg till i kundvagnen docka in på AJAX success callback.
• Shopware / Magento: Koppla till motsvarande händelser eller krokar i temat eller insticksprogrammet - produktsida, varukorgssida, lägg till i varukorgen-händelse, slutför order-händelse.

Referens: Minimivarianter

ViewProduct (minimal)

trackboxx('Köp', [
  { typ: 'VisaProdukt' },
  { typ: 'produkt', namn: 'Produktnamn 1', pris: 19.99 }
]);Kodspråk: JavaScript (javascript)

Lägg till i kundvagn (minimal)

trackboxx('Köp', [
  { typ: 'AddToCart' },
  { typ: 'produkt', namn: 'Produktnamn 1', pris: 19.99 }
]);Kodspråk: JavaScript (javascript)

ViewCart (minimal)

trackboxx('Köp', [
  { typ: 'ViewCart' },
  { typ: 'varukorg', belopp: 19.99 }
]);Kodspråk: JavaScript (javascript)

Köp (minimum)

trackboxx('Köp', [
  { typ: 'order', id: 'ORDER_ID', totalt: 19.99 },
  { typ: 'produkt', namn: 'Produktnamn 1', pris: 19.99 }
]);Kodspråk: JavaScript (javascript)

Kortfattad översikt: De viktigaste reglerna

• trackboxx('Köp', [...]) är ett generiskt e-handelssamtal, inte en händelse.
• Händelsetypen finns i nyttolasten (typ-fältet för det första objektet), inte i funktionsanropet.
• Lägg till i kundvagnen avfyra efter ett lyckat tillägg - inte blint på klick.
• varukorg.belopp som ett nettovärde som standard; bruttovärde tillåtet, men konsekvent inom händelsen.
• pris = Enhetspris vid VisaProdukt / Lägg till i kundvagnen, post totalt för Visa varukorg / Köp.
• Ingen separat mängd-fält - kvantiteter via priset.
• Köp event baserat på { typ: 'order' } utan en föregående händelsemarkör.
• Priser som nummer med punktdecimalavgränsare, aldrig som sträng.
• Inga personuppgifter i lasten.