GA4 Ecommerce con GTM: La Guida Completa

GA4 Ecommerce con GTM: La Guida Completa per Implementare il Tracciamento (Step-by-Step)

Articolo scritto alla fine del 2020, dopo il rilascio ufficiale di GA4

Livello di Difficoltà: Intermedio

Ehi Marketer, Analyst, Developer! 👋

Se gestisci un e-commerce o lavori per uno, sai bene quanto sia fondamentale capire cosa fanno gli utenti sul sito. Non basta sapere quante visite ricevi; devi conoscere quali prodotti guardano, cosa aggiungono al carrello, e soprattutto, cosa acquistano! Google Analytics 4 (GA4) offre un sistema potentissimo per tracciare tutto il funnel di acquisto, ma implementarlo può sembrare un’impresa, specialmente usando Google Tag Manager (GTM).

Niente panico! Questa guida è pensata proprio per te. Ti accompagnerò passo dopo passo nell’implementazione del tracciamento E-commerce di GA4 tramite GTM, anche se non sei un super esperta. Mettiti comodo (ma non troppo, c’è da mettere le mani in pasta!) e iniziamo.

Perché il Tracciamento Ecommerce in GA4 è Così Importante?

Semplice: senza dati, navighi a vista. Implementare correttamente il tracciamento E-commerce ti permette di:

Misurare le Performance: Quali prodotti vendono di più? Quali generano più revenue?
Analizzare il Funnel di Acquisto: Dove abbandonano gli utenti? Tra la vista prodotto e il carrello? Durante il checkout?
Ottimizzare le Campagne Marketing: Quali canali portano le vendite più profittevoli? Come sta performando quella specifica campagna Google Ads o social?
Capire il Comportamento d’Acquisto: Quali categorie di prodotti sono spesso acquistate insieme? Qual è il valore medio dell’ordine?
Prendere Decisioni Data-Driven: Basare le strategie di prezzo, promozione e user experience su dati concreti, non su sensazioni.

In GA4, il tracciamento e-commerce è ancora più centrale grazie al suo modello basato sugli eventi.

Differenze Chiave: Enhanced Ecommerce (UA) vs Ecommerce GA4

Se vieni da Universal Analytics (UA), avrai familiarità con l’Enhanced Ecommerce. GA4 mantiene il concetto ma cambia la struttura. Ecco le differenze principali:

Caratteristica	Enhanced Ecommerce (UA)	Ecommerce GA4
Modello Dati	Basato su Hit (Pageview, Event, Transaction, etc.)	Basato su Eventi (Tutto è un evento)
Struttura dataLayer	Oggetto `ecommerce` con azioni specifiche (`checkout`, `add`)	Oggetto `ecommerce` più snello, dati passati come parametri dell’evento
Nomi Eventi	Meno standardizzati, dipendenti dall’implementazione	Nomi evento standardizzati (consigliati da Google): `view_item`, `add_to_cart`, `purchase`, ecc.
Parametri Prodotto	Array `products` dentro azioni specifiche (`impressions`, `detail`)	Array `items` standardizzato, usato in quasi tutti gli eventi e-commerce
Flessibilità	Richiedeva spesso configurazioni complesse in GTM	Più lineare se si seguono gli standard, più facile passare dati custom

In soldoni: GA4 semplifica la struttura dati richiesta nel dataLayer ma richiede di aderire ai suoi nomi evento e parametri standard per sfruttare appieno i report dedicati. L’array items diventa il protagonista per passare le informazioni sui prodotti.

Prerequisiti Tecnici: Cosa Ti Serve Prima di Iniziare

Assicurati di avere tutto pronto:

