Guida su come tracciare l’E-Commerce con Google Analytics 4 in Google Tag Manager

[AGGIORNATO 20/04/2023]

In questo articolo vedremo insieme come configurare il nostro e-commerce per il tracciamento con Google Analytics 4.

In altre parole, vedremo come possiamo passare dal tracciamento tradizionale dell’E-commerce avanzato (o Enhanced E-Commerce), al nuovo tracciamento per l’e-commerce previsto da Google Analytics 4 (in questo caso, non si chiama più Enhanced E-commerce, ma semplicemente E-commerce).

Perché dovrei passare a Google Analytics 4?

Si tratta di un’operazione fondamentale per quattro ottimi motivi:

- in seguito al provvedimento del Garante Privacy italiano che ha dichiarato illecita l’implementazione di Google Universal Analytics (GA3) su un sito web, è necessario eliminare il prima possibile la proprietà di GA3 dai propri progetti web e passare subito a GA4

- la gestione “tradizionale” dell’e-commerce, che prevedeva la configurazione dell’E-commerce avanzato su Universal Analytics (la versione di Google Analytics precedente a GA4), è destinata ad essere progressivamente sostituita dal nuovo tracciamento basato su Google Analytics 4. In altre parole, il tracciamento “tradizionale” dell’e-commerce, prima o poi, smetterà di funzionare

- la nuova gestione dell’e-commerce con GA4, che diversamente dalle precedenti si può realizzare tramite un Template (o Modello, in italiano), permette di superare il tradizionale modello di tracking basato sulle sessioni, sostituendolo con un modello basato sugli eventi. In questo modo i nostri tracciamenti possono essere molto più accurati di prima, perchè nel nuovo GA4 ci sono molti più eventi presenti rispetto al Google Analytics “tradizionale” (Universal Analytics)

- l’utilizzo di GA4 ci permette di iniziare ad utilizzare i modelli di machine learning di Google, che sono in grado di prevedere le azioni future dei nostri utenti (es. gli acquisti che faranno attraverso una Predictive Custom Audience), analizzando i dati legati al loro comportamento: si tratta di una tecnologia ancora in beta ma già utilizzabile, che ti consiglio assolutamente di provare.

(Nel mio ultimo libro su GA4 “Google Analytics 4 per chi inizia” troverai un intero capitolo (il Capitolo 8) dedicato a come tracciare l’E-commerce in GA4)

Premessa

Per gestire al meglio il tracking, utilizzeremo l’apposito Template (Modello) che ho realizzato a questo scopo. Lo puoi trovare nella Galleria ufficiale di Google Tag Manager a questo link: https://tagmanager.google.com/gallery/#/owners/matteo-zambon-gtm/templates/EEC-dataLayer-Builder-for-GA4

Come ti ho anticipato, GA4 è basato sugli eventi. Puoi trovare l’elenco degli eventi gestiti da GA4 nella guida ufficiale:

La buona notizia è che è possibile riutilizzare alcune delle azioni presenti nell’Enhanced E-commerce di Google Universal Analytics e trasformarle nelle azioni di Google Analytics 4.

Facciamo chiarezza su questo punto. Creiamo una semplice tabella con l’elenco degli eventi di GA Universal Analytics nell’Enhanced E-Commerce (EEC per gli amici) nella prima colonna e l’elenco degli eventi di Google Analytics 4 nella seconda colonna:

“Ohi, ma che sono tutti quei colori?”

Ora te lo spiego 🙂

- - - Gli eventi in verde sono gestiti automaticamente dal mio Template (Modello), quindi non servono configurazioni ulteriori
    - Gli eventi in giallo avranno bisogno di una configurazione specifica della variabile. Nel dettaglio va configurato il numero dello step dell’evento checkout di Google Universal Analytics. Quello indicato tra parentesi nell’immagine sopra è il numero di default che il Template attribuisce (naturalmente lo puoi cambiare, se l’azione di GA4 corrisponde a un numero di step diverso)
    - L’evento in rosso, ahimè, al momento non viene gestito dal mio Template. Questo perchè la gestione dell’azione wishlist non è presente nel “tradizionale” Google Universal Analytics.

Bene, fatta questa bellissima premessa ora andiamo a configurare il tutto 🙂

Step 1 – Importa il Template (modello) variabile EEC dataLayer Builder for GA4

Importa il template (modello) variabile “EEC dataLayer Builder for GA4” che trovi nella Galleria. È più semplice farlo che spiegarlo 😀

Per farlo ti basterà seguire questi passaggi:

- - - Menù Modelli > Cerca nella Galleria su Variable Templates
    - Cerca e Importa “EEC dataLayer Builder for GA4“

Ecco come dovresti vederlo:

Ottimo, ora non ci resta che usare questo Template per creare due variabili personalizzate.

Step 2 – Crea le due variabili personalizzate per GA4

Ora dovrai creare due variabili personalizzate che ti permetteranno di gestire in modo semplice e automatico:

- - - il nome dell’evento e-commerce, ossia GA4 – Event Name
    - l’oggetto items che contiene tutti i parametri, ossia GA4 – Items

Configura la variabile GA4 – Event Name

GA4 – Event Name ha lo scopo di identificare in maniera univoca il nome dell’evento standard da passare a GA4 per quanto riguarda il tracciamento e-commerce.

Ecco come fare:

- - - Vai su Variabili > Variabili definite dall’utente (User-Defined Variables)
    - Clicca su Nuovo e scegli EEC dataLayer Builder for GA4
    - Sulla listbox Mode seleziona Event Name
    - Checkout Events > inserisci i numeri degli step di checkout che corrisponderanno a begin_checkout, add_shipping_info e add_payment_info
    - View Cart Event: se vuoi tracciarlo selezionalo e inserisci il numero dello step
    - Nome variabile: GA4 – Event Name
    - Salva

Nel mio caso ho messo come valori dello step:

- - - 1 = view_cart (di default non è abilitato)
    - 2 = begin_checkout (di default lo step è 1)
    - 3 = add_shipping_info (di default lo step è 2)
    - 4 = add_payment_info (di default lo step è 3)

Configura la variabile GA4 – Items

GA4 – Items ha lo scopo di gestire l’oggetto items che conterrà tutte le informazioni necessarie per GA4.

Nel dettaglio gestirà due possibili casistiche:

- - - prima casistica: il push nel dataLayer con la struttura dell’Enhanced Ecommerce di Google Universal Analytics
    - seconda casistica: il push nel dataLayer con la nuova struttura di Ecommerce di Google Analytics 4

Grazie alla gestione di queste due casistiche, con questa variabile avrai sempre la struttura adatta per Google Analytics 4 🙂

Ecco i passaggi da seguire per la configurazione:

- - - Vai su Variabili > Variabili definite dall’utente (User-Defined Variables)
    - Clicca su Nuovo e scegli > EEC dataLayer Builder for GA4
    - Sulla listbox Mode seleziona Items
    - Su Default Currency value: EUR (questo serve per inserire la valuta di default nel caso non ci fosse nella struttura del dataLayer)
    - Nome variabile: GA4 – Items
    - Salva

Step 3 – Crea le variabili del dataLayer per il purchase e il refund

Purtroppo la struttura dell’evento purchase (acquisto) e refund (reso) deve gestire una serie di parametri – sette per la precisione – che sono al di fuori dell’oggetto items.

Nel dettaglio i sette parametri da gestire sono:

- - - transaction_id
    - affiliation
    - value
    - tax
    - shipping
    - currency
    - coupon

Questi parametri sono tutti all’interno del dataLayer di GTM in posizioni diverse a seconda del fatto che il push sia stato fatto per Google Universal Analytics o Google Analytics 4.

Se volessi gestirli entrambi (ma si tratta di un caso davvero improbabile) allora dovresti creare 14 variabili di tipo livello dati (dataLayer variable) in GTM.

Prima casistica (gestione di Google Universal Analytics)

Poniamo il caso che tu debba gestire solo il dataLayer dell’Enhanced Ecommerce di Google Universal Analytics (si tratta della prima delle due casistiche di cui ti ho parlato prima).

Iniziamo creando una Variabile per ciascuno dei sette parametri. Ecco come fare:

- - - Vai in Google Tag Manager > Variabili > Variabili definite dall’utente > Nuova > Configurazione variabile.
    - Tipo di variabile: Variabile di livello dati.
    - Nome variabile di livello dati: ecommerce.purchase.actionField.revenue
    - Versione livello dati: Versione 2.
    - Nomina la Variabile “dlv – ecommerce.purchase.actionField.revenue” e salvala.

