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:

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

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

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.

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

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.

etCommerce.sendEvent('viewProduct', product) ;

attachEvent – Attach event to object

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.

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.

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.

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.

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.

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.

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