Suivi du commerce électronique

L’enregistrement des événements e-commerce permet de retracer le parcours complet de l’utilisateur dans une boutique en ligne et de le décomposer en catégories et en articles. Outre les données de transaction lors de la finalisation de la commande, les interactions qui ont lieu avant l’achat font également partie des événements e-commerce :

• Vues de la liste des produits
• Appels de détails de produits
• Actions de la liste de suivi
• Actions sur le panier d’achat
• commandes jusqu’à la conversion en achats ou l’annulation de commandes.

Si, en revanche, seules les transactions elles-mêmes doivent être mesurées, le plus simple est de les transmettre au moyen de paramètres dans le code etracker.
Pour en savoir plus sur les paramètres de commande, cliquez ici.

Le suivi du commerce électronique avec etracker analytics pour une analyse approfondie du comportement d’achat peut être mis en œuvre de trois manières :

1. Mise en œuvre via des plugins.
2. Collecte via les paramètres de commerce électronique de Google Analytics.
3. Intégration manuelle des événements e-commerce etracker.

Mise en œuvre via des plug-ins

Les extensions spéciales pour les systèmes de boutique rendent la mise en œuvre particulièrement facile.

Collecte via les paramètres e-commerce de Google Analytics

Si vous utilisez un autre système de boutique et que vous utilisez par exemple un plugin pour le suivi du commerce électronique Google Analytics (GA4 ou UA), etracker se charge de la mesure en effectuant un complément dans le code etracker.

L’utilisation de Google Analytics n’est pas nécessaire pour cela. Le tag Google peut rester présent ou être supprimé.

Une autre condition préalable est que le code etracker actuel soit correctement intégré et complété par l’attribut Data data-ecommerce-grabber="Modus" soit complété.

Les modes suivants sont disponibles pour la mesure :

• data-ecommerce-grabber=”{enabled:true,viewInList:true|false}”

Le paramètre “true” ou “false” permet de déterminer si les vues de produits dans les listes doivent également être mesurées (attention : les vues de produits dans les listes génèrent des hits supplémentaires).

Le code etracker se présente alors comme suit :

<!-- 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="{enabled: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 -->

Le site data-secure-code "xxxxxx" doit être remplacé par la clé de compte personnelle.

Les événements e-commerce suivants sont pris en charge par etracker :

• Produit vu sur une liste
• Produit(page de détails) consulté
• Ajouté au panier
• Retiré du panier
• Commande du produit en tant que lead

Les autres événements e-commerce envoyés à Google Analytics ne peuvent pas être collectés à l’aide du grabber e-commerce.

Intégration manuelle des événements e-commerce etracker

L’API etracker E-Commerce est disponible pour l’intégration manuelle.

L’API e-commerce est une interface JavaScript qui est activée dès la livraison du code etracker, ce qui permet d’intégrer immédiatement les événements dans le code.

window._etrackerOnReady = typeof window._etrackerOnReady === 'undefined' ? [] : window._etrackerOnReady;
window._etrackerOnReady.push(function() {
  etCommerce.sendEvent('viewProduct', { /* product */ } )
});

Ou la fonction suivante, si plusieurs événements doivent être envoyés à différents endroits du 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>

Mode de débogage

L’interface est dotée d’un mode de débogage qui est particulièrement utile pendant l’installation de l’API e-commerce. Lorsque le mode de débogage est activé, les messages d’erreur, les événements et l’appel de l’interface etracker sont affichés dans la console JavaScript du navigateur.

Le rapport de base Derniers visiteurs est très utile pour vérifier les modifications en cours d’exécution. Il permet de voir en temps réel si les événements sont correctement transmis. Si l’on déclenche soi-même les événements, il faut veiller à ce que le blocage d’IP ou l’opt-out individuel n’empêche pas la collecte.

Activer le mode de débogage à partir de la console

Le mode de débogage peut être activé directement dans la console à l’aide des commandes suivantes :

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

Un cookie de configuration est créé pour cette session, qui contient le paramètre en question.

Une fois le test réussi, vous devez désactiver le mode de débogage à l’aide des commandes suivantes :

_etracker.tools.disableDebug()
_etracker.tools.disableDebugMode()

Fonctionnalités de l’API e-commerce

L’interface dispose de deux fonctions de base pour transmettre des informations à etracker : sendEvent et attachEvent. sendEvent est l’appel direct d’un événement e-commerce défini par l’interface, qui envoie immédiatement les valeurs transmises. Si l’envoi doit être lié à un événement JavaScript spécifique – par exemple, le visiteur clique sur dans le panier – alors la fonction attachEvent peut être utilisée pour attacher l’événement e-commerce à un objet souhaité de la page web. Si le code de suivi est intégré à la fin de la page HTML ou est chargé de manière asynchrone, il est possible de mettre en cache les événements et l’attachement d’événements à des objets HTML. Ces fonctions sont exécutées lorsque le code de suivi est complètement chargé.

sendEvent – Envoyer l’événement directement

etCommerce.sendEvent(event, parameter_1, [parameter_n])

La fonction sendEvent de l’objet etCommerce est appelé directement dans JavaScript. Les valeurs transmises sont alors directement transmises à etracker.

etCommerce.sendEvent('viewProduct', product) ;

attachEvent – Attacher un événement à un objet

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