Proprietà GA4 Attiva: Devi aver già creato una proprietà Google Analytics 4 e avere il tuo ID Misurazione (Measurement ID, es. G-XXXXXXXXXX).
Contenitore Google Tag Manager (GTM) Installato: Il codice GTM deve essere correttamente implementato su tutte le pagine del tuo sito web.
Accesso a GTM: Devi avere i permessi necessari (Pubblicazione o superiori) per creare e modificare tag, trigger e variabili nel tuo contenitore GTM.
Accesso al Codice del Sito (o a uno Sviluppatore): La parte cruciale è implementare il dataLayer. Questo richiede di modificare il codice sorgente del tuo sito e-commerce (o del tuo CMS/piattaforma) per inviare le informazioni corrette a GTM al momento giusto.
Conoscenza Base di GTM: Sapere cosa sono Tag, Trigger e Variabili è fondamentale. Se sei alle prime armi, fai un rapido ripasso sulla Guida Introduttiva di GTM.

Implementazione Passo-Passo con GTM

Ok, è il momento di sporcarsi le mani! Il processo si basa su questo flusso di lavoro:

Azione Utente (Es: Aggiunge al Carrello) → Codice Sito invia dati al dataLayer → GTM “legge” il dataLayer → GTM invia l’evento a GA4

Ecco i passaggi chiave:

1. Il Data Layer: La Base di Tutto

Il dataLayer è un oggetto JavaScript che funge da “ponte” tra il tuo sito web e GTM. È qui che il tuo sito deve “scrivere” le informazioni sull’azione e-commerce che l’utente ha appena compiuto.

Quando implementarlo? Il dataLayer deve essere inizializzato prima dello snippet GTM nel codice HTML (<head>). Le informazioni sugli eventi specifici (view_item, add_to_cart, etc.) devono essere inviate tramite dataLayer.push() nel momento esatto in cui l’azione avviene (es: dopo il click sul bottone “Aggiungi al carrello”).

Struttura Chiave per GA4: La maggior parte degli eventi e-commerce di GA4 richiede una struttura simile a questa:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'nome_evento_ga4', // Es: 'add_to_cart', 'view_item', 'purchase'
  ecommerce: {
    currency: 'EUR', // O la valuta appropriata
    value: 123.45, // Valore totale dell'evento (es. valore del carrello, ordine) - Opzionale per alcuni eventi
    items: [
      {
        item_id: 'SKU12345', // ID univoco del prodotto (SKU)
        item_name: 'Nome Prodotto Fantastico', // Nome del prodotto
        affiliation: 'Nome Brand o Negozio', // Opzionale
        coupon: 'SUMMER20', // Opzionale: Codice coupon applicato
        currency: 'EUR', // Valuta specifica dell'item (se diversa da quella globale)
        discount: 5.00, // Opzionale: Sconto applicato a questo item
        index: 0, // Opzionale: Posizione dell'item in una lista (es. risultati ricerca)
        item_brand: 'Marca Prodotto', // Opzionale
        item_category: 'Categoria Principale', // Es: Abbigliamento
        item_category2: 'Sottocategoria', // Es: T-Shirt
        item_category3: 'Altra Categoria', // Opzionale
        item_category4: 'Ancora Altra Categoria', // Opzionale
        item_list_id: 'related_products', // Opzionale: ID della lista in cui appariva l'item
        item_list_name: 'Prodotti Correlati', // Opzionale: Nome della lista
        item_variant: 'Rosso', // Opzionale: Variante (colore, taglia)
        location_id: 'L123', // Opzionale: ID del luogo fisico (per store fisici)
        price: 49.99, // Prezzo unitario dell'item
        quantity: 1 // Quantità dell'item
      },
      // ...eventuali altri prodotti coinvolti nell'azione (es. più item aggiunti al carrello)
    ]
    // Altri parametri specifici dell'evento (es. transaction_id per 'purchase')
    // transaction_id: 'T12345', // Obbligatorio per 'purchase'
    // tax: 10.00, // Opzionale per 'purchase'
    // shipping: 5.99 // Opzionale per 'purchase'
  }
});

Importante: Consulta la documentazione ufficiale di Google sugli eventi e-commerce GA4 per vedere i parametri obbligatori e consigliati per ciascun evento specifico (view_item, select_item, add_to_cart, begin_checkout, add_shipping_info, add_payment_info, purchase, refund, etc.).

Se volessi fare il salto di qualità e personalizzare la struttura dataLayer, dà un’occhiata qui

