Come impostare il monitoraggio eCommerce GA4 su Shopify? Guida passo passo

Pubblicato: 2022-09-13
  • Come installare Google Tag Manager (GTM) su Shopify?
    • Fase uno: aggiungi il codice del contenitore GTM e lo script dei dettagli del cliente a theme.liquid in <head>.
    • Fase due: aggiungi il codice del contenitore GTM e lo script dei dettagli del cliente alla pagina di pagamento.
  • Crea variabile di livello dati su GTM
  • Crea tag di visualizzazione pagina GA4 su GTM
  • Tieni traccia di view_item e acquista come evento e passa l'ambito dell'utente oltre ai dettagli relativi al prodotto a GA4
    • Fase uno: aggiungi il livello dati view_item su Shopify.
    • Fase due: creazione del trigger GTM per l'evento view_item e acquisto.
    • Fase tre: creare tag GTM.
  • Scarica la ricetta GTM

Come installare Google Tag Manager (GTM) su Shopify?

Fase uno: aggiungi il codice del contenitore GTM e lo script dei dettagli del cliente a theme.liquid in <head>.

  1. Accedi al tuo account Gmail.
  2. Vai a Google Tag Manager.
  3. Seleziona l'account GTM corretto .
  4. Fare clic sull'ID del contenitore GTM.
  5. Copia il primo script del codice contenitore GTM che include le istruzioni per incollare il codice nella sezione <head>.
  6. Accedi al tuo negozio Shopify e fai clic su Temi in Negozio online sul lato sinistro del pannello di navigazione.
  7. Fai clic su Modifica codice nel menu a discesa Azioni .
  8. Fare clic su theme.liquid in Layout.
  9. Incolla il codice del contenitore GTM copiato (al passaggio 5) il più in alto possibile nell'<head> della pagina.
  10. Copia lo script dei dettagli del cliente riportato di seguito e incollalo nella sezione <head>, sopra il codice del contenitore GTM .
  11. Fai clic su Salva su theme.liquid verso l'angolo in alto a destra.

Passaggio 1: accedi al tuo account Gmail.

Passaggio 2: vai su Google Tag Manager seguendo questo link: https://tagmanager.google.com/

Passaggio 3: seleziona l'account GTM corretto

Select the correct GTM account

Passaggio 4: fare clic sull'ID del contenitore GTM

GTM - click on the container id

Passaggio 5: copia il primo script del codice contenitore GTM che include le istruzioni per incollare il codice nella sezione <head> .

copy the GTM container code

Passaggio 6: ora accedi al tuo negozio Shopify e fai clic su Temi in Negozio online nel pannello di navigazione a sinistra.

select themes under online store

Passaggio 7: fai clic su Modifica codice nel menu a discesa Azioni .

Click on Edit code under Actions drop down

Passaggio 8: fare clic su theme.liquid in Layout.

Click on theme.liquid

Passaggio 9: incolla il codice del contenitore GTM copiato (al passaggio 5) il più in alto possibile nella <head> della pagina.

Passaggio 10: copia il seguente script dei dettagli del cliente. Ora, incollalo nella sezione <head> sopra il codice del contenitore GTM, come mostrato nell'immagine sottostante. Questo script aiuterà a passare i dati con ambito USER a GA4.

copia

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{% se cliente %}
userType: "membro",
cliente: {
id: {{ customer.id }},
lastOrder: "{{ customer.orders.first.created_at | date: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% for item in customer.orders %}{% assign total_spent = total_spent | più: item.total_net_amount %}{% endfor %}{{ total_spent | denaro_senza_valuta | rimuovi:"," }}{% else %}""{% endif %},
tag: {{- customer.tags | json -}}
},
{% altro %}
userType: "visitatore",
cliente: {
id: "",
ultimo ordine: "",
Conteggio ordini: "",
spesa totale: "",
tag: ""
},
{% finisci se %}
});
</script>

User data script above the GTM code

Passaggio 11: fai clic su Salva su theme.liquid verso l'angolo in alto a destra.

Click save on theme.liquid

Ben fatto !!

Hai terminato la prima fase di aggiunta del codice contenitore GTM a Shopify. Successivamente, dovrai aggiungere il codice del contenitore GTM , lo script dei dettagli del cliente e acquistare il livello dati nella pagina di pagamento.

Fase due: aggiungi il codice del contenitore GTM e lo script dei dettagli del cliente e acquista il livello dati alla pagina di pagamento.

  1. Sull'amministratore del negozio Shopify, fai clic su Impostazioni nell'angolo in basso a sinistra.
  2. Fare clic su Cassa e account
  3. Scorri verso il basso e cerca gli script aggiuntivi sotto l'ordine nel blocco di stato.
  4. Incolla prima il codice del contenitore GTM. Ora, copia il seguente script dei dettagli del cliente e incollalo sopra il codice del contenitore GTM.
  5. Copia e incolla il seguente livello dati di acquisto tra lo script dei dettagli del cliente e il codice del contenitore GTM.

Passaggio 1: nell'amministratore del negozio Shopify, fai clic su Impostazioni nell'angolo in basso a sinistra.

On Shopify admin click on Settings towards the laft hand side bottom corner

Passaggio 2: fai clic su Checkout e account.

Click on Checkout and accounts

Passaggio 3: scorri verso il basso e cerca gli script aggiuntivi sotto l'ordine nel blocco di stato.

Scroll Down and below Order Status block look for the Additional Scripts

Passaggio 4: incolla prima il codice del contenitore GTM. Ora, copia il seguente script dei dettagli del cliente e incollalo sopra il codice del contenitore GTM.

Paste the GTM container code first and above the GTM container code paste the customer details script

Passaggio 5: copia e incolla il seguente livello dati di acquisto tra lo script dei dettagli del cliente e il codice del contenitore GTM.

copia

 <script>{% se il primo_accesso_%}
window.dataLayer.push({
'tipo_pagina': 'acquisto',
'evento': 'acquisto', /* crea un evento personalizzato in GTM */
'transaction_id': '{{ nome.ordine || order.order_number }}',
'totalValue': {{ prezzo_totale | denaro_senza_valuta | remove:',' }}, // Include tasse e spedizione
'subtotalValue': {{ subtotal_price | denaro_senza_valuta | rimuovi:',' }},
'tasse': {{ prezzo_imposta | denaro_senza_valuta | rimuovi:',' }},
'spedizione': {{ prezzo_spedizione | denaro_senza_valuta | rimuovi:',' }},
'currency': '{{ shop.currency }}',
'tipo_pagamento': '{{ order.transactions[0].gateway }}', //parametro opzionale
'e-commerce': {
'checkout_currency': '{{ checkout.currency }}', 
'valore': '{{ checkout.total_price | denaro_senza_valuta | remove:',' }}', // totale dell'ordine (prezzo di tutti i prodotti + spedizione)
'tasse': '{{ checkout.tax_price | denaro_senza_valuta | rimuovi:',' }}', // tasse
'spedizione':'{{ checkout.shipping_price | denaro_senza_valuta | rimuovi:',' }}', // costi di spedizione
'transaction_id': '{{ transazioni[0].id }}', // ID transazione
'Oggetti': [
{% per line_item in line_items %}
{
'nome_oggetto': '{{ line_item.product.title | sostituire: "'","##@@[email protetta]@##" }}'.replace("##@@[email protetta]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'prezzo': {{ line_item.final_price | denaro_senza_valuta | rimuovi:',' }},
'item_brand': '{{ line_item.vendor }}',
'quantità': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% fine per %}
]
}
});
{% finisci se %}
</script>

Passaggio 6: fare clic su Salva nell'angolo in basso a destra.

Congratulazioni! Hai aggiunto con successo il codice contenitore GTM su Shopify. Ora continueremo e creeremo variabili di livello dati sul GTM prima di creare tag di visualizzazione pagina GA4. Quando il tag di visualizzazione della pagina viene caricato, queste variabili ci consentiranno di raccogliere e trasferire i dati con ambito utente a GA4.

Crea variabili di livello dati su GTM

  1. Fai clic su Variabili nel pannello di navigazione a sinistra su GTM.
  2. Fare clic su Nuovo in Variabili definite dall'utente.
  3. Fare clic ovunque su Configurazione variabile .
  4. Seleziona Variabile livello dati in Variabili di pagina.
  5. Assegna il nome della variabile del livello dati .
  6. Rinominare la variabile e fare clic su Salva.

Passaggio 1: fai clic su Variabili nel pannello di navigazione a sinistra su GTM.

Click on Variables on the left hand navigation panel

Passaggio 2: fare clic su Nuovo in Variabili definite dall'utente.

Click New under User Defined Variables

Passaggio 3: fare clic ovunque su Configurazione variabile.

Click anywhere on Variable configuration

Passaggio 4: seleziona Variabile livello dati in Variabili di pagina.

Select Data Layer variable under page variables

Passaggio 5: assegnare il nome della variabile del livello dati .

Data Layer Variable Name

Passaggio 6: rinomina la variabile e fai clic su Salva .

Rename the variable and click save

Seguendo i passaggi sopra menzionati, creare le variabili del livello dati menzionate di seguito.

Nome variabile del livello dati: Rinomina la variabile
ID utente “dlv – cliente – id – Variabile”
cliente.ultimo ordine “dlv – cliente – lastOrder – Variabile”
cliente.ordineCount “dlv – cliente – orderCount – Variabile”
tag.cliente “dlv – cliente – tag – Variabile”
cliente.totaleSpeso “dlv – cliente – totalSpent – ​​Variabile”
customer.userType “dlv – customer – userType – Variable”
evento “dlv – evento – Variabile”

Crea tag di visualizzazione pagina GA4 su GTM

  1. Vai su Google Analytics e seleziona la proprietà GA4. https://analytics.google.com/
  2. Fare clic sull'icona a forma di ingranaggio in basso a sinistra.
  3. Fare clic sul flusso di dati sotto il livello di proprietà.
  4. Seleziona il Web Stream e fai clic sulla freccia (>).
  5. Copia l'ID misurazione GA4.
  6. Vai a Google Tag Manager. https://tagmanager.google.com/
  7. Fare clic su Aggiungi un nuovo tag.
  8. Fare clic in un punto qualsiasi della configurazione del tag.
  9. Seleziona Google Analytics: Configurazione GA4.
  10. Incolla l'ID misurazione GA4 copiato in precedenza nella casella "ID misurazione".
  11. In Campi da impostare, fai clic sulla riga di aggiunta, quindi aggiungi il nome del campo e il relativo valore.
  12. In Proprietà utente, aggiungi quanto segue come Nome e Valore della proprietà.
  13. Fare clic in un punto qualsiasi del Triggering.
  14. Seleziona Tutte le pagine come trigger.
  15. Rinomina il tag e fai clic su Salva.

Passaggio 1: vai su Google Analytics e seleziona la proprietà GA4. https://analytics.google.com/

Passaggio 2: fare clic sull'icona a forma di ingranaggio in basso a sinistra.

Click on the Gear Icon bottom left hand

Passaggio 3: fare clic sui flussi di dati sotto il livello di proprietà.

Click on the Data Stream under property level

Passaggio 4: seleziona il Web Stream e fai clic sulla freccia (>)

Select the Web Stream and click click the arrow (>)

Passaggio 5: copia l'ID misurazione GA4.

Copy the GA4 Measurement ID

Passaggio 6: vai su Google Tag Manager. https://tagmanager.google.com/

Passaggio 7: fare clic su Aggiungi un nuovo tag.

Click On Add a new tag

Passaggio 8: fare clic in un punto qualsiasi della configurazione del tag.

Click anywhere on the tag configuration

Passaggio 9: seleziona Google Analytics: configurazione GA4.

Select Google Analytics: GA4 Configuration

Passaggio 10: incollare l'ID misurazione GA4 precedentemente copiato nella casella "ID misurazione".

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

Passaggio 11: in Campi da impostare, fai clic sulla riga aggiungi, quindi aggiungi il nome del campo e il relativo valore come indicato di seguito:

Nome campo: user_id

Valore: {{dlv – cliente – id – Variabile}}

5 aggiungi l'ID utente in Campi da impostare

Passaggio 12: in Proprietà utente, aggiungi il nome e il valore della proprietà come indicato di seguito.

Nome della proprietà Valore
identificativo del cliente {{dlv – cliente – id – Variabile}}
ultimo ordine {{dlv – cliente – ultimo ordine – Variabile}}
conteggio_ordine {{dlv – cliente – conteggio ordini – Variabile}}
spesa totale {{dlv – cliente – totale speso – Variabile}}
tipologia di utente {{dlv – cliente – tipo utente – variabile}}

User Properties Assign Property Name and value

