Mesure de l'e-commerce

Ce guide explique comment collecter des données d'e-commerce à l'aide d'analytics.js.

Présentation

La mesure de l'e-commerce vous permet de mesurer le nombre de transactions et les revenus générés par votre site Web. Sur un site d'e-commerce classique, lorsqu'un utilisateur clique sur le bouton "Acheter" du navigateur, ses informations d'achat sont envoyées au serveur Web, qui effectue la transaction. Si l'opération réussit, le serveur redirige l'utilisateur vers une page de remerciement ou de reçu contenant les détails de la transaction et un reçu d'achat. Vous pouvez utiliser la bibliothèque analytics.js pour envoyer les données d'e-commerce de la page de remerciement à Google Analytics.

Vous pouvez envoyer deux types de données d'e-commerce à l'aide d'analytics.js: les données de transaction et les données d'article.

Données de transaction

Une transaction représente l'intégralité de la transaction qui a lieu sur votre site. Elle contient les valeurs suivantes:

Clé Type de valeur Obligatoire Description
id text Yes ID de la transaction. (exemple : 1234)
affiliation text Non Magasin ou affiliation à l'origine de la transaction (par exemple, Acme Clothing).
revenue currency Non Spécifie le revenu total ou le total associé à la transaction (par ex. 11,99). Cette valeur peut inclure les frais de port, les frais fiscaux ou d'autres ajustements aux revenus totaux que vous souhaitez inclure dans votre calcul de revenus.
shipping currency Non Spécifie les frais de port totaux de la transaction. (exemple : 5)
tax currency Non Indique le montant total des taxes de la transaction. (ex. : 1,29)

Données sur les articles

Un article représente les produits individuels qui se trouvaient dans le panier. Il contient les valeurs suivantes:

Clé Type de valeur Obligatoire Description
id text Yes ID de la transaction. Cet ID permet d'associer les articles aux transactions auxquelles ils appartiennent. (exemple : 1234)
name text Yes Nom de l'élément. (par exemple, lapins roses en peluche)
sku text Non Indique le SKU ou le code de l'article. (ex. : SKU47)
category text Non Catégorie à laquelle l'article appartient (par exemple, "jouets de fête")
price currency Non Le prix unitaire et individuel de chaque article. (ex. : 11,99)
quantity integer Non Nombre d'unités achetées lors de la transaction. Si ce champ transmet une valeur non entière (par exemple, 1,5), elle est arrondie à l'entier le plus proche.

Implémentation

Vous implémentez généralement la mesure de l'e-commerce une fois que l'utilisateur a terminé le processus de paiement. Cela se produit généralement sur la page de remerciement. Une fois que vous disposez des données d'e-commerce et que vous êtes prêt à les envoyer à Google Analytics, vous devez suivre quelques étapes:

Charger le plug-in d'e-commerce

Pour réduire la taille de la bibliothèque analytics.js, la mesure de l'e-commerce n'est pas fournie dans la bibliothèque par défaut. Au lieu de cela, il est fourni en tant que module de plug-in qui doit être chargé avant d'être utilisé.

Pour charger le plug-in d'e-commerce, utilisez la commande suivante:

ga('require', 'ecommerce');

Cette commande doit être exécutée après la création de votre objet de suivi et avant l'utilisation d'une fonctionnalité spécifique à l'e-commerce.

Une fois chargées, deux nouvelles commandes spécifiques à la mesure de l'e-commerce seront ajoutées à l'outil de suivi par défaut.

Ajouter une transaction

Une fois le plug-in chargé, il crée un objet panier transparent. Vous pouvez ajouter les données de transaction et d'article au panier. Une fois la configuration terminée, vous envoyez toutes les données en une seule fois.

Pour ajouter des données de transaction au panier, utilisez la commande ecommerce:addTransaction:

