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.

 

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:

Dove inserire il codice data layer add to cart in shopify per l'ecommerce tracking ga4

       

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.

NomeData Layer Variable
Ecommerce Itemsecommerce.items
Ecommerce Transaction IDecommerce.transaction_id
Ecommerce Valueecommerce.value
Ecommerce Taxecommerce.tax
Ecommerce Shippingecommerce.shipping
Ecommerce Currencyecommerce.currency
Ecommerce Brandbrand
Ecommerce Categorycategory
Ecommerce Item Nameitem_name
Ecommerce Item Typeitem_type
Ecommerce SKUSKU
Ecommerce UserTypeuserType
Ecommerce Variantvariant
Ecommerce Variant IDvariant_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.

Configurazione dell'evento add to cart per il ecommerce tracking ga4 su shopify

Creiamo ora il Trigger per il Tag Evento “Add to Cart” per GA4.

Creiamo ora il Tag Evento “View Item” per GA4.

configurare evento view item per l'ecommerce tracking ga4 per shopify

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.

Configurazione del trigger per l'evento view_item nell'ecommerce tracking ga4 di shopify

Ti è piaciuto questo articolo? Hai domande o vuoi proporre qualche cambiamento? Lascia un commento, siamo sempre felici di discuterne con la nostra community!