Passaggio 13: fare clic in un punto qualsiasi del Triggering.

Configurazione trigger: fare clic su Ovunque

Passaggio 14: seleziona Tutte le pagine come trigger.

Select All Pages as a Trigger Type

Passaggio 15: rinomina il tag.

Rename as GA4 - Page View - Tag as and Click Save

Brillante!

Ora hai creato il tag di visualizzazione della pagina GA4.

Ora diamo un'occhiata a come tenere traccia dell'evento view_item man mano che qualcuno visualizza la pagina del prodotto e passa i dettagli necessari a GA4.

Tieni traccia e passa view_item e acquista i dati dell'evento su GA4.

Aggiungi view_item Data Layer su Shopify.

  1. Accedi al tuo negozio Shopify e fai clic su Temi in Negozio online nel pannello di navigazione a sinistra.
  2. Fai clic su Modifica codice nel menu a discesa Azioni.
  3. Fare clic su main-product.liquid in Sezioni.
  4. Copia e incolla lo script del livello dati menzionato di seguito.
  5. Fare clic su Salva su main-product.liquid verso l'angolo in alto a destra

Passaggio 1: accedi al tuo negozio Shopify e fai clic su Temi in Negozio online nel pannello di navigazione a sinistra.

select themes under online store

Sezione 2: Fare clic su Modifica codice nell'elenco a discesa Azioni.

Click on Edit code under Actions drop down

Sezione 3: Fare clic su main-product.liquid in Sezioni.

Click on the main-product.liquid under Sections.

Passaggio 4: copia e incolla lo script del livello dati menzionato di seguito.

copia

 <script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
evento: 'view_item',
e-commerce: {
Oggetti: [{
nome_oggetto: '{{ titolo.prodotto | sostituire: "'","##@@[email protetta]@##" }}'.replace("##@@[email protetta]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
prezzo: "{{ prodotto.prezzo | denaro_senza_valuta | rimuovi:',' }}",
item_brand: "{{ product.vendor | rimuovi: "'" | rimuovi: '"' }}",
{% per la raccolta in product.collections %}
item_category{% a meno che forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% fine per %}
item_variant: "{{ product.selected_or_first_available_variant.title | rimuovi: "'" | rimuovi: '"' }}",
quantità: '1'
}]
}
});
</script>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

Passaggio 5: fare clic su Salva sul prodotto principale.liquid verso l'angolo in alto a destra.

Click save on the main-product.liquid under Sections

Crea GTM Trigger per l'evento view_item e acquisto.

  1. Vai a Google Tag Manager.
  2. Fare clic su Trigger nel pannello di navigazione a sinistra.
  3. Fare clic su Nuovo.
  4. Fare clic in un punto qualsiasi della configurazione Trigger.
  5. Seleziona Evento personalizzato in Altro.
  6. Assegna nome evento view_item.
  7. Rinominare il trigger CE – EEC – view_item – Trigger e fare clic su Salva.

NOTA:

  1. Assegna il nome dell'evento come acquisto
  2. Rinominare il trigger CE – EEC – acquisto – Trigger e fare clic su Salva.

Passaggio 1: vai su Google Tag Manager.

Passaggio 2: fai clic su Trigger nel pannello di navigazione a sinistra.

Click on Trigger on the left hand navigation panel

Passaggio 3: fare clic su Nuovo.

Click New

Passaggio 4: fare clic in un punto qualsiasi della configurazione Trigger.

Click anywhere on Trigger configuration

Passaggio 5: seleziona Evento personalizzato in Altro.

Select Custom Event under Other

Passaggio 6: assegna il nome dell'evento view_item.

Assign Event Name as view_item

Passaggio 7: rinominare il trigger CE – EEC – view_item – Trigger e fare clic su Salva.

Rename the Trigger - view_item

Con questi passaggi, hai creato il trigger di evento view_item. Ora dovrai attivare un evento di acquisto. Per attivare un evento di acquisto, segui i primi 5 passaggi precedenti.

Passaggio 8: assegna il nome dell'evento all'acquisto

custom event name purchase

Passaggio 9: rinominare il trigger come CE – EEC – acquisto – Trigger e fare clic su Salva.

Rename the Trigger - purchase