La fonctionattachEventpermet d’attacher un événement eCommerce à tout objet de page Web possédant un identifiant. Celui-ci est alors déclenché par l’événement JavaScript spécifié. Ainsi, le fait de cliquer sur le bouton Ajouter au panier transmet directement l’événement eCommerce à etracker.

etCommerce.attachEvent({'mousedown' : ['viewButton']}, 'viewProduct', product) ;

Événements possibles

L’API e-commerce prend en charge neuf événements différents, décrits ci-dessous.

viewProduct – Produit vu (page de détails)

Cet événement peut être envoyé lorsque le client se trouve sur la page du produit ou sur une page de présentation des produits. Un produit doit être considéré comme ‘vu’ s’il est possible de l’ajouter au panier depuis cette page.

Remarque : Cela signifie que si les produits sont placés directement dans le panier depuis la page de résumé de la catégorie, un événement ‘Produit vu’ doit être appelé ici en même temps que l’événement ‘Produit ajouté au panier’.

La fonction _etrackerOnReady permet de s’assurer que le code etracker a déjà été chargé avant l’envoi de l’événement eCommerce.

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 – Produit ajouté au panier

Cet événement est envoyé lorsque le client ajoute un produit à son panier.

Pour le transfert avec le clic, il faut utiliser la fonction ‘attachEvent’. Par conséquent, l’exemple de code suivant est nécessaire pour déclencher l’événement :

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 – Produit supprimé du panier d’achat

Cet événement est envoyé lorsque le client retire un produit du panier.

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 – Produit ajouté à la liste de suivi

Cet événement est envoyé lorsque le client ajoute un produit à sa liste de souhaits.

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 – Produit supprimé de la liste de suivi

Cet événement est envoyé lorsque le client supprime un produit de la liste de suivi.

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 – produit vu dans la liste

Cet événement peut être envoyé lorsque le client se trouve sur une liste de produits.

La fonction _etrackerOnReady permet de s’assurer que le code etracker a déjà été chargé avant l’envoi de l’événement eCommerce.

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 – Commande

Cet événement transmet la commande complète avec toutes les données de la commande et le panier (128 Ko maximum). L’événement est déclenché lorsque la page de confirmation d’un achat apparaît.

La fonction _etrackerOnReady permet de s’assurer que le code etracker a déjà été chargé avant l’envoi de l’événement eCommerce.

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 – Commande annulée

Cet événement est envoyé lorsque le client annule la totalité de la commande.

etCommerce.sendEvent('orderCancellation', 'Bestellnummer 1') ;

Objets d’événement

Les informations sur les produits, les paniers et les commandes sont définies dans des objets JavaScript. La liste de ces objets et leur structure sont présentées ci-dessous.

L’objet produit

Cet objet définit un produit et ses attributs.

Pour transmettre l’événement ‘viewProduct’, la fonction ‘sendEvent’ doit être utilisée sur une page produit. Par conséquent, l’exemple de code suivant est nécessaire pour déclencher l’événement :

var product = {
  id: '3445',
  name: 'TV 47 Zoll Special Angebot', 
  price: '1723.60',
  currency: 'EUR',
  category: ['TV', 'OLED', '47', 'Special'],
  variants: {'var1': 'matt'}
};

L’objet Liste de produits

Lors d’un événement viewProductList, la liste des produits est transmise avec cet objet.

L’objet du panier

Lors d’une commande, les produits commandés sont placés dans un objet de type panier.

L’objet tableau de produits

L’objet tableau de produits contient un ou plusieurs objets, eux-mêmes composés d’objets produits et de leur nombre respectif.

L’objet de commande

L’objet Commande contient toutes les données de la commande et l’objet Panier.

Exemples d’applications

Les exemples d’application illustrent la manière dont les différents événements peuvent être envoyés à etracker pour des actions sélectionnées sur le site Web.

Voir la page produit

Lors de l’appel d’une page de produit, les informations sur le produit doivent être immédiatement transmises à etracker. Un objet produit est défini à cet effet. Les données sont transmises directement via la fonction sendEvent. La fonction _etrackerOnReady permet de s’assurer que le code etracker a déjà été chargé avant l’envoi de l’événement eCommerce.

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

Produit ajouté au panier

Pour saisir des produits qui sont ajoutés au panier (en cliquant sur un bouton Ajouter au panier), il faut définir un événement qui s’attache au bouton existant. Au préalable, il faut définir un objet produit qui contiendra les données du produit. Dans ce cas, l’ID du bouton est ButtonAddToBasket et la transmission des données a lieu lorsque l’événement JavaScript mousedown est déclenché. Le nombre de produits saisis résulte d’un champ de formulaire déposé sur la page Web 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);

Supprimer le produit du panier

Pour transmettre l’information selon laquelle le client a retiré un produit du panier, l’événement removeFromBasket doit être appelé. Les données sont transmises via sendEvent fonction directement transmise.

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

Envoyer une commande en cliquant

Pour signaler une commande directement à etracker lorsque vous cliquez sur le bouton de commande, vous avez besoin d’un événement order, qui est ajouté au bouton sendOrder. Les données sont transmises directement via la fonction sendEvent.

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

Saisir les frais de port en tant que produit

Il est également possible de saisir les frais de port comme un produit distinct.

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