Skip to content

E-Commerce Tracking

Content
Implementation via plugins Collection via Google Analytics e-commerce parameters Manual integration of etracker e-commerce events Debug mode Functions of the e-commerce API sendEvent - Send event directly attachEvent - Attach event to object Possible events Event objects Application examples

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:

  1. Implementation via plugins.
  2. Collection via Google Analytics e-commerce parameters.
  3. Manual integration of etracker e-commerce events.
Attention

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:

javascript
<!-- 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
Important

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.

Attention

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:

javascript
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:

javascript
<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.

Attention

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:

javascript
_etracker.tools.enableDebug()
_etracker.tools.enableDebugMode()

A config cookie is set for this session, which contains the respective setting.

Note

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:

javascript
_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

javascript
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 parametersData typeLimitationDescription
eventstringOnly the events defined by the interface are supported.Name of the event
parameter_1, [parameter_n]mixedSee further description
Note

Parameters in square brackets [ ] are optional parameters.

Example direct call javascript
etCommerce.sendEvent('viewProduct', product) ;

attachEvent – Attach event to object

javascript
etCommerce.attachEvent(attachObject, event, parameter_1, [parameter_n])

TheattachEventfunction 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 parametersData typeLimitationDescription
attachObjectobjectOnly 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.
eventstringOnly the events defined by the interface are supported (see "Possible events").Name of the attached event
parameter_1, [parameter_n]mixedSee further description
Note

Parameters in square brackets [ ] are optional parameters.

Example of linking the e-commerce event with a JavaScript event javascript
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 parametersData typeLimitationDescription
viewProductstringOnly this name is permittedName of the event
Product objectobjectThe object must correspond to the product object description (see "The product object")A product object
Example definition of the product object javascript
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 parametersData typeLimitationDescription
insertToBasketstringOnly this name is permittedName of the event
Product objectobjectThe object must correspond to the product object description
(see "The product object")
A product object
Quantityinteger0 - 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:

Example definition of the product object javascript
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 parametersData typeLimitationDescription
removeFromBasketstringOnly this name is permittedName of the event
Product objectobjectThe object must correspond to the product-object description.A product object
Quantityinteger0 - 65 535
Negative numbers are not permitted
The number of products removed

Example definition of the product object javascript
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 parametersData typeLimitationDescription
insertToWatchliststringOnly this name is permittedName of the event
Product objectobjectThe object must correspond to the product object description
(see "The product object")
A product object
Quantityinteger0 - 65 535
Negative numbers are not permitted

The number of products added to the watch list

Example definition of the product object javascript
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 parametersData typeLimitationDescription
removeFromWatchliststringOnly this name is permittedName of the event
Product objectobjectThe object must correspond to the product object description (see "The product object")A product object
Quantityinteger0 - 65 535
Negative numbers are not permitted
The number of products removed

Example definition of the product object
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 parametersData typeLimitationDescription
viewProductListstringOnly this name is permitted
Product list objectobjectThe object must correspond to the product list object description.A product list object
Note

Parameters in square brackets [ ] are optional parameters.

Example Definition of the product list object javascript
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 parametersData typeLimitationDescription
orderstringOnly this name is allowedName of the event
Order objectobjectThe object must correspond to the order object descriptionAn order object

Example definition of the order object javascript
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 parametersData typeLimitationDescription
oderCancellationstringOnly this name is permittedName of the event
Order numberstringMaximum 50 characters long, spaces at the beginning and end are removedThe order number of the order to be canceled
Example javascript
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.

NameAttributeData typeLimitationComment
Product IDidstringMaximum 50 characters long, spaces at the beginning and end are removedThe product ID is defined by you and is derived, for example, from your merchandise management system
Product namenamestringMaximum 255 characters long, spaces at the beginning and end are removedThe name of the product
(Nominal) pricepricestringMaximum 20 characters long,
decimal separator is a dot. Spaces at the beginning and end are removed
The price of the product
Currencycurrencystringmaximum 3 characters long,
spaces at the beginning and end are removed
The currency according to ISO 4217
e.g: EUR or USD
[Coupon]couponstringMaximum 50 characters long,
spaces at the beginning and end are removed
The name of the product coupon
[Discount]discountstringMaximum 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]categoryarray of stringsA 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']
Variantsvariantsobject with key/value pairsThe 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'}
Note

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:

Example javascript
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.

NameAttributeData typeLimitationComment
List type listTypeenumOnly the values 'categorylist', 'searchlist' and 'genericlist' are permittedThe default is genericlist if no value or an invalid value is passed
Product objectsproductsarray of objectsThe entries in the array must correspond to the product object descriptionThe 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.

NameAttributeData typeLimitationComment
Shopping cart IDidstringMaximum 50 characters long, spaces at the beginning and end are removedThe shopping cart ID is defined by you
Product objectsproductsarray of objectsThe array must correspond to the product array descriptionThe 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.

NameAttributeData typeLimitationComment
ProductproductobjectThe object must correspond to the product-object description.The product object
Quantityquantityinteger0 - 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.

NameAttributeData typeLimitationComment
Order numberorderNumberstringMaximum 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.
StatusstatusenumContains lead or saleIndicates whether it is an order or a purchase.
Order valueorderPricestringMaximum 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.
CurrencycurrencystringMaximum 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 cartbasketobjectThe object must correspond to the shopping cart object descriptionThe shopping cart object
[Coupon]couponstringMaximum 50 characters long,
spaces at the beginning and end are removed
The name of the order coupon
[Kundengruppe]customerGroupstringMaximum 50 characters long,
spaces at the beginning and end are removed
z. B.:
- New customer
- Regular customer
- Frequent shopper
- VIP
[Lieferbedingungen]deliveryConditionsstringMaximum 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]paymentConditionspaymentConditionsMaximum 255 characters long,
spaces at the beginning and end are removed
z. B.:
- Special payment terms
- Cash discount
- Payment in installments
Note

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.

Example javascript
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.

Example javascript
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.

Example javascript
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.

Example javascript
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.

Example javascript
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)
});