Se hai seguito tutti i passaggi, hai fatto quasi tutto per raccogliere view_item e acquistare i dati relativi agli eventi dal tuo negozio Shopify con i dati nell'ambito dell'utente. Ora vediamo come passare questi dettagli a GA4 utilizzando Google Tag Manager.

Crea tag GTM per l'evento view_item e acquisto.

  1. Fare clic su Tag nel pannello di navigazione a sinistra.
  2. Fare clic su Nuovo.
  3. Fare clic ovunque su Configurazione tag.
  4. Seleziona "Google Analytics: Evento GA4" in Tag in evidenza.
  5. In Tag di configurazione, seleziona "GA4 - Visualizzazione pagina - Tag" dal menu a discesa.
  6. Assegna nome evento. Seleziona la variabile dataLayer precedentemente creata – {{dlv – event – ​​variable}}
  7. Fai clic su Altre impostazioni e seleziona Invia dati e-commerce in E-commerce. Seleziona Livello dati come origine dati.
  8. Fare clic in un punto qualsiasi su Attivazione.
  9. Selezionare il trigger creato in precedenza “CE – EEC – view_item – Trigger” per l'evento view_item.
  10. Passa con il mouse nell'angolo in alto a destra della sezione Trigger e fai clic sull'icona a forma di matita.
  11. Fare clic sull'icona più ora.
  12. Seleziona il trigger dell'evento di acquisto denominato "CE - acquisto - Trigger".
  13. Rinominare il Tag: “GA4 – Evento EEC – Tag” e fare clic su Salva.

Passaggio 1: fai clic su Tag nel pannello di navigazione a sinistra.

Click on tag on the left hand navigation panel

Passaggio 2: fare clic su Nuovo.

Click New

Passaggio 3: fare clic in un punto qualsiasi della configurazione dei tag.

Tag Configuration - Click Anywhere

Passaggio 4: seleziona "Google Analytics: evento GA4" sotto il tag in primo piano.

Select Google Analytics GA4 Event under Featured Tag

Passaggio 5: in Tag di configurazione, seleziona "GA4 - Visualizzazione pagina - Tag" dal menu a discesa.

Select Configuration Tag form the drop down

Passaggio 6: assegna il nome dell'evento. Seleziona la variabile del livello dati precedentemente creata – {{dlv – event – ​​variable}}

Event Name Select the previously made Data Layer variable

Passaggio 7: fai clic su Altre impostazioni e seleziona Invia dati e-commerce in E-commerce. Seleziona Livello dati come origine dati.

More Settings Send eCommerce Data select Data Layer as datasource

Passaggio 8: fare clic in un punto qualsiasi su Triggering.

Trigger Configuration - Click Anywhere

Passaggio 9: selezionare il trigger creato in precedenza "CE – EEC – view_item – Trigger" per l'evento view_item.

select view item trigger

Passaggio 10: passa con il mouse nell'angolo in alto a destra della sezione Trigger e fai clic sull'icona a forma di matita.

Hover over the trigger towards the right hand side top corner and click on pencil icon

Passaggio 11: fare clic sull'icona più ora.

Click on this plus icon

Passaggio 12: selezionare il trigger dell'evento di acquisto denominato "CE - acquisto - Trigger".

Select purchase event trigger

Passaggio 13: rinomina il tag: “GA4 – EEC event – ​​Tag” e fai clic su Salva.

Rename the tag and click save

Congratulazioni

Con questa guida, ora puoi monitorare la visualizzazione dei dati sui prodotti e sugli eventi di acquisto su GA4. Puoi anche visualizzare i rapporti su GA4 seguendo questi passaggi.

Passaggio uno: vai alla proprietà GA4.
Passaggio due: fai clic sui rapporti nel pannello di navigazione a sinistra.
Passaggio tre: fai clic su Monetizzazione e quindi su Acquisti e-commerce.

Se desideri ottenere il contenitore GTM pronto per questa guida, ti consiglio vivamente di scaricare la ricetta GTM.

Scarica la ricetta GTM

Conclusione

Con questa guida passo passo, ho fatto tutto il possibile per affrontare e risolvere il problema scottante di tutti i proprietari di negozi Shopify. Il monitoraggio dell'e-commerce può avere molte sfumature ed è difficile da affrontare con un singolo post sul blog. Se hai qualche domanda, sentiti libero di connetterti con me su LinkedIn e porre le tue domande lì.