Ecommerce Tracking GA4 Shopify con Google Tag Manager
Devi realizzare il Tracking Google Analytics 4 (GA4) per un Ecommerce Shopify con Google Tag Manager? Ti starai chiedendo come generare il DataLayer per Google Tag Manager Shopify, e come pushare gli eventi relativi a GA4. Ecco la guida passo dopo passo di Fuel LAB.
Ecommerce Tracking GA4 con DataLayer con Google Tag Manager per Shopify.
-
1) Installazione del Container Google Tag Manager in theme.liquid
-
2) Data Layer evento Purchase su Shopify
-
3) Data Layer evento Add to Cart su Shopify
-
3) Data Layer per tutte le altre pagine di Shopify
-
5) Configurazione in Google Tag Manager dell’Ecommerce Tracking GA4
Installazione del Container Google Tag Manager in theme.liquid
Iniziamo con il creare il nostro container Google Tag Manager da utilizzare con il nostro store shopify. Se hai già inserito il Google Tag nel tuo file theme.liquid, devi prima di tutto rimuoverlo; altrimenti, invierai hit duplicati al tuo data stream. Inserisci quindi nel file “theme.liquid” il seguente codice, sostituendo “ESEMPIO” con l’ID del tuo container GTM. Devi posizionare lo script subito dopo l’apertura del tag <head> del file theme.liquid.
Creiamo il Data Layer per l’evento Purchase in Shopify
Dal momento che Shopify standard non ci permette di modificare la pagina di checkout, passiamo direttamente all’evento di acquisto. Vedremo successivamente come recuperare gli altri eventi. Rechiamoci su “Impostazioni” e “Check-out”, scrolliamo verso il basso fino a trovare l’area “Script aggiuntivi”. Ancora una volta, rimpiazza il valore “ESEMPIO” con l’ID del tuo container Google Tag Manager.
Creiamo l’evento Data Layer per l’evento Add to Cart
Dal momento che la funzione Add to Cart dipende interamente dal tuo tema, dovrai posizionarti nella modifica del codice nel file che contiene il pulsante “aggiungi al carrello”. Nel nostro caso il pulsante si trova dentro a “main-product.liquid“; ecco nell’immagine qua sotto dove abbiamo inserito la call “onclick”, subito prima dell’apice di chiusura del pulsante. Una volta localizzato il pulsante, aggiungi ad esso questo codice:
Creazione del DataLayer per tutte le pagine di Shopify
A questo punto andiamo a creare l’ultima istruzione DataLayer per informare Google Tag Manager di ulteriori parametri di pagina, che ci saranno utili per esempio per popolare di parametri utili gli eventi “view_item” o “select_item“. Per fare questo, dovrai creare un nuovo snippet di codice in Shopify. Vai nella sezione “modifica codice” e crea un nuovo Frammento di codice. Assegna il seguente nome allo snippet: “fuellab-product-datalayer” Una volta aperta la finestra di dialogo del codice, incolla il DataLayer che Fuel LAB ha preparato per te.
Tutto finito? Quasi. Ora torna nel file “theme.liquid” e aggiungi questa riga di codice subito prima della chiusura del tag </head> .
Configurazione dell’Ecommerce Tracking in Google Tag manager per Shopify
Ora siamo pronti per iniziare il lavoro lato Google Tag Manager; per prima cosa dovresti aver già attivato il tag standard di GA4 per le visualizzazioni di pagina. Ora, creiamo tutte le variabili Data Layer che ci serve reperire in GTM.
| Nome | Data Layer Variable |
|---|---|
| Ecommerce Items | ecommerce.items |
| Ecommerce Transaction ID | ecommerce.transaction_id |
| Ecommerce Value | ecommerce.value |
| Ecommerce Tax | ecommerce.tax |
| Ecommerce Shipping | ecommerce.shipping |
| Ecommerce Currency | ecommerce.currency |
| Ecommerce Brand | brand |
| Ecommerce Category | category |
| Ecommerce Item Name | item_name |
| Ecommerce Item Type | item_type |
| Ecommerce SKU | SKU |
| Ecommerce UserType | userType |
| Ecommerce Variant | variant |
| Ecommerce Variant ID | variant_ID |
Creiamo ora il Tag Evento “Purchase” per GA4.
Creiamo ora il Trigger per il Tag Evento “Purchase” per GA4.
Creiamo ora il Tag Evento “Add to Cart” per GA4.
Creiamo ora il Trigger per il Tag Evento “Add to Cart” per GA4.
Creiamo ora il Tag Evento “View Item” per GA4.
Creiamo ora il Trigger per il Tag Evento “View Item” per GA4.
Nel caso di questo ecommerce, ogni singola pagina di prodotto contiene nell’url sia i frammenti “collections” che “products”; creiamo quindi un tag che si basi sul dom ready o window loaded che contengano questi frammenti nell’url; attenzione: ti sconsiglio di usare “pageview” come attivatore, in quanto spesso su shopify il pageview scatta prima che il DataLayer abbia avuto il tempo di popolare i proprio valori.
In questo passaggio:
“Tutto finito? Quasi. Ora torna nel file “theme.liquid” e aggiungi questa riga di codice subito prima della chiusura del tag .”
Quale sarebbe la riga ?
Ciao!
A volte i gist di github non caricano, prova a visitare la pagina da incognito. Abbiamo controllato e dopo aver vuotato le cache, dovrebbe caricare tutti i box di codice. Grazie di aver segnalato il problema!
Buongiorno ho fatto tutto come la guida… all’inizio funzionava ma vedevo purchase doppi sia da analytics che dal debug di tag manager. Oggi mi sono accorto che non viene letto il datalayer e non scattano gli eventi.