La configurazione deve essere questa:

Bene, ora non ti resta che ripetere questa operazione per 6 volte, cambiando il valore in rosso per le altre variabili con:

- - - ecommerce.purchase.actionField.affiliation
    - ecommerce.purchase.actionField.coupon
    - ecommerce.purchase.actionField.id
    - ecommerce.purchase.actionField.shipping
    - ecommerce.purchase.actionField.tax
    - ecommerce.currencyCode

Rinomina tutte le variabili mettendo un semplice prefisso: “dlv – ” davanti.

Fai attenzione alla variabile ecommerce.currencyCode

Questo parametro è opzionale in Google Universal Analytics, ma è obbligatorio in Google Analytics 4. Se non viene passato in GA4, la transazione avrà dei problemi (ad esempio, non c’è transaction_id e la revenue della transazione).

Ti suggerisco caldamente di abilitare la spunta “Set Default Value” e di inserire “EUR” (se il tuo e-commerce ha la valuta Euro come valuta predefinita).

Se il tuo e-commerce gestisce anche il refund (reso), allora devi aggiungere un’ottava variabile, dal nome

- - - ecommerce.refund.actionField.id

Una volta fatta questa operazione, dovresti avere una lista di questo tipo:

Seconda casistica (gestione di Google Analytics 4)

Nella seconda casistica che ti ho descritto sopra, relativa alla gestione degli eventi di GA4, devi creare esclusivamente le variabili relative alla gestione di GA4.

(In questo caso, il push nel dataLayer sta già passando l’oggetto items.)

Di conseguenza, le sette variabili dataLayer da creare sono:

- - - ecommerce.affiliation
    - ecommerce.coupon
    - ecommerce.currency
    - ecommerce.shipping
    - ecommerce.tax
    - ecommerce.transaction_id
    - ecommerce.value

(Negli step successivi non considererò questa seconda casistica, ma farò riferimento esclusivamente alla prima casistica).

Step 4 – Crea gli attivatori per i Tag di GA4

Ora non ti resta che identificare il nome degli eventi presenti in Google Universal Analytics (dovresti già avere l’elenco se hai già implementato l’EEC di Google Analytics).

Tutto dipende da come l’Enhanced Ecommerce è stato implementato attraverso moduli/plugin nel tuo CMS (Woocommerce, Prestashop, Magento, Shopify, etc), oppure dal tuo sviluppatore, nel caso in cui il tuo Ecommerce sia stato sviluppato tramite una soluzione custom.

[NOTA] è possibile che alcuni push nel dataLayer per gestire azioni come: impression promo, detail, checkout o purchase, siano stati eseguiti prima dell’evento Container Loaded (ex Page View) di GTM e siano stati eseguiti senza aver dichiarato il nome dell’evento (P.S. bisognerebbe istituire una legge per punire con 10 frustate in ginocchio sui ceci chi non dichiara il nome dell’evento!). Il barbatrucco per gestire questa situazione (la gestione degli eventi “Message” nel debug di GTM) è utilizzare l’attivatore nativo di GTM “All Pages“.

Inoltre, se l’evento della transazione (purchase) è fatto PRIMA dell’evento Container Loaded, allora dovrai creare un attivatore negativo da mettere in eccezione al Tag di Google Analytics 4 che non gestisce la transazione (purchase), perché altrimenti attiveresti due eventi di tipo transazione (purchase). Non ti preoccupare, lo vedrai bene nello step 5.

Per comodità di gestione separeremo le azioni purchase e refund dal resto delle azioni (non mi è mai capitato di vedere l’azione refund configurata in Google Analytics).

In questo esempio useremo l’implementazione di WooCommerce con il plugin di Duracell Tomi.

Devi sapere che in questo caso, ci sono due azioni che non sono gestite con un evento specifico:

- - - detail (dettaglio del prodotto)
    - checkout (step 1 del checkout)

(Duracell Tomi, sappi che non appena entrerà in vigore la nuova legge, avanzi 10 frustate in ginocchio sui ceci!)

Crea l’Attivatore GA – EEC Events

L’intento è tracciare tutte le azioni dell’EEC di GA esclusi il purchase e refund

- - - Clicca su Attivatore > Nuovo > Configurazione attivatore.
    - Tipo di attivatore: Evento personalizzato.
    - Nome evento: gtm4wp.addProductToCartEEC|gtm4wp.checkoutStepEEC|gtm4wp.productClickEEC|gtm4wp.productImpressionEEC|gtm4wp.promoClickEEC|gtm4wp.promoImpressionEEC|gtm4wp.removeFromCartEEC
    - Flagga anche Utilizza la corrispondenza con espressione regolare.
    - Attiva su: Tutti gli eventi personalizzati.
    - Nome: “GA – EEC Events”
    - Salva.

Crea l’Attivatore GA – EEC Purchase

Qui l’intento è tracciare il purchase:

- - - Clicca su Attivatore > Nuovo > Configurazione attivatore.
    - Tipo di attivatore: Evento personalizzato.
    - Nome evento: gtm4wp.orderCompletedEEC
    - Attiva su: Tutti gli eventi personalizzati.
    - Nome: “GA – EEC Purchase”
    - Salva.

Bene, è stato più facile del previsto no? Passiamo ai Tag e abbiamo finito 🙂

Step 5 – Crea i Tag di Google Analytics 4

Ce l’abbiamo quasi fatta 😀

Crea la proprietà di Google Analytics 4 e il data stream del tuo sito

Probabilmente hai già creato la tua proprietà in Google Analytics 4 e il Data Stream del tuo sito.

Nel caso avessi dei dubbi ecco una piccola intro di Krista Seiden, che ci spiega come fare:

Recupera il tuo codice G-XXXXXXXX di Google Analytics 4 dal tuo data stream.

Nel mio caso il valore è: G-7CSDVRME94

Bene, passiamo ora alla creazione dei Tag:

Crea il Configuration Tag di GA4

Il Tag di Configurazione di Google Analytics 4 ci permetterà di gestire più facilmente gli eventi di GA4 nei Tag di tipo Event.

- - - Tipo di tag: Google Analytics: GA4 Configuration
    - Measurement ID: G-XXXXXXXXX
    - Attivatore: All Pages
    - Nome: GA4 – Configuration

Crea i due Tag GA4 Event per gestire il tracking dell’ecommerce

Siamo arrivati alla fine prima della verifica finale con il debug.

Attenzione agli attivatori. Come spiegato prima in rosso se non tutte le azioni dell’ecommerce sono gestite da un evento specifico e sono pushati prima di Container Loaded avremo bisogno di usare anche l’attivatore “All Pages“.

Inoltre se l’evento specifico della transazione (nel nostro caso sarà gtm4wp.orderCompletedEEC) viene pushato prima del Container Loaded come nell’immagine sotto

allora si dovrà mettere in eccezione un attivatore negativo universale al Tag GA4 – EEC.

Ecco l’attivatore negativo universale purchase.

- - - Clicca su Attivatore > Nuovo > Configurazione attivatore.
    - Tipo di attivatore: Evento personalizzato.
    - Nome evento: .*
    - Flagga anche Utilizza la corrispondenza con espressione regolare.
    - Attiva su: Alcuni eventi personalizzati.
    - Fire this trigger: GA4 – Event Name poi seleziona equals e scrivi purchase
    - Nome: “GA4 Event Name – Purchase”
    - Salva.

Quindi hai tre possibile casistiche, ovviamente dovrai scegliere quella più indicata alla tua situazione:

- - - caso A
      Seleziona come attivatore ► GA – EEC – Events
      Se ci sono dei push prima di Container Loaded che non sono gestiti da un evento specifico ► seleziona attivatore anche All Pages
      Se il tuo evento purchase viene pushato prima di Container Loaded ► crea l’attivatore negativo “GA4 Event Name – Purchase” e mettilo come eccezione
    - caso B
      Seleziona come attivatore ► GA – EEC – Events
      Se ci sono dei push prima di Container Loaded che non sono gestiti da un evento specifico ► seleziona attivatore anche All Pages
    - caso C
      Se tutti gli eventi sono dichiarati allora ti basta selezionare come attivatore ► GA – EEC – Events

Caso A

