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 internaute clique sur le bouton d'achat dans le navigateur, les informations concernant l'achat sont envoyées au serveur Web, qui effectue alors la transaction. Si l'opération réussit, le serveur redirige l'utilisateur vers une page de remerciement ou de confirmation contenant les détails de la transaction et le reçu de l'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 sur votre site et contient les valeurs suivantes:

Clé Type de valeur Obligatoire Description
id text Oui ID de la transaction. (ex. : 1234)
affiliation text Non Magasin ou affiliation à l'origine de la transaction (par exemple, Vêtements Acme).
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 taxes ou d'autres ajustements au revenu total que vous souhaitez inclure dans vos calculs de revenus.
shipping currency Non Spécifie les frais de port totaux de la transaction. (ex. : 5)
tax currency Non Indique la taxe totale de la transaction. (ex. : 1,29)

Données sur les articles

Un article représente les produits individuels contenus dans le panier et contient les valeurs suivantes:

Clé Type de valeur Obligatoire Description
id text Oui ID de la transaction. Cet ID permet d'associer des articles aux transactions auxquelles ils appartiennent. (ex. : 1234)
name text Oui Nom de l'article. (Par exemple, lapins roses en peluche)
sku text Non Indique le code SKU ou d'article. (Code SKU77, par exemple)
category text Non Catégorie à laquelle l'article appartient (jouets de fête, par exemple)
price currency Non L'unité, le prix et le prix de chaque article. (ex. : 11,99)
quantity integer Non Nombre d'unités achetées dans la transaction. Si une valeur non entière est transmise dans ce champ (par exemple, 1.5), elle sera arrondie à la valeur entière la plus proche.

Implémentation

Vous mettez généralement en œuvre la mesure de l'e-commerce une fois que l'utilisateur a terminé le processus de règlement. Cela se produit généralement sur la page de remerciement. Une fois que vous êtes prêt à envoyer des données d'e-commerce à Google Analytics, vous devez suivre plusieurs é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 d'utiliser une fonctionnalité spécifique à l'e-commerce.

Une fois le chargement terminé, 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 de panier d'achat transparent. Vous pouvez ajouter des données de transaction et d'article au panier, puis les envoyer toutes à la fois.

Vous pouvez ajouter des données de transaction au panier à l'aide de 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 les données d'e-commerce dans le panier, vous pouvez envoyer les données à Google Analytics à l'aide de la commande ecommerce:send:

ga('ecommerce:send');

Cette commande passe en revue chaque transaction et article du panier et envoie les données correspondantes à Google Analytics. Une fois la transaction terminée, le panier est effacé et prêt à envoyer les données d'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 le panier de toutes les transactions et articles, utilisez la commande suivante:

ga('ecommerce:clear');

Spécifier des devises locales

Par défaut, vous pouvez configurer une devise mondiale commune pour toutes les transactions et tous les 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 selon 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 spécifique 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 spécifier la devise par article:

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

Plusieurs coachs électroniques

Vous pouvez également utiliser le plug-in d'e-commerce si vous avez intégré 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, sauf 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'});

Vous chargeriez ensuite le plug-in d'e-commerce pour cet outil de suivi nommé en utilisant:

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

Pour envoyer une transaction, vous pouvez créer un objet de transaction et le transmettre au coach électronique 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);

Avec cette syntaxe, l'objet de transaction peut être utilisé sur plusieurs outils de suivi.

Pour finir, vous devez envoyer 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 des données à Google Analytics à partir du navigateur. Un peu de 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 de manière dynamique les valeurs des données d'e-commerce sur la page finale. Voici un exemple de code 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 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>, vous devez ajouter la logique PHP supplémentaire pour générer de manière dynamique les données de transaction et d'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 de la page affiché dans le navigateur, toutes les données d'e-commerce sont envoyées à Google Analytics.

Types de devises

Vous pouvez configurer le type de devise par défaut via l'interface de gestion. Lorsque vous envoyez des valeurs de devise à l'aide d'analytics.js, la valeur représente la valeur totale d'une devise.

Un point comme séparateur décimal peut être utilisé comme séparateur entre la partie entière et la fraction. La précision est de six décimales. Les informations suivantes sont valides 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). Exemple :

$-55.00

devient:

-55.00