E-Commerce Tracking
By recording e-commerce events, the entire user journey through an online store can be tracked and broken down into categories and articles. In addition to transaction data when an order is completed, e-commerce events also include interactions that take place before a purchase:
- Product list views
- Product detail calls
- Watchlist actions
- Shopping cart promotions
- Orders up to and including conversion to purchases or cancelations.
If, on the other hand, only the transactions themselves are to be measured, the easiest way to transfer them is via parameters in the etracker code.
You can find more information about the order parameters here.
E-commerce tracking with etracker analytics for in-depth analysis of purchasing behavior can be implemented in three ways:
- Implementation via plugins.
- Collection via Google Analytics e-commerce parameters.
- Manual integration of etracker e-commerce events.
Please note our troubleshooting tips for deviations in e-commerce tracking.
Implementation via plugins
The special extensions for store systems make implementation particularly easy.
Collection via Google Analytics e-commerce parameters
If you use a different store system and e.g. a plugin for Google Analytics E-Commerce Tracking (GA4 or UA), etracker takes over the measurement by making an addition to the etracker code.
However, this is only possible if the e-commerce parameters are available directly in the HTML code and have not been implemented via the Google Tag Manager. The use of Google Analytics is not required for this. The Google Tag can remain in place or be removed.
Another prerequisite is that the current etracker code is correctly integrated and the data attribute data-ecommerce-grabber=“true“
is added.
The etracker code then looks like this:
<!-- 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-secure-code="XXXXXX" src="//code.etracker.com/code/e.js" async></script>
<!-- etracker tracklet 5.0 end -->
The data-secure-code "xxxxxx"
must be replaced by the personal account key.
The following e-commerce events are covered by etracker:
- Product seen on a list
- View product (detail page)
- Added to shopping cart
- Removed from the shopping cart
- Ordering the product as a lead
If etracker e-commerce events are already recorded via an etracker store plugin or the directly integrated measurement, the function described here should not be used in order to avoid double recording of events.
Manual integration of etracker e-commerce events
The etracker e-commerce API is available for manual integration.
The e-commerce API is a JavaScript interface that is activated when the etracker code is delivered so that the events can be integrated into the code immediately.
The e-commerce events may only be transmitted once the etracker code has been fully loaded.
To avoid timing problems, the e-commerce event should therefore be delayed and the _etrackerOnReady
function should be used to ensure that the etracker code has already been loaded before the e-commerce events are sent:
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProduct', { /* product */ } )
});
Or the following function if several events are to be sent at different points in the code:
<script>
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProduct', { /* product1 */ } )
});
</script>
...
<script>
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProduct', { /* product2 */ } )
});
</script>
Debug mode
The interface is equipped with a debug mode, which is particularly helpful during the installation of the e-commerce API. When the debug mode is activated, error messages, events and the call of the etracker interface are displayed in the JavaScript console of the browser.
The events will not transmitted to etracker while debug mode is activated. The mode can only be switched on once the etracker code has been completely loaded. To be able to read the output, developer tools such as those offered by many browsers today can help.
The Last Visitors basic report is very helpful for checking changes in live operation. Here you can see in real time whether the events are being transferred correctly. If you trigger the events yourself, make sure that the IP block or the individual opt-out does not prevent them from being recorded.
Switch on debug mode via the console
Debug mode can be activated directly in the console with the following commands:
_etracker.tools.enableDebug()
_etracker.tools.enableDebugMode()
A config cookie is set for this session, which contains the respective setting.
When debug mode is active, the events are not transmitted to etracker, but are only displayed in the console.
After a successful test, you must switch off the debug mode again with the following commands:
_etracker.tools.disableDebug()
_etracker.tools.disableDebugMode()
Functions of the e-commerce API
The interface has two basic functions for transmitting information to etracker: sendEvent
and attachEvent
.
sendEvent is the direct call of an e-commerce event defined by the interface, which immediately sends the transferred values.
If the sending is to be linked to a specific JavaScript event – e.g. visitor clicks on in the shopping cart – then the attachEvent function can be used, which attaches the e-commerce event to a desired object on the website.
If the tracking code is integrated at the end of the HTML page or is loaded asynchronously, it is possible to temporarily store events and the attachment of events to HTML objects.
The functions are then executed when the tracking code is fully loaded.
sendEvent – Send event directly
etCommerce.sendEvent(event, parameter_1, [parameter_n])
The function sendEvent
of the object etCommerce
is called up directly in the JavaScript.
The transferred values are transmitted directly to etracker.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
event | string | Only the events defined by the interface are supported. | Name of the event |
parameter_1, [parameter_n] | mixed | See further description |
Parameters in square brackets [ ] are optional parameters.
etCommerce.sendEvent('viewProduct', product) ;
attachEvent – Attach event to object
etCommerce.attachEvent(attachObject, event, parameter_1, [parameter_n])
TheattachEvent
function can be used to attach an eCommerce event to any website object that has an ID.
This is then triggered by the specified JavaScript event.
This means that the eCommerce event is transmitted to etracker as soon as the Add to cart button is clicked.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
attachObject | object | Only existing JavaScript events and object IDs that are determined using getElementById are supported. The structure of the object is as follows: {'Event name' : ['Object ID1', 'Object ID2']} | This object contains the JavaScript event and the IDs of the web page objects to which this event is attached. |
event | string | Only the events defined by the interface are supported (see "Possible events"). | Name of the attached event |
parameter_1, [parameter_n] | mixed | See further description |
Parameters in square brackets [ ] are optional parameters.
etCommerce.attachEvent({'mousedown' : ['viewButton']}, 'viewProduct', product) ;
Possible events
The e-commerce API supports nine different events, which are described below.
viewProduct – View product (detail page)
This event can be sent when the customer is on the product page or an overview page of products. A product should be counted as ‘viewed’ if it can be added to the shopping cart from this page.
Note: This means that if products are added directly to the shopping cart from the category overview page, a ‘Product viewed event’ must also be called up here at the same time as the ‘Product added to shopping cart event’.
The _etrackerOnReady function ensures that the etracker code has already been loaded before the eCommerce event is sent.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
viewProduct | string | Only this name is permitted | Name of the event |
Product object | object | The object must correspond to the product object description (see "The product object") | A product object |
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
function _etrackerOnReady() {
etCommerce.sendEvent('viewProduct', product);
};
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProduct', product)
});
insertToBasket – Product added to shopping cart
This event is sent when the customer adds a product to their shopping cart.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
insertToBasket | string | Only this name is permitted | Name of the event |
Product object | object | The object must correspond to the product object description (see "The product object") | A product object |
Quantity | integer | 0 - 65 535 Negative numbers are not permitted | The number of products added to the shopping cart |
The ‘attachEvent’ function must be used for the transfer with the click. The following example code is therefore required to trigger the event:
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
etCommerce.attachEvent({'mousedown' : ['ButtonZuWarenkorb']},
'insertToBasket', product, 3);
removeFromBasket – Product removed from the basket
This event is sent when the customer removes a product from the shopping cart.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
removeFromBasket | string | Only this name is permitted | Name of the event |
Product object | object | The object must correspond to the product-object description. | A product object |
Quantity | integer | 0 - 65 535 Negative numbers are not permitted | The number of products removed |
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
etCommerce.attachEvent({'mousedown' : ['ButtonAusWarenkorb']},
'removeFromBasket', product, 2);
insertToWatchlist – Product added to watchlist
This event is sent when the customer adds a product to their watch list.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
insertToWatchlist | string | Only this name is permitted | Name of the event |
Product object | object | The object must correspond to the product object description (see "The product object") | A product object |
Quantity | integer | 0 - 65 535 Negative numbers are not permitted | The number of products added to the watch list |
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
etCommerce.attachEvent({'mousedown' : ['ButtonZuMerkliste']},
'insertToWatchlist', product, 3);
removeFromWatchlist – Product removed from watchlist
This event is sent when the customer removes a product from the watch list.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
removeFromWatchlist | string | Only this name is permitted | Name of the event |
Product object | object | The object must correspond to the product object description (see "The product object") | A product object |
Quantity | integer | 0 - 65 535 Negative numbers are not permitted | The number of products removed |
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
etCommerce.attachEvent({'mousedown' : ['ButtonAusMerkliste']},
'removeFromWatchlist', product, 2);
viewProductList – Product seen in list
This event can be sent if the customer is on a product list.
The _etrackerOnReady function ensures that the etracker code has already been loaded before the eCommerce event is sent.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
viewProductList | string | Only this name is permitted | |
Product list object | object | The object must correspond to the product list object description. | A product list object |
Parameters in square brackets [ ] are optional parameters.
var productList = {
listType: 'genericlist',
products: [
{
id: '12345',
name: 'Silber',
price: '0',
currency: 'EUR',
category: ['Strom', 'Privatkunden']
},
{
id: '12346',
name: 'Gold',
price: '0',
currency: 'EUR',
category: ['Strom', 'Privatkunden'],
},
{
id: '12347',
name: 'Platinum',
price: '0',
currency: 'EUR',
category: ['Strom', 'Privatkunden']
}
]
};
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProductList', productList)
});
order – Order
This event transmits the entire order with all order data and the shopping cart (maximum 128 KB). The event is triggered when the confirmation page of a purchase appears.
The _etrackerOnReady function ensures that the etracker code has already been loaded before the eCommerce event is sent.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
order | string | Only this name is allowed | Name of the event |
Order object | object | The object must correspond to the order object description | An order object |
var order = {
orderNumber: 'Bestellnummer 1',
status: 'sale',
orderPrice: '1301.30',
currency: 'EUR',
basket: {
id: 'Warenkorb 1',
products: [
{
product: {
id: '3445',
name: 'Elfrida',
price: '200.20',
currency: 'EUR',
category: ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen']
},
quantity: 2
}
,
{
product: {
id: '3446',
name: 'Berta',
price: '300.30',
currency: 'EUR',
category: ['Tiere', 'Haustiere', 'Kühe', 'Milchkühe']
},
quantity: 3
}
]
},
customerGroup: 'Tierliebhaber',
deliveryConditions: 'Großer Transport',
paymentConditions: 'Sofortzahlung'
};
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('order', order)
});
orderCancellation – Order canceled
This event is sent when the customer cancels the entire order.
Function parameters | Data type | Limitation | Description |
---|---|---|---|
oderCancellation | string | Only this name is permitted | Name of the event |
Order number | string | Maximum 50 characters long, spaces at the beginning and end are removed | The order number of the order to be canceled |
etCommerce.sendEvent('orderCancellation', 'Bestellnummer 1') ;
Event objects
The information on products, shopping baskets and orders is defined in JavaScript objects. A list of these objects and their structure is shown below.
The product object
This object defines a product with the associated attributes.
Name | Attribute | Data type | Limitation | Comment |
---|---|---|---|---|
Product ID | id | string | Maximum 50 characters long, spaces at the beginning and end are removed | The product ID is defined by you and is derived, for example, from your merchandise management system |
Product name | name | string | Maximum 255 characters long, spaces at the beginning and end are removed | The name of the product |
(Nominal) price | price | string | Maximum 20 characters long, decimal separator is a dot. Spaces at the beginning and end are removed | The price of the product |
Currency | currency | string | maximum 3 characters long, spaces at the beginning and end are removed | The currency according to ISO 4217 e.g: EUR or USD |
[Coupon] | coupon | string | Maximum 50 characters long, spaces at the beginning and end are removed | The name of the product coupon |
[Discount] | discount | string | Maximum 20 characters long, decimal separator is a dot. Spaces at the beginning and end are removed | The discount granted. This is deducted from the price of the product in the report. |
[Produkt-Hierarchie] | category | array of strings | A maximum of four-level hierarchies can be mapped.
The array or a category can also be empty. The hierarchies can be 50 characters long, spaces at the beginning and end are removed. | The product hierarchy is stored in an array, e.g: ['Monitors', '', 'Flat screens', 'LED'] |
Variants | variants | object with key/value pairs | The object can be empty. The variants can be 50 characters long, spaces at the beginning and end are removed. Maximum 5 variants. If the keys are not explicitly named 'var1' - 'var5', the assignment to the product variant attributes is made according to the alphabetical sorting of the keys. | To transfer different variants of a product. e.g: {'var1': 'yellow', 'var2': 'XL'} {'size': 'XL', 'color': 'yellow'} corresponds after sorting the keys then {'var1': 'yellow', 'var2': 'XL'} |
Attributes in square brackets [ ] are optional attributes.
The ‘sendEvent’ function must be used on a product page to transfer the ‘viewProduct’ event. The following sample code is therefore required to trigger the event:
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'OLED', '47', 'Special'],
variants: {'var1': 'matt'}
};
The product list object
In a viewProductList event, the product list is transferred with this object.
Name | Attribute | Data type | Limitation | Comment |
---|---|---|---|---|
List type | listType | enum | Only the values 'categorylist', 'searchlist' and 'genericlist' are permitted | The default is genericlist if no value or an invalid value is passed |
Product objects | products | array of objects | The entries in the array must correspond to the product object description | The various product objects are stored in this array. The position in the array corresponds to the position in the product list. |
The shopping cart object
When an order is placed, the products ordered are stored in a shopping cart object.
Name | Attribute | Data type | Limitation | Comment |
---|---|---|---|---|
Shopping cart ID | id | string | Maximum 50 characters long, spaces at the beginning and end are removed | The shopping cart ID is defined by you |
Product objects | products | array of objects | The array must correspond to the product array description | The various product objects and the quantity ordered are stored in this array |
The products array object
The product array object contains one or more objects, which in turn consist of product objects and the respective number.
Name | Attribute | Data type | Limitation | Comment |
---|---|---|---|---|
Product | product | object | The object must correspond to the product-object description. | The product object |
Quantity | quantity | integer | 0 - 65 535 Negative numbers are not permitted | The ordered/cancelled quantity |
The order object
The order object contains all order data and the shopping cart object.
Name | Attribute | Data type | Limitation | Comment |
---|---|---|---|---|
Order number | orderNumber | string | Maximum 50 characters long, spaces at the beginning and end are removed | The unique order number you have specified. This will be used for subsequent cancelations. Order numbers that cannot be clearly assigned to an order falsify the data. |
Status | status | enum | Contains lead or sale | Indicates whether it is an order or a purchase. |
Order value | orderPrice | string | Maximum 20 characters long, decimal separator is a dot. Spaces at the beginning and end are removed | The total value of the order. If possible, it should be the sum of the shopping cart value and shipping costs. Discounts, vouchers or special costs due to payment method or similar should be recorded as a product object. |
Currency | currency | string | Maximum 3 characters long, spaces at the beginning and end are removed | The currency of the order according to ISO 4217 e.g: EUR or USD |
Shopping cart | basket | object | The object must correspond to the shopping cart object description | The shopping cart object |
[Coupon] | coupon | string | Maximum 50 characters long, spaces at the beginning and end are removed | The name of the order coupon |
[Kundengruppe] | customerGroup | string | Maximum 50 characters long, spaces at the beginning and end are removed | z. B.: - New customer - Regular customer - Frequent shopper - VIP |
[Lieferbedingungen] | deliveryConditions | string | Maximum 255 characters long, spaces at the beginning and end are removed | z. B.: - Delivery to kerbside - Installation on site - Delivery to Packstation/parcel shop/branch |
[Zahlungsbedingungen] | paymentConditions | paymentConditions | Maximum 255 characters long, spaces at the beginning and end are removed | z. B.: - Special payment terms - Cash discount - Payment in installments |
Parameters in square brackets [ ] are optional parameters.
Application examples
The application examples illustrate how the various events for selected actions on the website can be sent to etracker.
View product page
When a product page is called up, the product information should be transmitted to etracker immediately.
A product object is defined for this purpose.
The data is transmitted directly via the sendEvent
function. The _etrackerOnReady function ensures that the etracker code has already been loaded before the eCommerce event is sent.
var product =
{
id : '3445',
name : 'TV 47 Zoll Special Angebot',
category : ['TV', 'LCD', '47', 'Special'],
price : '1723.60',
currency : 'EUR'
};
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('viewProduct', product)
});
Product added to shopping cart
To record products that are added to the shopping cart (by clicking on an add to cart button), an event must be defined that is attached to the existing button.
A product object containing the product data must first be defined.
In this case, the ID of the button is ButtonAddToBasket
and the data is transferred when the JavaScript event mousedown
is triggered.
The number of products entered results from a form field stored on the website ProductQuantity
.
var 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', product, et_Commerce_quantity);
Remove product from shopping cart
To transmit the information that the customer has removed a product from the shopping cart, the event removeFromBasket
must be called up.
The data is transmitted via the sendEvent
function is transmitted directly.
var product =
{
id : '3445',
name : 'TV 47 Zoll Special Angebot',
category : ['TV', 'LCD', '47', 'Special'],
price : '1723.60',
currency : 'EUR'
};
etCommerce.sendEvent('removeFromBasket', et_Commerce_product, 1);
Send an order on click
To report an order directly to etracker when the order button is clicked, an order event is required, which is attached to the sendOrder button. The data is transmitted directly via the sendEvent function.
var basket =
{
id : '3',
products : [
{
product:
{
id : '3445',
name : 'Elfrida',
category : ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen'],
price : '1723.60',
currency : 'EUR'
},
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);
Enter shipping costs as a product
It is also possible to record shipping costs as a separate product.
var order = {
orderNumber: 'Bestellnummer 1',
status: 'sale',
orderPrice: '1301.30',
currency: 'EUR',
basket: {
id: 'Warenkorb 1',
products: [
{
product: {
id: '3445',
name: 'Elfrida',
price: '200.20',
currency: 'EUR',
category: ['Tiere', 'Großwild', 'Giraffen', 'Liebe Giraffen']
},
quantity: 2
}
,
{
product: {
id: '3446',
name: 'Berta',
price: '300.30',
currency: 'EUR',
category: ['Tiere', 'Haustiere', 'Kühe', 'Milchkühe']
},
quantity: 3
}
,
{
product: {
id: 'Versandkosten',
name: 'Versankosten',
category: ['Versandkosten', '', '', ''],
price: '4.99',
currency: 'EUR'
},
quantity: 1
}
]
},
customerGroup: 'Tierliebhaber',
deliveryConditions: 'Großer Transport',
paymentConditions: 'Sofortzahlung'
};
window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
etCommerce.sendEvent('order', order)
});