2. Configurazione del Tag GA4 Base (Se non l’hai già fatto)

Prima di tracciare gli eventi e-commerce, devi avere il tag di configurazione base di GA4 in GTM.

Vai su GTM > Tag > Nuovo.
Configurazione Tag: Scegli “Google Analytics: Configurazione GA4”.
ID Misurazione: Inserisci il tuo ID G-XXXXXXXXXX.
Attivazione: Scegli “Tutte le pagine” (Initialization - All Pages è ancora meglio).
Salva con un nome chiaro (es. “GA4 - Configurazione Base”).

Questo tag invia le pageview e inizializza GA4 su ogni pagina.

3. Creare le Variabili Data Layer in GTM

GTM ha bisogno di “leggere” i valori inviati nel dataLayer. Creiamo le variabili necessarie:

Vai su GTM > Variabili > Variabili definite dall’utente > Nuovo.
Configurazione Variabile: Scegli “Variabile Data Layer”.
Nome Variabile Data Layer: Inserisci il percorso esatto del dato che vuoi catturare. Esempi comuni:
- ecommerce.items -> Per catturare l’intero array dei prodotti.
- ecommerce.currency -> Per la valuta.
- ecommerce.value -> Per il valore totale.
- ecommerce.transaction_id -> Per l’ID della transazione (solo per purchase).
- ecommerce.coupon -> Per il coupon.
- Etc…
Dai un Nome alla Variabile: Usa una nomenclatura chiara (es. dlv - ecommerce items, dlv - ecommerce currency).
Salva.
Ripeti per tutte le variabili e-commerce che ti servono (almeno items, currency, value).

Consiglio: Puoi usare lo strumento di anteprima di GTM (ne parliamo dopo) per vedere esattamente come si chiama la variabile nel dataLayer dopo un push.

Aggiornamento: Questo articolo è stato scritto al rilascio di GA4 per un vecchio blog che gestivo. Ad oggi, in GTM, è possibile spuntare la casella relativa all’invio dei dati ecommerce tramite dataLayer, nel tag evento di GA4.

4. Creare i Trigger per gli Eventi E-commerce

Il trigger dice a GTM quando attivare un tag. Per gli eventi e-commerce basati sul dataLayer, useremo i trigger di tipo “Evento Personalizzato”.

Vai su GTM > Trigger > Nuovo.
Configurazione Trigger: Scegli “Evento personalizzato”.
Nome evento: Inserisci esattamente il nome dell’evento che hai specificato nel dataLayer.push() (es. add_to_cart, view_item, purchase). Case sensitive!
Questo trigger si attiva su: “Tutti gli eventi personalizzati” (o puoi filtrare se necessario, ma solitamente non serve qui).
Dai un Nome al Trigger: Usa una nomenclatura chiara (es. Custom Event - add_to_cart, CE - view_item).
Salva.
Ripeti per ogni evento e-commerce che vuoi tracciare (view_item, add_to_cart, begin_checkout, purchase, etc.).

5. Creare i Tag Evento GA4 per l’E-commerce

Ora mettiamo tutto insieme: creiamo i tag che invieranno i dati a GA4 quando i trigger scattano.

Vai su GTM > Tag > Nuovo.
Configurazione Tag: Scegli “Google Analytics: Evento GA4”.
Tag di configurazione: Seleziona il tuo tag di configurazione GA4 creato al passo 2.
Nome evento: Inserisci il nome evento standard GA4 corrispondente all’azione (es. add_to_cart). Deve corrispondere al nome dell’evento che Google si aspetta! Non quello del trigger, anche se spesso coincidono se hai usato i nomi standard nel dataLayer push.
Parametri evento: Qui avviene la magia!
- Clicca su “Aggiungi riga”.
- Nome parametro: Inserisci il nome del parametro standard GA4 (es. items, currency, value, transaction_id, coupon, shipping, tax).
- Valore: Clicca sull’icona “mattoncino” (+) e seleziona la Variabile Data Layer corrispondente che hai creato al passo 3 (es. {{dlv - ecommerce items}} per il parametro items).
- Aggiungi tutti i parametri richiesti o consigliati per quell’evento specifico. Per l’array items, assicurati di passare la variabile che contiene l’intero array ({{dlv - ecommerce items}}). GA4 sa come gestirlo.
Attivazione: Clicca sulla sezione Attivazione e scegli il Trigger Evento Personalizzato corrispondente creato al passo 4 (es. Custom Event - add_to_cart).
Dai un Nome al Tag: Usa una nomenclatura chiara (es. GA4 Event - Add to Cart, GA4 - Ecomm - Purchase).
Salva.
Ripeti questo processo per tutti gli eventi e-commerce che hai deciso di implementare.

