GTM Trigger Aggiungi al Carrello丨Guida Completa alla Configurazione e Ottimizzazione (Aggiornamento 2025)

Questo articolo si basa sulla più recente guida ufficiale di Google (versione GA4 2025), combinata con casi reali che ho verificato personalmente con clienti e-commerce (ad esempio, un importante brand ha aumentato del 27% la conversione al carrello ottimizzando i trigger). Vedremo in modo chiaro la logica alla base dei trigger di “aggiungi al carrello” in GTM, come configurarli correttamente, evitare gli errori più comuni e passare parametri dinamici.

Che tu sia un principiante con GTM o uno sviluppatore che lavora su più piattaforme (come Shopify o WooCommerce), con questa guida potrai ottenere un tracciamento dati super preciso.

Principio base del trigger “Aggiungi al carrello” in GTM

Da “interruttore” a “nodo centrale dei dati”

In Google Tag Manager (GTM), il trigger non è solo un semplice interruttore, ma un vero e proprio motore di regole dinamiche.

Funziona ascoltando azioni specifiche sulla pagina web (come clic, scroll o invio moduli) o eventi nel data layer (come add_to_cart), e verifica se sono soddisfatte determinate condizioni (ad esempio “solo utenti da mobile” o “prezzo prodotto > $100”) per decidere se attivare i tag associati.

Tipi di trigger:

• Eventi automatici: come visualizzazione pagina, clic su elementi, invio form, ecc.
• Eventi personalizzati: inviati manualmente dallo sviluppatore con dataLayer.push() (es. add_to_cart).

Condizioni del trigger:

• Basate su variabili dinamiche, ad esempio: {{Click ID}} == "cart-button" && {{Page Path}} contains "/product/".
• Supportano espressioni regolari e operatori logici (AND/OR).

Trasferimento preciso dei dati

Ecco la catena completa dall’azione utente fino alla raccolta dei dati:

Azione utente:

• L’utente clicca il pulsante “Aggiungi al carrello”.
• Requisito tecnico: il bottone deve avere attributi HTML riconoscibili (es. class="cart-button") o essere legato a un evento nel data layer.

Invio dell’evento nel data layer:

• Opzione 1 (ascolto clic frontend): usare il trigger “Click” di GTM per rilevare direttamente il clic.
• Opzione 2 (evento personalizzato nel data layer): inviare un evento tramite codice come dataLayer.push({event: "add_to_cart"}).

Verifica delle condizioni del trigger:

• GTM controlla che l’evento (es. add_to_cart) e il path della pagina (es. contiene /product/) corrispondano alle regole.
• Trappole comuni: più pulsanti con la stessa classe, nomi degli eventi scritti male o incoerenti.

Attivazione del tag e invio dei dati:

• Il tag evento GA4 viene attivato e invia i parametri dinamici (es. info sul prodotto) al backend di analisi.
• Verifica importante: controllare nel report in tempo reale di GA4 se l’evento add_to_cart è stato ricevuto.

Schema del processo:

L’utente clicca → l’evento viene inviato al data layer → il trigger GTM corrisponde → si attiva il tag GA4 → i dati vengono registrati per l’analisi

Perché è fondamentale usare il data layer

• Parametri dinamici affidabili: prendere dati direttamente dal DOM (es. prezzo) può rompersi se cambia il layout della pagina, ma il data layer trasmette parametri strutturati in modo stabile.
• Compatibilità multi-piattaforma: che sia una single-page app in React o un sito PHP classico, il data layer permette un formato evento uniforme.
• Conformità alla privacy: con il data layer puoi controllare con precisione quali dati utente raccogliere (escludendo dati sensibili, se necessario).

Esempio di codice (invio al dataLayer)：

// Quando si clicca sul pulsante, invia l'evento e i dati del prodotto
document.querySelector(".cart-button").addEventListener("click", function() {
  dataLayer.push({
    event: "add_to_cart",
    item_id: "PRODUCT_123",
    price: 29.99,
    currency: "USD"
  });
});

Procedura di configurazione aggiornata al 2025

Trova gli elementi chiave in 5 minuti

Verifica l’ambiente tecnico

Chiediti: Il mio sito utilizza già un dataLayer (comune nelle SPA come React/Vue)?

1. Nessun dataLayer → scegli il Metodo 1 (trigger su clic).
2. Con dataLayer → dai la priorità al Metodo 2 (evento tramite dataLayer).

Piattaforma CMS: se usi Shopify/WooCommerce o simili, vai direttamente al Metodo 3 (integrazione nativa GA4).

