Data layer: cos’è e come si usa in un e-commerce

Come è fatto un data layer?

È una lista JavaScript a cui il sito aggiunge messaggi. Ogni messaggio è un gruppo di coppie nome e valore, e il campo event dice al contenitore che è successo qualcosa. Ecco cosa scrive un negozio di esempio quando un visitatore aggiunge due zaini al carrello:

window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    currency: "EUR",
    value: 50.00,
    items: [{
      item_id: "SKU-123",
      item_name: "Zaino di esempio",
      price: 25.00,
      quantity: 2
    }]
  }
});

Leggiamolo riga per riga, con numeri inventati per l’esempio.

• La prima riga crea la lista, oppure riusa quella che già esiste: non cancella niente.
• La seconda svuota l’oggetto e-commerce del messaggio precedente, come indica Google per evitare che i dati vecchi si mescolino ai nuovi.
• Il campo event è ciò che un attivatore può ascoltare.
• Il campo value è prezzo per quantità: 25 € × 2 = 50 €.
• Il blocco items descrive ogni articolo coinvolto.

I punti nei decimali non sono un errore: nel codice si scrive 50.00, con il punto, anche se in un testo italiano scriveresti 50,00 €. La forma con la virgola, nel codice, non funziona.

Perché leggere i dati dalla pagina è fragile?

Perché la pagina cambia per motivi che con i tracciamenti non hanno niente a che fare. Un contenitore può prendere il prezzo da un elemento della scheda prodotto, con un selettore che indica dove si trova. Funziona fino al giorno in cui qualcuno rinnova la grafica.

Situazione	Dato letto dalla pagina	Dato dal data layer
Cambio di tema	Il selettore non trova più il prezzo	Resta uguale
Prezzo scontato in pagina	Può prendere quello barrato	Il sito scrive il prezzo giusto
Formato «1.250,00 €»	Va ripulito e convertito in numero	Arriva già come numero
Numero d’ordine	Spesso non è visibile, o è dentro un testo	Arriva dal gestionale del negozio
Varianti	Va capito quale è selezionata	Il sito lo sa già

Il guaio è che l’errore non si annuncia. Il tag continua a partire e GA4 continua a ricevere eventi, solo con un valore vuoto o sbagliato. Lo scopri quando i ricavi nei report non tornano, e a quel punto le campagne stanno già decidendo su quei numeri. È il motivo per cui il data layer viene prima dei tag nell’ordine dei lavori di un tracciamento.

Che cosa deve contenere in un e-commerce?

Le informazioni che ogni pagina conosce già e che i tag dovrebbero indovinare. La tabella indica cosa aspettarsi a ogni passo, con i nomi degli eventi raccomandati da Google.

Pagina o azione	Evento	Dati da inserire
Elenco di categoria	view_item_list	Articoli mostrati e nome dell’elenco
Scheda prodotto	view_item	Codice, nome, prezzo, variante, valuta
Aggiunta al carrello	add_to_cart	Articolo, quantità, valore, valuta
Inizio del pagamento	begin_checkout	Tutti gli articoli, valore, valuta, coupon
Conferma d’ordine	purchase	Numero d’ordine, valore, valuta, tasse, spedizione, articoli

L’elenco completo, con i parametri obbligatori, è nell’articolo sugli eventi e-commerce di GA4. Per l’ordine concluso c’è una guida a parte sull’evento purchase.

Due scelte vanno fatte prima di scrivere il codice:

• Il codice articolo. Usa lo stesso del feed e del gestionale: con un codice comune puoi legare poi vendite, annunci e costi dello stesso prodotto.
• Il prezzo. Per GA4 è il prezzo unitario scontato, e lo sconto per unità ha un campo a parte. Decidi anche se è senza IVA, e tieni la stessa regola in tutti gli eventi.

Quali regole non vanno mai violate?

Sono poche, e chi le ignora si ritrova con tag che smettono di partire. Vengono tutte dalla documentazione di Google.

1. Il nome è sensibile alle maiuscole. datalayer.push non funziona: si scrive dataLayer.push.
2. Non riassegnarlo mai. Scrivere window.dataLayer = [] dopo il caricamento del contenitore può far perdere i dati e bloccare i tag.
3. Un solo oggetto per pagina. Contenitori e tag Google condividono la stessa lista.
4. Stessi nomi ovunque. Se in una pagina scrivi visitorType e in un’altra visitor_type, le regole si comportano in modo diverso.
5. L’ordine conta. Ciò che deve essere pronto al caricamento del contenitore va scritto prima del suo codice.

Attenzione anche all’ultimo valore: se una variabile con lo stesso nome esiste già, il valore nuovo sostituisce il vecchio, ma un oggetto come ecommerce può conservare campi del valore precedente che non vengono riscritti. È il motivo per cui la guida e-commerce di GA4, in ogni esempio, svuota l’oggetto e-commerce prima di ogni evento.

Come leggi il data layer dentro Google Tag Manager?

Con due pezzi: un attivatore di tipo evento personalizzato (Custom Event) e una variabile di livello dati (Data Layer Variable). L’attivatore ascolta il nome scritto in event. La variabile prende un valore indicando il percorso, per esempio ecommerce.value. Si crea da qui, scegliendo il tipo Livello dati:

Per gli eventi di GA4 è ancora più comodo. Nel tag di evento puoi attivare l’invio dei dati e-commerce (Send Ecommerce data) e scegliere il data layer come origine (Data Layer): articoli, valore e valuta vengono letti da lì, senza una variabile per ogni parametro. Il significato di tag, attivatori e variabili è spiegato in che cos’è Google Tag Manager.

Come controlli che i dati siano giusti?

Con l’anteprima, senza scrivere una riga. Il controllo richiede pochi minuti ed è da ripetere a ogni cambio di tema o di plugin.

1. Avvia l’anteprima del contenitore e apri il sito.
2. Compi un’azione, per esempio l’aggiunta al carrello.
3. In Tag Assistant seleziona l’evento nel riepilogo a sinistra e apri la scheda del data layer.
4. Confronta i valori con quello che vedi sul sito: quantità, prezzo, codice.
5. Prova anche un caso scomodo: uno sconto, una variante, due quantità.

Se vuoi guardare dentro senza anteprima, nella console degli strumenti per sviluppatori del browser scrivi dataLayer e leggi la lista dei messaggi.

Un prodotto con il valore sbagliato qui diventa un ricavo sbagliato in tutti i report. Per questo la configurazione client side parte proprio dalla provenienza di ogni dato, prima ancora di toccare i tag. Se il negozio è su WooCommerce, l’articolo sul tracciamento con plugin o codice ti aiuta a capire chi può scrivere questi messaggi per te.

Domande frequenti

Fonti

• Google Tag Manager: il data layer
• Google Analytics: misurare l'e-commerce con Google Tag Manager
• Google Analytics: riferimento degli eventi
• Tag Manager: i componenti di Google Tag Manager
• Tag Manager: le variabili definite dall'utente
• Tag Manager: l'attivatore evento personalizzato