eCommerce Events
Mit Hilfe der Erfassung von eCommerce Events lässt sich die komplette User Journey durch einen Online-Shop nachvollziehen und auf Kategorien und Artikel herunterbrechen. Zu den eCommerce Events zählen nicht nur die Transaktionsdaten beim Bestellabschluss, sondern auch die Interaktionen, die vor einem Kauf stattfinden:
- Produktlisten-Ansichten
- Produktdetail-Aufrufe
- Merklisten-Aktionen
- Warenkorb-Aktionen
- Bestellungen bis hin zu Wandlung in Käufe oder Stornos
Implementierung über Plugins
In diesen Plugins ist das eCommerce Event-Tracking bereits integriert:
Wenn du ein anderes Shopsystem einsetzt und das Google Enhanced Ecommerce Plugin nutzt (direkt und nicht über den Google Tag Manager), übernimmt etracker die Messung, indem du eine Ergänzung im etracker Tracking Code vornimmst (siehe Google Enhanced Ecommerce Activities mit etracker messen).
Die eCommerce JavaScript-Schnittstelle kann auch direkt in die Website eingebunden und die Informationen mit Seitenaufrufen und Klick-Events an etracker übergeben werden.
Google Enhanced Ecommerce Activities mit etracker messen
Ist das (Erweiterte) Ecommerce Tracking von Google im Shop integriert, können die Daten von etracker erfasst werden, wenn die Integration direkt über die Website und nicht via Data Layer des Google Tag Managers erfolgt. Dies vereinfacht die Migration von Google Analytics sehr, wenn nicht eines der oben genannten Plugins verwendet wird. Der Einsatz von Google Analytics ist hierfür nicht erforderlich. Das Google Analytics Tag kann weiterhin vorhanden bleiben oder auch entfernt werden.
Zudem ist Voraussetzung, dass der aktuelle etracker Tracking Code korrekt eingebunden ist und um das Data-Attribut data-ecommerce-grabber=“true““ ergänzt wird.
Der Tracking Code sieht dann wie folgt aus:
<!-- Copyright (c) 2000-2021 etracker GmbH. All rights reserved. -->
<!-- This material may not be reproduced, displayed, modified or distributed -->
<!-- without the express prior written permission of the copyright holder. -->
<!-- etracker tracklet 5.0 -->
<script type="text/javascript">
// var et_pagename = "";
// var et_areas = "";
// var et_tval = 0;
// var et_tsale = 0;
// var et_tonr = "";
// var et_basket = "";
</script>
<script data-ecommerce-grabber="true" id="_etLoader" type="text/javascript" charset="UTF-8" data-block-cookies="true" data-respect-dnt="true"
data-secure-code="XXXXXX" src="//code.etracker.com/code/e.js" async></script>
<!-- etracker tracklet 5.0 end -->
Der data-secure-code „XXXXXX“ ist durch den persönlichen Account-Schlüssel zu ersetzen.
Folgende eCommerce Events werden von etracker übernommen:
- Produkt auf einer Liste gesehen
- Produkt(-detailseite) angesehen
- In den Warenkorb gelegt
- Aus dem Warenkorb entfernt
- Bestellung des Produkts als Lead
Wichtig:
Sollten bereits etracker eCommerce Events über ein Plugin oder die direkt eingebundene API gemessen werden, sollte die hier beschriebene Funktion nicht genutzt werden, da die Events dann doppelt erfasst werden.
etracker eCommerce API in die Website einbinden
Die eCommerce API ist eine JavaScript-Schnittstelle. Die Schnittstelle ist mit der Auslieferung des etracker Tracking Codes aktiviert, sodass die Events sofort in den Code eingebunden werden können.
Debug-Modus
Die Schnittstelle ist mit einem Debug-Modus ausgestattet, der besonders während des Einbaus der eCommerce API hilfreich ist. Wenn der Debug-Modus aktiviert ist, werden Fehlermeldungen, Events und der Aufruf der etracker Schnittstelle in der JavaScript-Konsole angezeigt. Die Events werden nicht an etracker übermittelt, wenn der Debug-Modus aktiviert ist. Der Modus kann erst eingeschaltet werden, wenn der Tracking Code komplett geladen ist. Um die Ausgaben lesen zu können, helfen Entwicklertools wie sie heute von vielen Browsern angeboten werden.
Browser | Entwicklertool | Bezugsort |
---|---|---|
Firefox | Entwicklertools | Ist im Browser integriert |
Edge | Entwicklertools | Ist im Browser integriert |
Chrome | Entwicklertools | Ist im Browser integriert |
Opera | Entwicklertools | Ist im Browser integriert |
Safari | Entwicklertools | Ist im Browser integriert |
Debug-Modus mit Konfigurationsobjekt _etr einschalten
Die Einstellung greift erst, wenn die Datei e.js nachgeladen ist. Vorher versendete Events werden aber trotzdem auf Fehler geprüft, da sie ja erst verarbeitet werden, wenn die e.js geladen ist. Wenn _etr bereits existiert, sollte es nicht überschrieben werden.
Beispiel:
<script type="text/javascript" charset="UTF-8">
// Parameterblock
var et_pagename = "__INDEX__";
_etr = {
debugMode : true
}
</script>
<script id="_etLoader" type="text/javascript" charset="UTF-8" data-preload-dc="data-preload-dc" data-secure-code="XXXXXX" src="//code.etracker.com/code/e.js" async></script>
Debug-Modus mit etCommerce.debugMode einschalten
Hinweis: Die Variable etCommerce.debugMode muss nach dem Aufruf des Tracking Codes gesetzt werden. Der Tracking Code wird durch die Datei e.js aufgerufen.
// einschalten des Debug-Modus
etCommerce.debugMode = true;
Debug-Modus über die Konsole einschalten
Der Debug-Modus lässt sich auch direkt in der Konsole aktivieren mit folgenden Befehlen:
_etracker.tools.enableDebug()
_etracker.tools.enableDebugMode()
Es wird ein Config-Cookie für diese Session gesetzt, welches die jeweilige Einstellung enthält. Die Einstellung bleibt bestehen, wenn du beide Debug-Modus gleichzeitig einstellen möchtest.
Nach erfolgreichem Test lässt sich der Debug-Modus mit folgenden Befehlen ausschalten:
_etracker.tools.disableDebug()
_etracker.tools.disableDebugMode()
Beispiel für Tracking Code etCommerce.debugMode hinter Parameterblock und etracker Code:
<script type="text/javascript" charset="UTF-8">
// Parameterblock
var et_pagename = "Seitenname";
</script>
<script id="_etLoader" type="text/javascript" charset="UTF-8" data-preload-dc="data-preload-dc" data-secure-code="XXXXXX" src="//code.etracker.com/code/e.js" async></script>
<script type="text/javascript" charset="UTF-8">
etCommerce.debugMode = true;
</script>
Funktionen der eCommerce API
Die Schnittstelle hat zwei grundlegende Funktionen, um Informationen an etracker zu übermitteln: sendEvent und attachEvent. sendEvent ist der direkte Aufruf eines von der Schnittstelle definierten eCommerce Events, welcher sofort die übergebenen Werte sendet. Soll das Absenden an ein bestimmtes JavaScript Event gekoppelt sein – z. B. Besucher klickt auf in den Warenkorb – dann kann die Funktion attachEvent verwendet werden, die das eCommerce Event an ein gewünschtes Objekt der Webseite anhängt. Wenn der Tracking Code am Ende der HTML-Seite eingebaut ist oder asynchron geladen wird, gibt es die Möglichkeit, Events und das Anhängen von Events an HTML-Objekte zwischenzuspeichern. Die Funktionen werden dann ausgeführt, wenn der etracker Tracking Code komplett geladen ist.
sendEvent – Event direkt absenden
etCommerce.sendEvent(event, parameter_1, [parameter_n])
Die Funktion sendEvent des Objekts etCommerce wird im JavaScript direkt aufgerufen. Die übergebenen Werte werden dabei direkt an etracker übermittelt.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
event | string | Es werden nur die von der Schnittstelle definierten Events unterstützt. | Name des Events |
parameter_1, [parameter_n] | variiert | Siehe weitere Beschreibung |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter.
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('viewProduct', product, 'Warenkorb 1') ;
attachEvent – Event an Objekt anknüpfen
etCommerce.attachEvent(attachObject, event, parameter_1, [parameter_n]) Mit der Funktion attachEvent kann an jedes Webseiten-Objekt, das eine ID besitzt, einem eCommerce Event angehängt werden. Dieses wird dann durch das angegebene JavaScript-Event ausgelöst. So kann direkt mit dem Klick auf den Button In den Warenkorb das eCommerce Event an etracker übermittelt werden.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
attachObject | Objekt | Es werden nur bestehende JavaScript-Events und Objekt-IDs, die mittels getElementById ermittelt werden, unterstützt. Der Aufbau des Objekts ist folgendermaßen: {'Eventname' : ['Objekt-ID1', ‘Objekt-ID2’]} | In diesem Objekt sind das JavaScript-Event und die IDs der Webseiten-Objekte enthalten, an das dieses Event angehängt wird. |
event | string | Es werden nur die von der Schnittstelle definierten Events unterstützt (siehe "Mögliche Events"). | Name des angehängten Events |
parameter_1, [parameter_n] | variiert | Siehe weitere Beschreibung |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter.
Beispiel:
// Verknüpfen des eCommerce Events mit einem JavaScript-Event
etCommerce.attachEvent({'mousedown' : ['viewButton']}, 'viewProduct', product, 'Warenkorb 1') ;
Mögliche Events
Gegenwärtig unterstützt die eCommerce API neun verschiedene Events, die im Folgenden beschrieben werden.
ViewProductList – Produkt in Liste gesehen
Dieses Event kann gesendet werden, wenn sich der Kunde auf einer Produktliste befindet.
Funktionsparameter | Attribut | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|---|
'viewProductList' | ||||
Listentyp | type | string | Nur die Werte ‚categorylist‘, ‚searchlist‘ und ‚genericlist‘ sind zugelassen | Der Default ist genericlist, wenn kein oder ein ungültiger Wert übergeben wird |
Produkt-Objekte | products | array | Das Array muss der Produkte-Array-Beschreibung entsprechen | In diesem Array werden die verschiedenen Produkt-Objekte und deren Position in der Liste hinterlegt |
Beispiel:
{"eventName":"viewProductList","productList":{"type":"genericlist","products":[{"id":"12345","name":"Silber","category":["Strom","Privatkunden"],"price":0,"currency":"EUR"},{"id":"12346","name":"Gold","category":["Strom","Privatkunden"],"price":0,"currency":"EUR"},{"id":"12347","name":"Platinum","category":["Strom","Privatkunden"],"price":0,"currency":"EUR"}]}}
viewProduct – Produkt(-Detailseite) angesehen
Dieses Event kann gesendet werden, wenn sich der Kunde auf der Produktseite befindet. enn sich der Kunde auf der Produktseite oder einer Übersichtsseite von Produkten befindet.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'viewProduct' | string | Nur dieser Name ist zugelassen | Name des Events |
Produkt-Objekt | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen (siehe "Das Produkt-Objekt") | Ein Produkt-Objekt |
Beispiel:
// Definition des Produkt-Objekts
var product =
{
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
currency : 'EUR',
variants : {'Farbe' : 'gelb', 'Geschlecht' : 'weiblich', 'Figur' : 'dünn'}
};
// direkter Aufruf
etCommerce.sendEvent('viewProduct', product, 'Warenkorb 1') ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['button_ view']}, 'viewProduct', product, 'Warenkorb 1') ;
insertToWatchlist – Produkt zur Merkliste hinzugefügt
Dieses Event wird gesendet, wenn der Kunde seiner Merkliste ein Produkt hinzufügt.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'insertToWatchlist' | string | Nur dieser Name ist zugelassen | Name des Events |
Produkt-Objekt | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen (siehe "Das Produkt-Objekt") | Ein Produkt-Objekt |
Anzahl | integer | 0 - 65 535 Negative Zahlen sind nicht erlaubt | Die Anzahl der auf die Merkliste gesetzten Produkte |
[Seitenname] | string | Maximal 255 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Unterscheidet sich der Sei-tenname von dem Standard, kann dieser Seitenname übergeben werden |
[Positition in Produktliste] | integer | Negative Zahlen sind nicht erlaubt | Position in der Quellproduktliste |
[Quelle] | string | {categorylist, searchlist, genericlist, productpage} | Art der Seite, aus der das Produkt in den Warenkorb gelegt wurde. Wird dieser Parameter weggelassen und eine Position in der Produktliste angegeben wird 'genericlist' angenommen. |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter. Wird der Artikel direkt von einer Liste auf die Merkliste gesetzt, empfiehlt es sich, die Position und Quelle zu übergeben.
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('insertToWatchlist', product, 2 ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['insertButton']}, 'insertToWatchlist', product, 2) ;
removeFromWatchlist – Produkt von Merkliste entfernt
Mit Hilfe dieses Events kann festgestellt werden, welche Produkte wieder von der Merkliste entfernt wurden.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'removeFromWatchlist' | string | Nur dieser Name ist zugelassen | Name des Events |
Produkt-Objekt | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen (siehe "Das Produkt-Objekt") | Ein Produkt-Objekt |
Anzahl | integer | 0 - 65 535 Negative Zahlen sind nicht erlaubt | Die Anzahl der entfernten Produkte |
[Seitenname] | string | Maximal 255 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Unterscheidet sich der Seitenname von dem Standard, kann dieser Seitenname übergeben werden |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter.
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('removeFromWatchlist', product, 1) ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['removeButton']}, 'removeFromWatchlist', product, 1) ;
insertToBasket – Produkt in den Warenkorb gelegt
Dieses Event wird gesendet, wenn der Kunde seinem Warenkorb ein Produkt hinzufügt.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'insertToBasket' | string | Nur dieser Name ist zugelassen | Name des Events |
Produkt-Objekt | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen (siehe "Das Produkt-Objekt") | Ein Produkt-Objekt |
Anzahl | integer | 0 - 65 535 Negative Zahlen sind nicht erlaubt | Die Anzahl der in den Warenkorb gelegten Produkte |
[Position in Produktliste] | integer | Negative Zahlen sind nicht erlaubt | Position in der Quellproduktliste. |
[Quelle] | string | {categorylist, searchlist, genericlist, productpage} | Art der Seite, aus der das Produkt in den Warenkorb gelegt wurde. Wird dieser Parameter weggelassen und eine Position in der Produktliste angegeben wird 'genericlist' angenommen. |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter. Wird der Artikel direkt von einer Liste in den Warenkorb gelegt, empfiehlt es sich, die Position und Quelle zu übergeben.
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('insertToBasket', product, 2) ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['insertButton']}, 'insertToBasket', product, 2) ;
removeFromBasket – Produkt aus dem Warenkorb entfernt
Mit Hilfe dieses Events kann festgestellt werden, welche Produkte wieder aus einem Warenkorb entfernt wurden.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'removeFromBasket' | string | Nur dieser Name ist zugelassen | Name des Events |
Produkt-Objekt | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen. | Ein Produkt-Objekt |
Anzahl | integer | 0 - 65 535 Negative Zahlen sind nicht erlaubt | Die Anzahl der entfernten Produkte |
Beispiele:
// direkter Aufruf
etCommerce.sendEvent('removeFromBasket', product, 1) ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['removeButton']}, 'removeFromBasket', product, 1) ;
order – Bestellung
Dieses Event übermittelt die gesamte Bestellung mit allen Bestelldaten und dem Warenkorb.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'order' | string | Nur dieser Name ist erlaubt | Name des Events |
Bestell-Objekt | object | Das Objekt muss der Bestell-Objekt-Beschreibung entsprechen - siehe "Das Bestell-Objekt" | Ein Bestell-Objekt |
currency | string | maximal 3 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Währung nach ISO 4217 z. B.: EUR oder USD |
Beispiel:
// Definition des Bestell-Objekts
var order =
{
orderNumber : 'Bestellnummer 1',
status : 'sale',
orderPrice : '1723.60',
basket : {
id : 'Warenkorb 1',
products : [
{
product: {
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
currency : 'EUR',
},
quantity : 1
}]
},
customerGroup : 'Tierliebhaber',
deliveryConditions : 'Großer Transport',
paymentConditions : 'Sofortzahlung',
};
// direkter Aufruf
etCommerce.sendEvent('order', order) ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['orderButton']}, 'order', order) ;
orderConfirmation – Bestellung vom Status Lead in den Status Sale transferiert
Dieses Event wird gesendet, wenn z. B eine Bestellung bestätigt wurde.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'orderConfirmation' | string | Nur dieser Name ist zugelassen | Name des Events |
Bestellnummer | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Bestellnummer der Bestellung, für die der Status 'Lead' in 'Sale' übergehen soll |
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('orderConfirmation', 'Bestellnummer 1');
// Als Event angehängt
etCommerce.attachEvent({'mousedown' :['cancelButton']}, 'orderConfirmation', 'Bestellnummer 1') ;
orderCancellation – Bestellung storniert
Dieses Event wird gesendet, wenn der Kunde die gesamte Bestellung storniert.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'oderCancellation' | string | Nur dieser Name ist zugelassen | Name des Events |
Bestellnummer | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Bestellnummer der Bestellung, die storniert werden soll |
Beispiel:
// direkter Aufruf
etCommerce.sendEvent('orderCancellation', 'Bestellnummer 1') ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['cancelButton']}, 'orderCancellation', 'Bestellnummer 1') ;
orderPartialCancellation – Bestellung teilstorniert
Dieses Event wird gesendet, wenn nur einzelne Produkte einer Bestellung storniert werden.
Funktionsparameter | Datentyp | Begrenzung | Beschreibung |
---|---|---|---|
'orderPartialCancellation' | string | Nur dieser Name ist erlaubt | Name des Events |
Bestellnummer | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Bestellnummer der Bestellung, die storniert werden soll |
Produkt-Objekte | array of objects | Das Array muss der Produkte-Array-Beschreibung entsprechen. | Ein Array, welches aus verschiedenen Produkt-Objekten und deren jeweils zu stornierenden Anzahl besteht |
Beispiel:
// Definition von Produkt-Objekten
var products = [
{
product : {
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
},
quantity: 1
}
];
// direkter Aufruf
etCommerce.sendEvent('orderPartialCancellation', 'Bestellnummer 1' , products) ;
// Als Event angehängt
etCommerce.attachEvent({'mousedown' : ['partialButton']}, 'orderPartialCancellation', 'Bestellnummer 1' , products) ;
Event Objekte
Die Informationen zu den Produkten, den Warenkörben und den Bestellungen werden in JavaScript-Objekten abgelegt. Im Folgenden wird eine Aufstellung dieser Objekte und ihr Aufbau dargestellt.
Das Produkt-Objekt
Dieses Objekt definiert ein Produkt mit den dazugehörigen Attributen.
Name | Attribut | Datentyp | Begrenzung | Kommentar |
---|---|---|---|---|
Produkt-ID | id | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Produkt-ID wird von Ihnen festgelegt und ergibt sich z. B. aus Ihrem Warenwirtschaftssystem |
Produkt-Name | name | string | Maximal 255 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Der Name des Produktes |
Produkt-Hierarchie (Kategorie) | category | array of strings | Es können maximal vierstufige Hierarchien abgebildet werden. Das Array oder eine Kategorie kann auch leer sein. Die Hierarchien können 50 Zeichen lang sein, Leerzeichen am Anfang und Ende werden entfernt. | Die Produkthierarchie wird in einem Array gespeichert, z. B.: ['Monitore', '', 'Flachbildschirme', 'LED'] |
(Nominal)-Preis | price | string | Maximal 20 Zeichen lang, Dezimaltrenner ist ein Punkt. Leerzeichen am Anfang und Ende werden entfernt | Der Preis des Produktes |
Währung | currency | string | maximal 3 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Währung nach ISO 4217 z. B.: EUR oder USD |
Varianten | variants | Object with key/value pairs | Das Objekt kann leer sein. Die Varianten können 50 Zeichen lang sein, Leerzeichen am Anfang und Ende werden entfernt. Maximal 3 Varianten | Um verschiedene Varianten eines Produktes zu übergeben. z. B.: {'Farbe': 'gelb', 'Geschlecht': 'weiblich', 'Figur': 'dünn'} |
Beispiel:
// Definition eines Produkt-Objekts
var product =
{
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
currency : 'EUR',
variants : {'Farbe' : 'gelb', 'Geschlecht' : 'weiblich', 'Figur' : 'dünn'}
};
Das Warenkorb-Objekt
Bei einer Bestellung werden die bestellten Produkte in einem Warenkorb-Objekt abgelegt.
Name | Attribut | Datentyp | Begrenzung | Kommentar |
---|---|---|---|---|
Warenkorb-ID | id | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Warenkorb-ID wird von dir festgelegt |
Produkt-Objekte | products | array of objects | Das Array muss der Produkte-Array-Beschreibung entsprechen (siehe folgende Tabelle) | In diesem Array werden die verschiedenen Produkt-Objekte und die bestellte Anzahl hinterlegt |
Das Array products enthält ein oder mehrere Objekte, die wiederum aus Produkt-Objekten und der jeweiligen Anzahl bestehen. Dieses Produkte-Array findet auch in einer Teilstornierung Verwendung.
Name | Attribut | Datentyp | Begrenzung | Kommentar |
---|---|---|---|---|
Produkt | product | object | Das Objekt muss der Produkt-Objekt-Beschreibung entsprechen. | Das Produkt-Objekt |
Anzahl | quantity | integer | 0 - 65 535 Negative Zahlen sind nicht erlaubt | Die bestellte/stornierte Anzahl |
Beispiel:
// Definition eines Warenkorb-Objekts mit Produkte-Array
var basket =
{
id : '3',
products : [
{
product: {
…
},
quantity : 2
},
{
product: {
…
},
quantity : 1
}
]
};
Das Bestell-Objekt
Das Objekt der Bestellung enthält sämtliche Bestelldaten und das Warenkorb-Objekt.
Name | Attribut | Datentyp | Begrenzung | Kommentar |
---|---|---|---|---|
Bestellnummer | orderNumber | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die von dir festgelegte eindeutige Bestellnummer. Mit dieser werden spätere Stornierungen getätigt. Bestellnummern, die sich nicht eindeutig einer Bestellung zuordnen lassen, verfälschen die Daten. |
Status | status | enum | Enthält lead, sale, cancellation oder partial_cancellation | |
Bestellwert | orderPrice | string | Maximal 20 Zeichen lang, Dezimaltrenner ist ein Punkt. Leerzeichen am Anfang und Ende werden entfernt | Der Gesamtwert der Bestellung. Er sollte sich möglichst als Summe aus Warenkorbwert und Versandkosten ergeben. Rabatte, Gutscheine oder Sonderkosten durch Zahlungsart o.ä. sollten als Produkt-Objekt erfasst werden. |
Währung | currency | string | Maximal 3 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | Die Währung der Bestellung nach ISO 4217 z. B.: EUR oder USD |
Warenkorb | basket | object of warenkorb | Das Objekt muss der Warenkorb-Objekt-Beschreibung entsprechen | Das Warenkorb-Objekt |
[Kundengruppe] | customerGroup | string | Maximal 50 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | z. B.: - Neukunde - Stammkunde - Vielkäufer - VIP |
[Lieferbedingungen] | deliveryConditions | string | Maximal 255 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | z. B.: - Lieferung bis Bordsteinkante - Aufstellung vor Ort - Lieferung an Packstation/Paket-shop/Filiale |
[Zahlungsbedingungen] | paymentConditions | paymentConditions | Maximal 255 Zeichen lang, Leerzeichen am Anfang und Ende werden entfernt | z. B.: - Spezielle Zahlungsziele - Skonto - Ratenzahlung |
Hinweis: Parameter in eckigen Klammern [ ] sind optionale Parameter.
Beispiel:
// Definition eines Bestell-Objekts
var order =
{
orderNumber : '234',
status : 'sale',
orderPrice : '5447.2',
currency : 'EUR',
basket : {Warenkorb-Objekt},
customerGroup : ‘Tierliebhaber’,
deliveryConditions : 'Großer Transport',
paymentConditions : 'Sofortzahlung',
}
Anwendungsbeispiele
Die Anwendungsbeispiele verdeutlichen, wie die verschiedenen Events für ausgewählte Aktionen auf der Website an etracker gesendet werden können.
Produktseite angesehen
Beim Aufrufen einer Produktseite sollen die Produktinformationen sofort an etracker übermittelt werden. Dafür wird ein Produkt-Objekt definiert. Die Daten werden über die sendEvent-Funktion direkt übermittelt.
Beispiel:
var et_Commerce_basketId = '3';
var et_Commerce_product =
{
id : '3445',
name : 'TV 47 Zoll Special Angebot',
category : [‘TV’, 'LCD', '47', 'Special'],
price : '1723.60',
};
// Produkt gesehen
etCommerce.sendEvent('viewProduct', et_Commerce_product, et_Commerce_basketId);
Produkt in den Warenkorb gelegt
Um Produkte zu erfassen, die in den Warenkorb gelegt werden (durch Klicken auf einen in den Warenkorb legen-Button), ist ein Event zu definieren, das sich an den vorhandenen Button hängt. Zuvor muss ein Produkt-Objekt definiert werden, das die Produktdaten enthält. Die ID des Buttons lautet in diesem Fall ButtonAddToBasket und die Datenübermittlung erfolgt, wenn das JavaScript-Event mousedown ausgelöst wird. Die Anzahl der erfassten Produkte ergibt sich aus einem auf der Webseite hinterlegten Formularfeld ProductQuantity.
Beispiel:
var et_Commerce_basketId = '3';
var et_Commerce_product =
{
id : '3445',
name : 'TV 47 Zoll Special Angebot',
category : [‘TV’, 'LCD', '47', 'Special'],
price : '1723.60',
};
Var et_Commerce_quantity = Number(document.getElementById('ProductQuantity').value) ;
etCommerce.attachEvent({'mousedown' : ['ButtonAddToBasket']}, 'insertToBasket', et_Commerce_product, et_Commerce_quantity, et_Commerce_basketId);
Produkt aus dem Warenkorb entfernen
Um die Information zu übermitteln, dass der Kunde ein Produkt wieder aus dem Warenkorb genommen hat, muss das Event removeFromBasket aufgerufen werden. Die Daten werden über die sendEvent Funktion direkt übermittelt.
Beispiel:
var et_Commerce_basketId = '3';
var et_Commerce_product =
{
id : '3445',
name : 'TV 47 Zoll Special Angebot',
category : [‘TV’, 'LCD', '47', 'Special'],
price : '1723.60',
};
etCommerce.sendEvent('removeFromBasket', et_Commerce_product, 1, et_Commerce_basketId]);
Eine Bestellung beim Klick absenden
Um eine Bestellung direkt beim Klicken auf den Bestellknopf an etracker zu melden, benötigt man ein Event order, das an den Button sendOrder angehängt wird. Die Daten werden über die sendEvent Funktion direkt übermittelt.
Beispiel:
var basket =
{
id : '3',
products : [
{
product:
{
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
},
quantity : 1
}]
}
var order =
{
orderNumber : '234',
status : 'sale',
orderPrice : '5447.2',
basket : basket,
customerGroup : ‘Tierliebhaber’,
deliveryConditions : 'Großer Transport',
paymentConditions : 'Sofortzahlung',
}
etCommerce.attachEvent( {'mousedown' : ['sendOrder']}, 'order', order);
Change log
Hier sind die Änderungen an der Schnittstelle aufgelistet. Die Anwendungsbeispiele verdeutlichen, wie die verschiedenen Events für ausgewählte Aktionen auf der Webseite an etracker gesendet werden können.
Version 1.1.1
- Fehler im Debug-Modus behoben
- Die Definition von Objekten, die bei einem gewissen Browser-Event ausgelöst werden, hat sich geändert (attachEvent Funktion). Ab jetzt können pro Browser-Event verschiedene Objekt-IDs in einem Array definiert werden.
// Alte Darstellungsform
etCommerce.attachEvent({'mousedown' : 'partialButton'}, 'orderPartialCancellation', 'Bestellnummer 1' , products);
// Neue Darstellungsform mit Array
etCommerce.attachEvent({'mousedown' : ['partialButton', ‘partialButton2’]}, 'orderPartialCancellation', 'Bestellnummer 1' , products);
Version 1.1.3
- Typographie-Fehler in Code-Beispielen behoben („onmousedown“ geändert in „mousedown“).