Ottieni il selettore del pulsante (obbligatorio per il Metodo 1)

Passaggi：

1. Apri Chrome, fai clic destro sul pulsante “Aggiungi al carrello” → seleziona “Ispeziona” (si apre DevTools).
2. Nel pannello “Elements”, trova il codice HTML del pulsante e annota il valore dell’attributo id o class (es: id="add-to-cart-btn").
3. Verifica il selettore: nel pannello “Console”, digita document.querySelector('#add-to-cart-btn'). Se restituisce l’elemento, il selettore è corretto.

Esempio：

<button id="add-to-cart-btn" class="btn-primary">Aggiungi al carrello</button>

✅ Selettori validi: #add-to-cart-btn (ID) oppure .btn-primary (Classe — assicurati che sia unica)

Configurare un trigger (scegli uno dei 3 metodi)

Metodo 1: Trigger al clic (senza codice, ideale per principianti)

Crea il trigger

Nel pannello di GTM → Trigger → Nuovo → Seleziona Click – Just Links (per pulsanti con link) oppure Click – All Elements (per pulsanti normali).

Condizioni del trigger:

• Seleziona “Some Clicks” → imposta Click ID uguale a add-to-cart-btn (oppure Click Classes contiene btn-primary).
• Nota: se il pulsante non ha ID/Class, usa un selettore CSS come button[data-action='add-to-cart'].

Collega il tag evento GA4

• Crea un nuovo tag → Seleziona GA4 Event → imposta il nome dell’evento su add_to_cart.
• Aggiungi parametri: inserisci manualmente le info del prodotto nella sezione “Event Parameters” (devi prima catturarle tramite variabili – vedi sotto l’esempio di passaggio dei parametri).

Metodo 2: Evento nel Data Layer (tracciamento preciso, consigliato)

Push dell’evento lato frontend (serve lo sviluppatore)

Nel click del bottone “Aggiungi al carrello”, inserisci questo codice:

// Esempio in JavaScript puro
document.getElementById("add-to-cart-btn").addEventListener("click", function() {
  dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      items: [{
        item_id: "PRODUCT_123",  // obbligatorio
        item_name: "Smartwatch nuovo 2025",
        price: 299.99,
        item_category: "Elettronica"
      }]
    }
  });
});

Configurazione GTM

• Trigger: Crea nuovo → seleziona Custom Event → inserisci come nome evento add_to_cart.
• Tag: nel tag evento GA4, usa direttamente la variabile del data layer {{ecommerce}} per passare i parametri automaticamente.

Metodo 3: Integrazione nativa GA4 (solo per Shopify/WooCommerce)

Impostazioni nel pannello di Shopify

Vai nel pannello di Shopify → Negozio online → Preferenze → attiva Google Analytics 4 e abilita il tracciamento eCommerce avanzato.

GTM serve solo per inoltrare i dati

Nessun trigger necessario! GA4 rileva automaticamente l’evento “aggiungi al carrello”, quindi in GTM serve solo il tag base di configurazione GA4.

Test e verifica (fondamentale!)

Modalità Anteprima GTM

Prima di pubblicare il container, clicca su “Anteprima” in alto a destra in GTM → apri il sito → clicca sul pulsante “Aggiungi al carrello”.

Segnali che tutto funziona:

• Vedi l’evento add_to_cart nella finestra di debug.
• Controlla che i parametri nel data layer vengano passati correttamente (come mostrato nell’immagine sotto).

Report in tempo reale di GA4

• Accedi a GA4 → Report in tempo reale → verifica che l’evento add_to_cart sia presente e controlla i parametri (es. price).

Problemi comuni e soluzioni rapide

• Nessun dato? → Controlla se il codice GTM è installato correttamente sul sito e se le condizioni del trigger sono troppo restrittive.
• Mancano parametri? → Assicurati che la variabile del data layer sia attivata nella sezione “Variabili” di GTM (spunta “ecommerce”).

Esempio di passaggio parametri (avanzato – Metodo 2)

Cattura dinamicamente le info del prodotto nel tag GA4:

Crea una variabile in GTM:

Tipo variabile → Variabile Data Layer → nome variabile: ecommerce.items.0.item_id (ID del prodotto)

Configurazione parametri nel tag GA4:

event_name: add_to_cart  
parameters:  
  item_id: {{dlv - ecommerce.items.0.item_id}}  
  item_name: {{dlv - ecommerce.items.0.item_name}}  
  currency: USD  
  value: {{dlv - ecommerce.items.0.price}}  