(Esempio visivo della configurazione di un Tag Evento GA4 per add_to_cart)

----------------------------------------------------
| TAG: GA4 Event - Add to Cart                     |
---------------------------------------------------|
| Tipo Tag: Google Analytics: Evento GA4           |
| Tag Configurazione: {{GA4 Configurazione}}       |
| Nome Evento: add_to_cart                         |
|                                                  |
| Parametri Evento:                                |
|   Nome Parametro  | Valore                       |
|   ----------------|------------------------      |
|   currency        | {{dlv - ecommerce currency}} |
|   value           | {{dlv - ecommerce value}}    |
|   items           | {{dlv - ecommerce items}}    |
|   (altri opz...)  | {{...}}                      |
|                                                  |
| Attivazione:                                     |
|   {{Custom Event - add_to_cart}}                 |
----------------------------------------------------

Esempi Pratici di Codice `dataLayer.push()`

Ecco come potrebbe apparire il codice JavaScript che il tuo sviluppatore (o tu!) dovrebbe implementare sul sito per alcuni eventi chiave:

1. Vista Dettaglio Prodotto (view_item) Da eseguire quando la pagina del prodotto viene caricata.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 75.99, // Prezzo del prodotto visualizzato
    items: [{
      item_id: 'SKU_P001',
      item_name: 'Scarpe da Running Super Veloci',
      item_brand: 'Marca Atletica',
      item_category: 'Calzature',
      item_variant: 'Blu/Giallo',
      price: 75.99,
      quantity: 1 // Sempre 1 per view_item
    }]
  }
});

2. Aggiunta al Carrello (add_to_cart) Da eseguire quando l’utente clicca sul bottone “Aggiungi al Carrello”.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 50.00, // Valore del prodotto aggiunto (prezzo * quantità)
    items: [{
      item_id: 'SKU_T002',
      item_name: 'T-Shirt Cotone Bio',
      item_category: 'Abbigliamento',
      item_variant: 'Verde - L',
      price: 25.00,
      quantity: 2 // L'utente ha aggiunto 2 unità
    }]
  }
});

3. Acquisto (purchase) Da eseguire sulla pagina di conferma ordine (thank you page), SOLO UNA VOLTA per transazione.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'ORDINE_12345ABC', // OBBLIGATORIO: ID Univoco Transazione
    affiliation: 'Nome Mio Negozio Online',
    value: 145.97, // OBBLIGATORIO: Valore Totale Ordine (prodotti + tasse + spedizione - sconti)
    tax: 15.00, // Tasse totali
    shipping: 5.99, // Costo spedizione
    currency: 'EUR', // OBBLIGATORIO: Valuta
    coupon: 'NEWUSER10', // Coupon applicato (se presente)
    items: [
      {
        item_id: 'SKU_P001',
        item_name: 'Scarpe da Running Super Veloci',
        item_brand: 'Marca Atletica',
        item_category: 'Calzature',
        item_variant: 'Blu/Giallo',
        price: 75.99,
        quantity: 1
      },
      {
        item_id: 'SKU_A005',
        item_name: 'Calzini Tecnici',
        price: 9.99,
        quantity: 2,
        coupon: 'NEWUSER10' // Coupon applicato a livello di item (opzionale)
      },
      {
        item_id: 'SKU_X100',
        item_name: 'Borraccia Sportiva',
        price: 19.99,
        quantity: 1
      }
   ] // Fine array items
  } // Fine oggetto ecommerce
}); // Fine dataLayer.push

