E-commerce amélioré pour Tag Manager

Ce guide explique comment implémenter les fonctionnalités d'e-commerce amélioré Universal Analytics à l'aide de Google Tag Manager sur un site Web.

Présentation

L'e-commerce amélioré de Google Analytics permet d'envoyer des données sur les impressions, les promotions et les ventes des produits avec tous vos événements et pages vues Google Analytics. Utilisez les pages vues pour suivre les impressions et les achats de produits, et les événements pour suivre les étapes de règlement et les clics sur les produits.

Avant de commencer

Nous vous recommandons de consulter la section Actions et types de données d'e-commerce amélioré du Guide du développeur pour l'e-commerce amélioré pour vous aider à planifier votre implémentation. Il vous aidera à identifier les champs obligatoires et facultatifs pour chacune des interactions d'e-commerce que vous souhaitez mesurer.

Activation de l'e-commerce amélioré

Dans la plupart des cas, vous devez activer l'e-commerce amélioré pour chacun de vos tags d'événement ou de page vue Universal Analytics. Vous disposez de deux options pour activer l'e-commerce amélioré dans l'écran de l'éditeur de balises de l'interface Web:

  • Implémentation à l'aide de la couche de données (recommandé)
  • Implémenter à l'aide d'une macro JavaScript personnalisée

Bien que les deux méthodes offrent des fonctionnalités d'e-commerce équivalentes, nous recommandons d'utiliser la méthode de couche de données pour tous les sites Web compatibles avec une couche de données. Ce guide présente la méthode de la couche de données par défaut, tandis que l'utilisation d'une macro JavaScript personnalisée est documentée à la fin de ce guide.

Utiliser la couche de données

Les sections suivantes expliquent comment utiliser la couche de données pour mesurer les activités d'e-commerce amélioré suivantes:

Effacer l'objet d'e-commerce

Nous vous recommandons d'utiliser la commande suivante pour effacer l'objet d'e-commerce avant de transmettre un événement d'e-commerce à la couche de données. Si vous effacez l'objet, plusieurs événements d'e-commerce sur une page ne pourront pas s'influencer mutuellement.

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

Mesure des impressions de produits

  • Mesure de l'e-commerce: impressions
  • Données acceptées: tableau de impressionFieldObjects

Mesurez les impressions des produits à l'aide de l'action impression et d'un ou plusieurs impressionFieldObjects. L'exemple suivant suppose que les détails des produits affichés sur une page sont connus au moment du chargement de la page:

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

Mesurer les clics sur les produits

  • Mesure de l'e-commerce: click
  • Données acceptées: list, tableau de productFieldObjects

Mesurez les clics sur les liens de produits en envoyant une action click à la couche de données, ainsi qu'une productFieldObject pour représenter le produit sur lequel l'utilisateur a cliqué, comme dans cet exemple:

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

Mesurer les vues des informations détaillées sur les produits

  • Mesure de l'e-commerce: detail
  • Données acceptées: list, tableau de productFieldObjects

Mesurez une vue des informations détaillées sur les produits en envoyant une action detail à la couche de données, avec un ou plusieurs productFieldObjects représentant les produits consultés:

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

Mesurer les ajouts ou les suppressions d'articles dans un panier

  • Mesure de l'e-commerce: add, remove
  • Données acceptées: list, tableau de productFieldObjects

De même, vous pouvez mesurer les ajouts ou les suppressions dans un panier à l'aide d'un add ou d'un remove actionFieldObject et d'une liste de productFieldObjects:

Ajouter un produit à un panier

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

Supprimer un produit d'un panier

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

Mesure des promotions

Vous pouvez mesurer à la fois les impressions et les clics sur les promotions internes au site, telles que les bannières affichées sur le site lui-même, annonçant une vente sur un sous-ensemble particulier de produits ou une offre de livraison sans frais.

Mesure des impressions des publicités

  • Mesure de l'e-commerce: promoView
  • Données acceptées: tableau de promoFieldObjects

Pour mesurer une impression de promotion, définissez la clé promoView dans votre variable de couche de données d'e-commerce sur une valeur promoFieldObject décrivant les promotions présentées aux utilisateurs sur la page:

<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

Mesurer les clics sur les promotions

Pour mesurer un clic sur une promotion, transmettez l'action promoClick à la couche de données avec un tableau contenant un élément promoFieldObject décrivant la promotion sur laquelle l'utilisateur a cliqué:

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

Mesurer un processus de paiement

Pour mesurer chaque étape d'un processus de paiement, vous devez:

  1. Mesurez chaque étape du processus de paiement à l'aide de l'action checkout.
  2. Le cas échéant, mesurez les options de paiement à l'aide de l'action checkout_option.
  3. Si vous le souhaitez, vous pouvez définir des noms d'étapes conviviaux pour le rapport sur les entonnoirs de paiement. Pour ce faire, configurez les paramètres d'e-commerce dans la section Admin de l'interface Web.

1. Mesurer les étapes du règlement

  • Mesure de l'e-commerce: checkout
  • Données acceptées: step, tableau de productFieldObjects

Pour mesurer le processus de paiement, qui peut inclure un bouton de paiement et une ou plusieurs pages de paiement sur lesquelles les utilisateurs saisissent des informations de livraison et de paiement, utilisez l'action checkout et le champ step pour indiquer l'étape du processus de paiement mesurée. Vous pouvez également utiliser le champ option pour fournir des données supplémentaires sur la page, telles que le type de paiement sélectionné par l'utilisateur.

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2. Mesure des options de paiement

  • Mesure de l'e-commerce: checkout_option
  • Données acceptées: step, option

L'option de paiement est utile dans les cas où vous avez déjà mesuré une étape de règlement, mais que vous souhaitez collecter des informations supplémentaires sur cette même étape. (par exemple, le mode de livraison sélectionné par l'utilisateur). Pour mesurer cela, utilisez l'action checkout_option avec les champs step et option.

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. Configuration de l'entonnoir de paiement

Vous pouvez éventuellement attribuer un nom descriptif à chaque étape du processus de paiement. Celui-ci sera utilisé dans les rapports. Pour configurer ces noms, accédez à la section Administration de l'interface Web Google Analytics, sélectionnez la vue (profil) et cliquez sur Paramètres d'e-commerce. Suivez les instructions de configuration de l'e-commerce pour ajouter un libellé à chaque étape de règlement dont vous souhaitez effectuer le suivi.

Configuration du commerce électronique dans l&#39;interface d&#39;administration Google Analytics. Un entonnoir de paiement est défini avec quatre étapes: 1. Vérifier le panier 2. Collecter les informations de paiement 3. Confirmez les détails de l&#39;achat 4. Reçu.
Figure 1: Configuration de l'e-commerce, entonnoir de paiement

Mesurer les achats

  • Mesure de l'e-commerce: purchase
  • Données acceptées: id (ID de transaction), tableau de productFieldObjects

Transférez les détails de votre transaction dans la couche de données à l'aide de l'action purchase, avec un event qui déclenchera une balise compatible avec l'e-commerce amélioré. Dans cet exemple, les détails de la transaction sont connus au moment du chargement de la page et sont envoyés avec une page vue lorsque le script gtm.js renvoie:

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

Mesure des remboursements

  • Mesure de l'e-commerce: refund
  • Données acceptées: id (ID de transaction), tableau de productFieldObjects

Pour mesurer le remboursement total d'une transaction, transmettez un refund actionFieldObject avec l'ID de la transaction à rembourser:

<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

Pour mesurer un remboursement partiel, ajoutez une liste de productFieldObjects, y compris les ID produit et les quantités remboursées:

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

Transmettre des dimensions personnalisées de portée produit

Pour transmettre une dimension personnalisée de portée produit à l'objet d'e-commerce, ajoutez-la au produit à l'aide de la notation suivante:

  dimensionn

où n est un nombre naturel, par exemple :

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>

Transmettre des métriques personnalisées de portée produit

Pour transmettre une métrique personnalisée de portée produit à l'objet d'e-commerce, ajoutez-la au produit à l'aide de la notation suivante:

  metricn

où n est un nombre naturel, par exemple :

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>

Combiner les impressions et les actions

Si vous enregistrez à la fois des impressions de produits et une action, vous pouvez les combiner et les mesurer en un seul appel.

L'exemple ci-dessous montre comment mesurer une vue détaillée d'un produit avec des impressions de produits provenant d'une section de produits associés:

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

Utiliser une macro JavaScript personnalisée

Si votre site Web n'accepte pas de couche de données, vous pouvez utiliser une macro JavaScript personnalisée pour appeler une fonction qui renvoie l'objet de données d'e-commerce. Cet objet doit utiliser la syntaxe de couche de données présentée précédemment dans ce guide, par exemple:

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

Si vous choisissez d'utiliser une macro JavaScript personnalisée au lieu de la couche de données, sélectionnez Activer les fonctionnalités d'e-commerce amélioré et définissez l'option Lire les données à partir de la macro.