(dlv sta per Data Layer Variable)

Il trigger non funziona? Ecco cosa controllare

Se i dati non appaiono nel report GA4, spesso il problema è un conflitto nelle regole, un evento mancante nel data layer o un problema di permessi – con i nostri suggerimenti lo risolvi in 10 minuti.

Verifica che l’evento nel data layer sia stato inviato

Come fare:

• Apri la console del browser (F12), digita dataLayer e premi invio, poi clicca sul bottone “Aggiungi al carrello” e verifica che l’evento add_to_cart appaia.

Errori comuni:

• Errore di scrittura del nome evento: add_to_cart (corretto) vs addToCart (errato)
• Evento clic non collegato: il bottone non ha un listener JavaScript.

Esempio di correzione：

// Codice corretto per l'invio dell'evento
document.querySelector("#cart-button").addEventListener("click", function() {  
  dataLayer.push({ event: "add_to_cart" });  
});  

Verifica la logica di configurazione del trigger

Operazioni：

• Entra nella modalità anteprima di GTM, clicca sul pulsante e controlla lo stato di attivazione del trigger nel pannello di debug.

Punti chiave：

• Assicurati che il tipo di trigger sia corretto (ad esempio, per un click usa “All Elements”).
• Controlla se le condizioni di attivazione sono troppo restrittive (es. percorso impostato su /product/ ma la pagina reale è /products/).

Conferma il mapping dei parametri del tag GA4

Operazioni：

• Controlla nel report in tempo reale di GA4 se l’evento add_to_cart viene ricevuto e se i parametri (come item_id) sono corretti.

Esempio di errore：

• Il dataLayer invia product_id, ma nel tag GA4 è impostato item_id, causando la perdita di dati.

Cosa fare se i dati sono in ritardo o mancanti?

Il contenitore GTM non si carica

Controlli da fare：

• Usa lo strumento Google Tag Assistant per verificare che il contenitore si carichi su tutte le pagine.

Esempio di correzione：

• Posiziona il codice GTM all’inizio del <head> per evitare che venga bloccato da script di terze parti.
• Carica lo script in modo asincrono:

<!-- Snippet consigliato da Google -->  
<script async src="https://www.googletagmanager.com/gtm.js"></script>  

Le richieste di rete vengono bloccate

Operazioni：

• Apri la console del browser, vai nella scheda “Network”, filtra le richieste collect?v=2 (endpoint GA4) e controlla il codice di stato.

Problemi comuni：

• Estensioni di blocco pubblicità: strumenti come uBlock Origin possono bloccare le richieste di tracciamento.
• Firewall aziendali: alcune reti aziendali bloccano domini come www.google-analytics.com.

Ritardo nell’elaborazione dei dati GA4

Attenzione：

• GA4 ha un ritardo predefinito nell’elaborazione dei dati di 24-48 ore. Il report in tempo reale mostra solo una parte dei dati.

Piano d’emergenza：

• Invia gli eventi a BigQuery in parallelo tramite GTM, così puoi avere un backup in tempo reale dei dati grezzi.

Come distinguere gli eventi “aggiungi al carrello” e “inizia il checkout”?

Standardizzazione dei nomi degli eventi

Regole：

• add_to_cart: usalo solo quando l’utente clicca il pulsante “aggiungi al carrello”.
• begin_checkout: si attiva quando l’utente entra nella pagina di checkout.

Esempio di data layer：

// Evento aggiunta al carrello
dataLayer.push({ event: "add_to_cart", ... });  
// Evento inizio checkout
dataLayer.push({ event: "begin_checkout", ... });  

Progettazione dei parametri differenziati

Configurazione dei tag in GA4：

• Aggiungi parametri specifici all’evento begin_checkout, come payment_method (metodo di pagamento) e shipping_type (tipo di spedizione).

Esempio：

// Parametri dell'evento di checkout
{  
  "event": "begin_checkout",  
  "items": [...],  
  "payment_method": "credit_card",  
  "coupon_code": "SUMMER2025"  
}  

Filtraggio con dimensioni personalizzate

Operazioni：

• Crea una dimensione personalizzata chiamata “tipo di evento” in GA4, e usala per distinguere i due tipi di eventi tramite filtri.

Mapping del codice：

// Evento aggiunta al carrello con dimensione personalizzata
dataLayer.push({  
  event: "add_to_cart",  
  custom_dimensions: { event_type: "cart_add" }  
});