ga('ecommerce:addTransaction', {
  'id': '1234',                     // Transaction ID. Required.
  'affiliation': 'Acme Clothing',   // Affiliation or store name.
  'revenue': '11.99',               // Grand Total.
  'shipping': '5',                  // Shipping.
  'tax': '1.29'                     // Tax.
});

Ajout d'éléments

Ensuite, pour ajouter des articles au panier, utilisez la commande ecommerce:addItem:

ga('ecommerce:addItem', {
  'id': '1234',                     // Transaction ID. Required.
  'name': 'Fluffy Pink Bunnies',    // Product name. Required.
  'sku': 'DD23444',                 // SKU/code.
  'category': 'Party Toys',         // Category or variation.
  'price': '11.99',                 // Unit price.
  'quantity': '1'                   // Quantity.
});

Envoi de données en cours…

Enfin, une fois que vous avez configuré toutes vos données d'e-commerce dans le panier, vous les envoyez à Google Analytics à l'aide de la commande ecommerce:send:

ga('ecommerce:send');

Cette commande traite chaque transaction et chaque article du panier, puis envoie les données correspondantes à Google Analytics. Une fois l'opération terminée, le panier est effacé et prêt à envoyer des données pour une nouvelle transaction. Si une commande ecommerce:send précédente a été émise, seules les nouvelles données de transaction et d'article seront envoyées.

Effacement des données

Si vous devez effacer manuellement toutes les transactions et tous les articles dans le panier, utilisez la commande suivante:

ga('ecommerce:clear');

Spécifier des devises locales

Par défaut, vous pouvez configurer une devise commune et globale pour l'ensemble des transactions et articles via l'interface Web de gestion de Google Analytics. Par défaut, la devise globale est utilisée pour tous les articles et transactions. Pour les sites Web qui effectuent des transactions dans plusieurs devises, le plug-in d'e-commerce vous permet de spécifier la devise locale de la transaction ainsi que des produits individuels.

La devise locale doit être spécifiée dans la norme ISO 4217. Consultez la documentation de référence sur les codes de devise pour obtenir la liste complète des devises de conversion acceptées.

Pour définir la devise locale d'une transaction donnée et de tous ses éléments, il vous suffit de spécifier la devise de la transaction:

ga('ecommerce:addTransaction', {
  'id': '1234',
  'affiliation': 'Acme Clothing',
  'revenue': '11.99',
  'shipping': '5',
  'tax': '1.29',
  'currency': 'EUR'  // local currency code.
});

Enfin, vous pouvez également spécifier la devise par élément:

  ga('ecommerce:addItem', {
    'id': '1234',
    'name': 'Fluffy Pink Bunnies',
    'sku': 'DD23444',
    'category': 'Party Toys',
    'price': '11.99',
    'quantity': '1',
    'currency': 'GBP' // local currency code.
  });

Compatibilité avec plusieurs coachs électroniques

Vous pouvez également utiliser le plug-in d'e-commerce si vous avez implémenté plusieurs outils de suivi (nommés) sur votre page. Le plug-in fonctionne exactement de la même manière que l'outil de suivi par défaut, à la différence que le format est le suivant : trackerName.pluginName:method. Par exemple, si vous avez créé un outil de suivi nommé myTracker:

ga('create', 'UA-XXXXX-Y', 'auto', {'name': 'myTracker'});

Chargez ensuite le plug-in d'e-commerce associé à ce traceur à l'aide de la commande suivante:

ga('myTracker.require', 'ecommerce');

Pour envoyer une transaction, vous pouvez créer un objet de transaction et le transmettre à l'outil de suivi nommé comme suit:

var transaction = {
  'id': '1234',                    // Transaction ID.
  'affiliation': 'Acme Clothing',  // Affiliation or store name.
  'revenue': '11.99',              // Grand Total.
  'shipping': '5' ,                // Shipping.
  'tax': '1.29'                    // Tax.
};

ga('myTracker.ecommerce:addTransaction', transaction);

Grâce à cette syntaxe, l'objet de transaction peut être utilisé sur plusieurs dispositifs de suivi.

