Questo tutorial ti mostra come configurare un evento purchase
sul tuo sito web in modo da poter misurare quando qualcuno effettua un acquisto. Il tutorial include le dimensioni, le metriche e i report che Analytics completa con i dati dell'evento. Per scoprire di più sugli eventi di e-commerce, consulta Misurare l'e-commerce.
Prima di iniziare
Questo tutorial presuppone che tu abbia eseguito le seguenti operazioni:
- Creato un account e una proprietà Google Analytics 4.
- Creato uno stream di dati web per il sito web.
- Inserire il tag di Google Analytics nel sito web
Si presume inoltre che tu disponga di quanto segue:
- Accesso al codice sorgente del tuo sito web
- Ruolo Editor (o superiore) per l'account Google Analytics
Passaggio 1: aggiungi l'evento al tuo sito web
Devi inserire l'evento purchase
nella pagina del tuo sito web in cui
l'utente effettua un acquisto. Ad esempio, puoi aggiungere l'evento nella
pagina di conferma che viene visualizzata quando qualcuno effettua un acquisto. Questo tutorial
ti mostra come aggiungere l'evento a una pagina in cui una persona fa clic su un pulsante
"Acquista".
Inserisci l'evento in un tag <script>
alla fine del tag <body>
.
Inserendolo direttamente nel tag <script>
, l'evento viene attivato quando la pagina viene caricata. La sezione successiva descrive come attivare l'evento quando un utente fa clic su "Acquista".
<!--
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>
Passaggio 2: collega l'evento a un pulsante
Puoi configurare l'evento purchase
in modo che si attivi quando un utente fa clic su un
pulsante "Acquista" in diversi modi. Uno di questi è aggiungere un ID al pulsante "Acquista" e poi inserire il codice evento in un listener di eventi. Nel seguente esempio, l'evento viene inviato solo quando un utente fa clic su un pulsante con 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>
Passaggio 3: verifica di raccogliere i dati
Il report DebugView mostra i dati in tempo reale del tuo sito web per assicurarti di configurare correttamente gli eventi.
Per attivare la modalità di debug su una pagina web, aggiungi il seguente parametro debug_mode
al comando 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>
Dopo aver attivato la modalità di debug, inizierai a visualizzare gli eventi nel report DebugView man mano che gli utenti utilizzano il tuo sito web. Ad esempio, se fai clic sul pulsante "Acquista" sul tuo sito web, il report viene compilato con i seguenti dati. Puoi selezionare un evento per visualizzarne i parametri, le proprietà utente e gli elementi associati.
Passaggio 4: visualizza i dati di e-commerce
Dopo circa 24 ore, i dati inviati con l'evento purchase
diventano disponibili nei report, nelle esplorazioni e nell'API di dati di Google Analytics.
Puoi anche accedere ai dati in BigQuery quando configuri BigQuery Export.
L'evento "acquisto" compila automaticamente una serie di dimensioni e metriche predefinite, che vengono utilizzate nei report, nelle esplorazioni e così via. Di seguito sono riportate alcune delle dimensioni che vengono compilate con i dati
dell'evento purchase
nel primo passaggio:
Parametro | Dimensione | Valore |
---|---|---|
affiliation |
Affiliazione articolo | Google Merchandise Store |
currency |
Currency | € |
discount |
Importo dello sconto sull'articolo | 2,22 |
index |
Posizione elenco di articoli | 0 |
item_brand |
Brand dell'articolo | |
item_category |
Categoria articolo | Abbigliamento |
item_id |
ID articolo | SKU_12345 |
item_list_id |
ID elenco di articoli | related_products |
item_list_name |
Nome elenco di articoli | Prodotti correlati |
item_name |
Nome elemento | Maglietta Stan and Friends |
item_variant |
Variante dell'articolo | verde |
location_id |
ID posizione articolo | ChIJIQBpAG2ahYAR_6128GcTUEo (l'ID luogo di Google per San Francisco) |
shipping |
Importo della spedizione | 5,99 € |
tax |
Importo delle tasse | 4,90 |
transaction_id |
ID transazione | T_12345 |
Oltre alle dimensioni, Google Analytics compila una serie di metriche di e-commerce ed entrate. Ad esempio, se un utente fa clic sul pulsante "Acquista" una volta, in Google Analytics vengono compilate le seguenti metriche:
- La metrica Entrate a livello di articolo ha un valore di 30,03 $
- La metrica Entrate totali ha un valore di 30,03 $
- La metrica Acquisti e-commerce ha un valore pari a 1.
Puoi utilizzare queste dimensioni e metriche per creare esplorazioni e report personalizzati, ma puoi anche usare il seguente report Acquisti e-commerce predefinito per visualizzare i dati di e-commerce: