Configurer un événement d'achat

Ce tutoriel vous explique comment configurer un événement purchase sur votre site Web afin de mesurer les achats effectués par les utilisateurs. Il présente les dimensions, les métriques et les rapports qu'Analytics insère avec les données de l'événement. Pour en savoir plus sur les événements d'e-commerce, consultez Mesurer l'e-commerce.

Avant de commencer

Dans ce tutoriel, nous partons du principe que vous avez déjà effectué les opérations suivantes:

Nous partons également du principe que vous disposez des éléments suivants :

  • Accéder au code source de votre site Web
  • Le rôle Éditeur (ou supérieur) dans le compte Google Analytics

Étape 1: Ajoutez l'événement à votre site Web

Vous devez placer l'événement purchase sur la page de votre site Web où l'utilisateur effectue l'achat. Par exemple, vous pouvez ajouter l'événement sur la page de confirmation qui s'affiche lorsqu'un utilisateur effectue un achat. Ce tutoriel vous explique comment ajouter l'événement à une page sur laquelle un utilisateur clique sur le bouton "Acheter".

Placez l'événement dans une balise <script> à la fin de la balise <body>. Le fait de placer l'événement directement dans la balise <script> le déclenche lors du chargement de la page. La section suivante explique comment déclencher l'événement lorsqu'un utilisateur clique sur "Acheter".

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button>Submit</button>
    <script>
    gtag("event", "purchase", {
        transaction_id: "T_12345_1",
        value: 30.03,
        tax: 4.90,
        shipping: 5.99,
        currency: "USD",
        coupon: "SUMMER_SALE",
        items: [
        // If someone purchases more than one item, 
        // you can add those items to the items array
         {
          item_id: "SKU_12345",
          item_name: "Stan and Friends Tee",
          affiliation: "Google Merchandise Store",
          coupon: "SUMMER_FUN",
          discount: 2.22,
          index: 0,
          item_brand: "Google",
          item_category: "Apparel",
          item_category2: "Adult",
          item_category3: "Shirts",
          item_category4: "Crew",
          item_category5: "Short sleeve",
          item_list_id: "related_products",
          item_list_name: "Related Products",
          item_variant: "green",
          location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
          price: 10.01,
          quantity: 3
        }]
    });
    </script>
</body>
</html>

Étape 2: Associez l'événement à un bouton

Vous pouvez configurer l'événement purchase de plusieurs façons pour qu'il se déclenche lorsqu'un utilisateur clique sur le bouton "Acheter". Vous pouvez, par exemple, ajouter un ID au bouton "Acheter", puis placer le code de l'événement dans un écouteur d'événements. Dans l'exemple suivant, l'événement n'est envoyé que lorsqu'un utilisateur clique sur un bouton avec l'ID purchase.

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID');
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_2",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
          });
      });
    </script>
</body>
</html>

Étape 3: Vérifiez que vous collectez les données

Le rapport DebugView affiche les données en temps réel de votre site Web pour vous permettre de configurer correctement les événements. Pour activer le mode débogage sur une page Web, ajoutez le paramètre debug_mode suivant à la commande config:

<!--
  Note: In the following code sample, make sure to
  replace "TAG_ID" with your tag ID.
  Learn more: https://support.google.com/tagmanager/answer/12326985
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'TAG_ID',{ 'debug_mode': true });
    </script>
</head>
<body>
    <div>This is where the purchase form would go</div>
    <button id="purchase">Purchase</button>
    <script>
    document.getElementById("purchase").addEventListener("click", function () {
        gtag("event", "purchase", {
                // This purchase event uses a different transaction ID
                // from the previous purchase event so Analytics
                // doesn't deduplicate the events.
                // Learn more: https://support.google.com/analytics/answer/12313109
                transaction_id: "T_12345_3",
                value: 30.03,
                tax: 4.90,
                shipping: 5.99,
                currency: "USD",
                coupon: "SUMMER_SALE",
                items: [
                {
                  item_id: "SKU_12345",
                  item_name: "Stan and Friends Tee",
                  affiliation: "Google Merchandise Store",
                  coupon: "SUMMER_FUN",
                  discount: 2.22,
                  index: 0,
                  item_brand: "Google",
                  item_category: "Apparel",
                  item_category2: "Adult",
                  item_category3: "Shirts",
                  item_category4: "Crew",
                  item_category5: "Short sleeve",
                  item_list_id: "related_products",
                  item_list_name: "Related Products",
                  item_variant: "green",
                  location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
                  price: 10.01,
                  quantity: 3
                }]
        });
    });
    </script>
</body>
</html>

Une fois le mode débogage activé, des événements commenceront à s'afficher dans le rapport DebugView à mesure que les utilisateurs se serviront de votre site Web. Par exemple, si vous cliquez sur le bouton "Acheter" de votre site Web, les données suivantes sont insérées dans le rapport. Vous pouvez sélectionner un événement pour afficher les paramètres, les propriétés utilisateur et les éléments qui lui sont associés.

Capture d&#39;écran du rapport &quot;DebugView&quot;

Étape 4: Consultez vos données d'e-commerce

Au bout de 24 heures environ, les données que vous avez envoyées avec l'événement purchase deviennent disponibles dans vos rapports, vos explorations et l'API Google Analytics Data. Vous pouvez également accéder aux données dans BigQuery en configurant BigQuery Export.

L'événement "purchase" renseigne automatiquement diverses dimensions et métriques prédéfinies, utilisées dans vos rapports, vos explorations, etc. Voici quelques-unes des dimensions contenant les données de l'événement purchase de la première étape:

Paramètres Dimension Valeur
affiliation Affiliation de l'article Google Merchandise Store
currency Devise USD
discount Montant de la remise sur l'article 2,22
index Position dans la liste d'articles 0
item_brand Marque de l'article Google
item_category Catégorie de l'article Habillement
item_id ID de l'article SKU_12345
item_list_id ID de la liste d'articles related_products
item_list_name Nom de la liste d'articles Produits associés
item_name Nom de l'article T-shirt Stan and Friends
item_variant Variante de l'article green
location_id ID de zone géographique de l'article ChIJIQBpAG2ahYAR_6128GcTUEo (identifiant de lieu Google pour San Francisco)
shipping Montant des frais de port 5,99 EUR
tax Montant des taxes 4,90
transaction_id ID de transaction T_12345

En plus des dimensions, Google Analytics insère un certain nombre de métriques d'e-commerce et liées aux revenus. Par exemple, si un utilisateur clique une fois sur le bouton "Acheter", les métriques suivantes sont renseignées dans Google Analytics:

  • La métrique Revenu généré par l'article a une valeur de 30,03 $
  • La métrique Revenu total a une valeur de 30,03 $
  • La métrique Achats d'e-commerce affiche la valeur 1

Vous pouvez utiliser ces dimensions et métriques pour créer des explorations et des rapports personnalisés, mais vous pouvez également utiliser le rapport prédéfini Achats d'e-commerce suivant pour consulter vos données d'e-commerce:

Capture d&#39;écran du rapport &quot;Achats d&#39;e-commerce&quot;