- - - Tipo di tag: Google Analytics: GA4 Event
    - Configuration Tag: scegli dalla lista > GA4 – Configuration
    - Event Name: scegli la variabile {{GA4 – Event Name}}
    - Event Parameters: clicca Add Row
      - Parameter Name: items
      - Value: scegli la variabile {{GA – Items}}
    - Attivatore: scegli l’attivatore GA – EEC – Events e poi All Pages
    - Attivatore in eccezione: scegli l’attivatore GA4 Event Name – Purchase
    - Nome: GA4 – EEC
    - Salva

Caso B

- - - Tipo di tag: Google Analytics: GA4 Event
    - Configuration Tag: scegli dalla lista > GA4 – Configuration
    - Event Name: scegli la variabile {{GA4 – Event Name}}
    - Event Parameters: clicca Add Row
      - Parameter Name: items
      - Value: scegli la variabile {{GA – Items}}
    - Attivatore: scegli l’attivatore GA – EEC – Events e poi All Pages
    - Nome: GA4 – EEC
    - Salva

Caso C

- - - Tipo di tag: Google Analytics: GA4 Event
    - Configuration Tag: scegli dalla lista > GA4 – Configuration
    - Event Name: scegli la variabile {{GA4 – Event Name}}
    - Event Parameters: clicca Add Row
      - Parameter Name: items
      - Value: scegli la variabile {{GA – Items}}
    - Attivatore: scegli l’attivatore GA – EEC – Events
    - Nome: GA4 – EEC
    - Salva

Il mio caso (quello di Woocommerce) è il caso A

Adesso creiamo il Tag per l’azione purchase perchè, come già menzionato prima, dobbiamo passare i sette parametri aggiuntivi.

- - - Tipo di tag: Google Analytics: GA4 Event
    - Configuration Tag: scegli dalla lista > GA4 – Configuration
    - Event Name: scegli la variabile {{GA4 – Event Name}}
    - Event Parameters: clicca Add Row
      - Parameter Name: items
      - Value: scegli la variabile {{GA – Items}}
    - Event Parameters: clicca Add Row
      - Parameter Name: transaction_id
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.id}}
    - Event Parameters: clicca Add Row
      - Parameter Name: affiliation
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.affiliation}}
    - Event Parameters: clicca Add Row
      - Parameter Name: tax
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.tax}}
    - Event Parameters: clicca Add Row
      - Parameter Name: shipping
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.shipping}}
    - Event Parameters: clicca Add Row
      - Parameter Name: coupon
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.coupon}}
    - Event Parameters: clicca Add Row
      - Parameter Name: value
      - Value: scegli la variabile {{dlv – ecommerce.purchase.actionField.revenue}}
    - Event Parameters: clicca Add Row
      - Parameter Name: currency
      - Value: scegli la variabile {{dlv – ecommerce.currencyCode}}
    - Attivatore: GA – EEC – Purchase
    - Nome: GA4 – EEC – Purchase
    - Salva

Ecco come dovrebbe essere:

Step 6 – Debug e verifica del funzionamento

Attiva il Preview di Debug di Google Tag Manager e vai a controllare se i Tag si attivano e gestiscono effettivamente i parametri in GA4 🙂

Come puoi vedere di seguito, le impression dei prodotti vengono gestite. Gli eventi numero 3 e 4 hanno il tag GA4 – EEC attivato:

Se clicchiamo il Tag e andiamo a vedere i Values, notiamo che sia il nome dell’evento view_item_list che i valori di items vengono gestiti correttamente:

Ora è il momento della prova finale: verifichiamo se Google Analytics 4 riceve effettivamente i valori. Per farlo ci basterà cambiare su Tag Assistant il codice di GTM in quello di GA4.

Ora vedrai tutte le Hit Sent in Google Analytics 4.

Nel dettaglio ho i valori 3, 4 e 5 che corrispondono all’evento di GA4:

- - - Page View
    - View Item List

E il purchase? Funziona pure quello 🙂

Verifica la transazione di GA4 con il GTM Debug

Vai nel debug di GTM e clicca l’icona G-XXXXXX in alto a sinistra del menù. Cerca l’evento purchase transaction e verifica che ci siano tutti questi parametri:

Conclusioni

Bene, ora non hai più scuse! Puoi tracciare il tuo e-commerce con Google Analytics 4 e iniziare a esplorare tutte le nuove funzionalità della nuova versione di Google Analytics.

Se hai dubbi o domande lasciami pure un commento 😉

Matteo Zambon