Debug e Validazione: Come Verificare che Tutto Funzioni

Ok, hai configurato tutto. Ma come sai se funziona davvero? Il debug è FONDAMENTALE.

Modalità Anteprima di GTM (Preview Mode):
- Clicca “Anteprima” in GTM.
- Inserisci l’URL del tuo sito. Si aprirà una nuova finestra del tuo sito con un banner di debug GTM in basso (o in una scheda separata gestita dall’estensione Tag Assistant Companion).
- Naviga sul sito ed esegui le azioni e-commerce (vedi un prodotto, aggiungi al carrello, acquista - usa un ambiente di test se possibile!).
- Nel pannello di Debug di GTM (la scheda tagassistant.google.com):
  - Verifica gli Eventi: Sulla sinistra, vedrai gli eventi che GTM riceve (es. view_item, add_to_cart). Clicca su uno di essi.
  - Controlla i Tag: Nella sezione “Tags”, verifica se il tag GA4 corrispondente (es. GA4 Event - Add to Cart) si è attivato (“Fired”).
  - Ispeziona le Variabili: Clicca sulla tab “Variables” per vedere i valori catturati dalle tue variabili Data Layer (dlv - ecommerce items, etc.) al momento dell’evento. Sono corretti?
  - Esamina il Data Layer: Clicca sulla tab “Data Layer” per vedere l’esatto dataLayer.push() ricevuto da GTM. La struttura e i dati sono quelli che ti aspetti?
DebugView di GA4:
- Mentre sei in modalità Anteprima GTM (con l’estensione Tag Assistant Companion attiva), vai nella tua proprietà GA4.
- Vai su Amministrazione (Admin) > Visualizzazione Debug (DebugView).
- Qui vedrai gli eventi arrivare in GA4 quasi in tempo reale dal tuo browser (identificato come dispositivo di debug).
- Clicca su un evento (es. add_to_cart) per vedere i parametri che GA4 ha ricevuto (items, currency, value, etc.). Sono corretti? L’array items è popolato correttamente?
Estensioni Browser Utili:
- Tag Assistant Companion: Essenziale per far funzionare al meglio la Preview Mode di GTM e il DebugView di GA4. Installala sul tuo browser (Chrome, Edge, etc.).
- Dataslayer / Datalayer Checker: Estensioni che mostrano il contenuto del dataLayer direttamente nel browser, utili per un debug rapido mentre navighi.
- GA Debugger (Analytics Debugger): Attiva log dettagliati nella console JavaScript del browser (accessibile con F12 > Console) riguardo agli hit inviati a Google Analytics. Utile per un’analisi più approfondita.

Cosa controllare durante il debug:

I tag si attivano sugli eventi giusti?
Le variabili dataLayer catturano i dati corretti (ID, nomi, prezzi, quantità)?
La struttura dell’array items è corretta?
I valori numerici (prezzo, valore) sono inviati come numeri, non stringhe?
La valuta è presente e corretta?
L’transaction_id è univoco per ogni acquisto?
Gli eventi arrivano correttamente in DebugView di GA4 con tutti i parametri attesi?

Checklist Finale per l’Implementazione

Prima di pubblicare il contenitore GTM, fai un ultimo check:

Conclusione

Implementare il tracciamento E-commerce GA4 con GTM richiede attenzione ai dettagli, specialmente nella configurazione del dataLayer e nella mappatura dei dati in GTM. Ma una volta fatto, avrai a disposizione una miniera d’oro di informazioni per capire e ottimizzare il tuo business online.

Sembra complicato? Forse all’inizio, ma seguendo questi passaggi e dedicando tempo al debug, ce la puoi fare! Ricorda che la documentazione ufficiale di Google è tua amica, e la community online è piena di risorse.

Spero questa guida ti sia stata utile! Se hai domande o dubbi, scrivimi. Buon tracciamento! 🚀

GA4 Ecommerce con GTM: La Guida Completa