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 is to transfer them using 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. If 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 to transmit 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.
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.
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 considered ‘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.
var product = {
id: '3445',
name: 'TV 47 Zoll Special Angebot',
price: '1723.60',
currency: 'EUR',
category: ['TV', 'LCD', '47', 'Special']
};
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.
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.
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.
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.
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.
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.
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.
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.
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.
The shopping cart object
When an order is placed, the products ordered are stored in a shopping cart object.
The products array object
The product array object contains one or more objects, which in turn consist of product objects and the respective number.
The order object
The order object contains all order data and the shopping cart object.
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)
});