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:
- Créer une propriété et un compte Google Analytics 4
- Créer un flux de données Web pour votre site Web
- Placer la balise Google Analytics sur votre site Web
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.
É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 | |
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: