Einbindung \u00fcber ein entsprechendes Plugin<\/li>\n<\/ol>\n\n\n\nManuelle Einbindung<\/h3>\n\n\n\n Die manuelle Einbindung erfordert Programmierkenntnisse und sollte nur von erfahrenen Entwicklern durchgef\u00fchrt werden.<\/p>\n\n\n\n\n\n
\n
Manuelle Einbindung der e-Commerce Scripte<\/h4><\/div>\n\n\n\n<\/stop><\/stop><\/linearGradient><\/defs><\/svg><\/path><\/svg><\/div><\/span><\/div>\n<\/div><\/div>\n<\/div><\/div><\/summary>\n\n\n\n\n
Diese Anleitung beschreibt, wie du das E-Commerce-Tracking von Trackboxx manuell in einen Shop integrierst \u2013 unabh\u00e4ngig davon, ob du ein Custom-System, Shopify, Shopware, Magento oder einen anderen Shop einsetzt. F\u00fcr WooCommerce steht ein offizielles Plugin bereit, das alle hier beschriebenen Events automatisch ausl\u00f6st.<\/p>\n\n\n\n
Grundlogik: Was bedeutet trackboxx('Purchase', [...])<\/code>?<\/h2>\n\n\n\nBevor es an die einzelnen Events geht, ein wichtiger Punkt zum Verst\u00e4ndnis \u2013 dieser Punkt wird erfahrungsgem\u00e4\u00df am h\u00e4ufigsten falsch interpretiert:<\/p>\n\n\n\n
Wichtig:<\/strong> trackboxx('Purchase', [...])<\/code> ist kein einzelnes Event<\/strong>, sondern der generische Aufruf f\u00fcr alle E-Commerce-Interaktionen. Welches Event tats\u00e4chlich getrackt wird, bestimmt das erste Objekt im Array<\/strong> \u00fcber seinen type<\/code>:<\/p>\n\n\n\n\n{ type: 'ViewProduct' }<\/code>\u00a0\u2013 Produktdetailseite<\/li>\n\n\n\n{ type: 'AddToCart' }<\/code>\u00a0\u2013 Produkt in den Warenkorb gelegt<\/li>\n\n\n\n{ type: 'ViewCart' }<\/code>\u00a0\u2013 Warenkorbseite angesehen<\/li>\n\n\n\n{ type: 'order' }<\/code>\u00a0\u2013 Bestellung abgeschlossen<\/li>\n<\/ul>\n\n\n\nDas 'Purchase'<\/code> im Funktionsaufruf bezeichnet lediglich die Aktionskategorie \u201eE-Commerce“ und bleibt immer gleich \u2013 egal ob du eine Produktansicht, einen Add-to-Cart oder einen tats\u00e4chlichen Kauf trackst.<\/p>\n\n\n\nDie vier E-Commerce-Events im \u00dcberblick<\/h2>\n\n\n\n1. ViewProduct \u2013 Produktdetailseite<\/h3>\n\n\n\n Ausl\u00f6sen:<\/strong> Beim Aufruf einer Produktdetailseite.Minimaldaten:<\/strong> Produktname und Einzelpreis.<\/p>\n\n\n<script<\/span>><\/span>\ntrackboxx('Purchase'<\/span>, [\n { type: 'ViewProduct'<\/span> },\n { type: 'product'<\/span>, name: '%%PRODUCT_NAME%%'<\/span>, price: 99.90<\/span> }\n]);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nHinweise:<\/strong><\/p>\n\n\n\n\nprice<\/code>\u00a0=\u00a0Einzelpreis<\/strong>\u00a0des Produkts (numerisch, Punkt als Dezimaltrenner).<\/li>\n\n\n\nOptionale Zusatzfelder:\u00a0sku<\/code>,\u00a0category<\/code>.<\/li>\n\n\n\nBei Varianten oder Bundles: den kompletten Variantennamen inkl. Attribute \u00fcbergeben (z. B. \u201eT-Shirt \u2013 rot, L“), damit Reports konsistent aggregiert werden.<\/li>\n<\/ul>\n\n\n\n2. AddToCart \u2013 Produkt in den Warenkorb gelegt<\/h3>\n\n\n\n Ausl\u00f6sen:<\/strong> Nach erfolgreichem<\/strong> \u201eIn den Warenkorb“-Vorgang \u2013 nicht blind beim Klick.Minimaldaten:<\/strong> Produktname und Einzelpreis.<\/p>\n\n\n<script<\/span>><\/span>\ntrackboxx('Purchase'<\/span>, [\n { type: 'AddToCart'<\/span> },\n { type: 'product'<\/span>, name: '%%PRODUCT_NAME%%'<\/span>, price: 19.99<\/span> }\n]);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nHinweise zum Timing \u2013 je nach Shop-Typ:<\/strong><\/p>\n\n\n\n\nCustom Shops und AJAX-Warenk\u00f6rbe:<\/strong>\u00a0Event im Success-Callback der Add-to-Cart-Aktion feuern, nicht im Click-Handler. So wird kein Tracking-Event erzeugt, wenn der Artikel aufgrund von Bestandspr\u00fcfung, Validierung oder Netzwerkfehlern gar nicht im Warenkorb landet.<\/li>\n\n\n\nServerseitige Shops mit Redirect:<\/strong>\u00a0Event auf der Folgeseite nach erfolgreichem Add einmalig ausl\u00f6sen.<\/li>\n\n\n\nEinfache Button-Klick-Integrationen:<\/strong>\u00a0erlaubt, aber nur, wenn sichergestellt ist, dass der Klick tats\u00e4chlich zu einem erfolgreichen Add f\u00fchrt (z. B. Button-Disabled-Check bei ausverkauften Produkten).<\/li>\n\n\n\nDeduplizierung:<\/strong>\u00a0AddToCart nur einmal pro Aktion senden \u2013 keine Dopplung bei Reload oder Zur\u00fcck-Navigation.<\/li>\n<\/ul>\n\n\n\n3. ViewCart \u2013 Warenkorbseite<\/h3>\n\n\n\n Ausl\u00f6sen:<\/strong> Beim Aufruf der Warenkorbseite.Minimaldaten:<\/strong> Cart-Summe (amount<\/code>). Optional: alle enthaltenen Produkte als separate Objekte.<\/p>\n\n\n<script<\/span>><\/span>\ntrackboxx('Purchase'<\/span>, [\n { type: 'ViewCart'<\/span> },\n { type: 'cart'<\/span>, amount: 149.70<\/span> },\n { type: 'product'<\/span>, name: 'Produkt A'<\/span>, price: 99.90<\/span> },\n { type: 'product'<\/span>, name: 'Produkt B'<\/span>, price: 49.80<\/span> }\n]);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nHinweise:<\/strong><\/p>\n\n\n\n\namount<\/code>\u00a0= Gesamtsumme des Warenkorbs.\u00a0Standard: Netto<\/strong>\u00a0(entspricht dem Verhalten des offiziellen WooCommerce-Plugins).<\/li>\n\n\n\nWenn dein Shop mit Bruttopreisen arbeitet, sind Bruttowerte ebenfalls erlaubt \u2013 entscheidend ist\u00a0Konsistenz innerhalb eines Events<\/strong>:\u00a0cart.amount<\/code>\u00a0und alle\u00a0product.price<\/code>-Werte m\u00fcssen auf derselben Basis (alle netto oder alle brutto) berechnet sein.<\/li>\n\n\n\nPro Warenkorbposition ein eigenes\u00a0product<\/code>-Objekt anh\u00e4ngen.<\/li>\n\n\n\nDer\u00a0price<\/code>\u00a0pro Produkt entspricht hier der\u00a0Positionssumme<\/strong>\u00a0(Einzelpreis \u00d7 Menge) \u2013 siehe Abschnitt \u201ePreislogik & Quantity“.<\/li>\n<\/ul>\n\n\n\n4. Purchase \u2013 Bestellabschluss (Danke-Seite)<\/h3>\n\n\n\n Ausl\u00f6sen:<\/strong> Auf der Bestellbest\u00e4tigungsseite nach erfolgreicher Zahlung \u2013 genau einmal pro Bestellung<\/strong>.Minimaldaten:<\/strong> Order-ID, Gesamtbetrag, alle gekauften Produkte.<\/p>\n\n\n<script<\/span>><\/span>\ntrackboxx('Purchase'<\/span>, [\n { type: 'order'<\/span>, id: 'ORDER_ID'<\/span>, total: 149.70<\/span> },\n { type: 'product'<\/span>, name: 'Produkt A'<\/span>, price: 99.90<\/span> },\n { type: 'product'<\/span>, name: 'Produkt B'<\/span>, price: 49.80<\/span> }\n]);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nOptional \u2013 mit Gutschein:<\/strong> Pro eingesetztem Gutschein ein zus\u00e4tzliches coupon<\/code>-Objekt anh\u00e4ngen.<\/p>\n\n\n<script<\/span>><\/span>\ntrackboxx('Purchase'<\/span>, [\n { type: 'order'<\/span>, id: '12345'<\/span>, total: 149.70<\/span> },\n { type: 'coupon'<\/span>, name: 'SUMMER10'<\/span>, discount: 10.00<\/span> },\n { type: 'product'<\/span>, name: 'Produkt A'<\/span>, price: 99.90<\/span> },\n { type: 'product'<\/span>, name: 'Produkt B'<\/span>, price: 49.80<\/span> }\n]);\n<\/span><\/script<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\nHinweise:<\/strong><\/p>\n\n\n\n\nBeim Purchase-Event gibt es\u00a0keinen<\/strong>\u00a0vorangestellten Event-Marker wie bei ViewProduct oder AddToCart \u2013 das\u00a0order<\/code>-Objekt identifiziert den Event selbst.<\/li>\n\n\n\norder.id<\/code>\u00a0= eindeutige Bestell-ID aus dem Shop-System.<\/li>\n\n\n\norder.total<\/code>\u00a0= Gesamtwert der Bestellung (Brutto-Endbetrag inkl. Versand und Steuern wird empfohlen, muss aber zur Konsistenz mit den product.price-Werten passen).<\/li>\n\n\n\nproduct.price<\/code>\u00a0=\u00a0Positionssumme<\/strong>\u00a0(Einzelpreis \u00d7 Menge), nicht Einzelpreis.<\/li>\n\n\n\nGegen mehrfaches Feuern absichern (Reload-Schutz), z. B. \u00fcber serverseitiges Flag oder Session-Marker.<\/li>\n<\/ul>\n\n\n\nPreislogik & Quantity<\/h2>\n\n\n\n Trackboxx verwendet kein separates quantity<\/code>-Feld<\/strong>. Mengen werden implizit \u00fcber den Preis abgebildet. Diese Regel ist verbindlich und sollte in jeder Integration gleich umgesetzt werden:<\/p>\n\n\n\nEvent<\/th> Bedeutung von price<\/code><\/th><\/tr><\/thead>ViewProduct<\/code><\/td>Einzelpreis des Produkts<\/td><\/tr> AddToCart<\/code><\/td>Einzelpreis des Produkts<\/td><\/tr> ViewCart<\/code><\/td>
![\"\"](\"https:\/\/trackboxx.com\/wp-content\/uploads\/2024\/05\/e-commerce-trackboxx.webp\" "\\"\\"")
<\/a><\/figure>\n\n\n\n