Enfin, envoyez les données de transaction comme suit:

ga('myTracker.ecommerce:send');

Exemple

La plupart des sites d'e-commerce effectuent des transactions sur le serveur, tandis que la bibliothèque analytics.js envoie les données à Google Analytics à partir du navigateur. Une certaine coordination est donc nécessaire entre le serveur et le client pour envoyer correctement les données d'e-commerce à Google Analytics.

La plupart des sites d'e-commerce affichent leur page de remerciement à l'aide d'un moteur de création de modèles côté serveur. Dans ce cas, vous devez ajouter le code de mesure de l'e-commerce au modèle côté serveur et utiliser la logique du serveur pour écrire dynamiquement les valeurs des données d'e-commerce sur la page finale. Voici un exemple de ce à quoi cela ressemblerait en PHP.

En PHP, vous disposez généralement d'une représentation des données d'e-commerce. Dans cet exemple, les données sont stockées dans un tableau associatif:

<?php
// Transaction Data
$trans = array('id'=>'1234', 'affiliation'=>'Acme Clothing',
               'revenue'=>'11.99', 'shipping'=>'5', 'tax'=>'1.29');

// List of Items Purchased.
$items = array(
  array('sku'=>'SDFSDF', 'name'=>'Shoes', 'category'=>'Footwear', 'price'=>'100', 'quantity'=>'1'),
  array('sku'=>'123DSW', 'name'=>'Sandals', 'category'=>'Footwear', 'price'=>'87', 'quantity'=>'1'),
  array('sku'=>'UHDF93', 'name'=>'Socks', 'category'=>'Footwear', 'price'=>'5.99', 'quantity'=>'2')
);
?>

La première étape consiste à écrire une logique pour transformer les données d'e-commerce en la chaîne JavaScript requise par analytics.js:

<?php
// Function to return the JavaScript representation of a TransactionData object.
function getTransactionJs(&$trans) {
  return <<<HTML
ga('ecommerce:addTransaction', {
  'id': '{$trans['id']}',
  'affiliation': '{$trans['affiliation']}',
  'revenue': '{$trans['revenue']}',
  'shipping': '{$trans['shipping']}',
  'tax': '{$trans['tax']}'
});
HTML;
}

// Function to return the JavaScript representation of an ItemData object.
function getItemJs(&$transId, &$item) {
  return <<<HTML
ga('ecommerce:addItem', {
  'id': '$transId',
  'name': '{$item['name']}',
  'sku': '{$item['sku']}',
  'category': '{$item['category']}',
  'price': '{$item['price']}',
  'quantity': '{$item['quantity']}'
});
HTML;
}
?>

Ensuite, dans la balise <script>, ajoutez la logique PHP supplémentaire pour générer dynamiquement les données de la transaction et de l'article:

<!-- Begin HTML -->
<script>
ga('require', 'ecommerce');

<?php
echo getTransactionJs($trans);

foreach ($items as &$item) {
  echo getItemJs($trans['id'], $item);
}
?>

ga('ecommerce:send');
</script>

Une fois l'exécution du script PHP terminée, les données de transaction et d'article requises par analytics.js sont imprimées sur la page. Une fois le code JavaScript affiché sur la page dans le navigateur, toutes les données d'e-commerce seront envoyées à Google Analytics.

Types de devise

Le type de devise par défaut peut être configuré par le biais de l'interface de gestion. Lorsque vous envoyez des valeurs monétaires à l'aide d'analytics.js, la valeur représente la valeur totale d'une devise.

Un point décimal peut être utilisé comme délimiteur entre les parties entières et fractionnaires de la devise. La précision est de six décimales. L'exemple suivant est valide pour un champ de devise:

1000.000001

Une fois la valeur envoyée à Google Analytics, tout le texte est supprimé jusqu'au premier chiffre, au caractère - ou au caractère . (décimal). Comme suit :

$-55.00

deviendra:

-55.00