E-commerce GA4 (Tag Manager): inviare eventi GA4

Questa guida descrive come aggiornare un'implementazione e-commerce di Universal Analytics (Tag Manager) esistente per utilizzare gli eventi di e-commerce Google Analytics 4.

Visita il Centro di migrazione per gli sviluppatori per ulteriori risorse e guide alla migrazione.

Risultato

Segui questa guida per aggiornare l'implementazione esistente di Universal Analytics in modo da utilizzare gli eventi e i parametri di e-commerce GA4. Questa implementazione e-commerce aggiornata verrà utilizzata anche per inviare i dati di e-commerce a una nuova proprietà GA4. I report sull'e-commerce di UA continueranno a essere compilati con dati e inizierai a riceverli nella nuova proprietà Google Analytics 4.

Attenzione: anche se gli eventi e-commerce di Google Analytics 4 vengono tradotti automaticamente per essere compatibili con Universal Analytics, non tutti gli eventi di Google Analytics 4 hanno un evento equivalente in Universal Analytics. Per questi eventi mancheranno dati nei report sull'e-commerce di Universal Analytics. Consulta Pro e contro e considerazioni di seguito.

Prima di iniziare

1. Utilizza lo strumento di supporto per la migrazione dell'e-commerce per verificare che quanto segue descrivi la tua implementazione attuale:

   • Stai utilizzando una proprietà Universal Analytics
   • Il tuo sito utilizza Tag Manager e il livello dati per inviare eventi di e-commerce

2. Consulta le opzioni di migrazione per le implementazioni dell'e-commerce per conoscere i compromessi di ciascuna opzione. Conferma di voler effettivamente seguire questa guida per utilizzare gli eventi e-commerce di Google Analytics 4 per l'implementazione esistente di Universal Analytics.

3. Consulta il riferimento sulla compatibilità degli eventi per scoprire come vengono tradotti gli eventi UA quando vengono inviati a una proprietà GA4.

Vantaggi e considerazioni

Esamina e considera le informazioni riportate di seguito per comprendere appieno le implicazioni dell'utilizzo degli eventi di e-commerce di Google Analytics 4 con l'implementazione dell'e-commerce esistente di Universal Analytics (Tag Manager).

Vantaggi	Svantaggi
Ti consente di visualizzare i dati di e-commerce nei report di GA4 e di Universal Analytics. L'utilizzo degli eventi e dei parametri GA4 garantisce report e-commerce GA4 completi.	Richiede la modifica degli eventi di e-commerce esistenti. Non tutti gli eventi e i parametri GA4 hanno equivalenti in Universal Analytics. I parametri shipping_tier, discount, currency, location_id, promotion_name e promotion_id non hanno equivalenti Universal Analytics e non verranno visualizzati nei report di Universal Analytics.

Implementazione

Un obiettivo chiave dell'implementazione è la transizione dall'utilizzo del livello dati all'utilizzo dell'API gtag.js. Per assicurarti che non ci siano interruzioni nella misurazione durante la transizione, le istruzioni riportate di seguito consigliano di completare prima tutti gli aggiornamenti della configurazione dei tag e poi quelli del livello dati.

1. Creare e configurare una nuova proprietà GA4

Completa i seguenti passaggi per creare e configurare la tua nuova proprietà Google Analytics 4:

1. Crea una nuova proprietà Google Analytics 4.
   • Utilizza l'Assistente alla configurazione GA4 per creare automaticamente una nuova proprietà GA4 e copiare le seguenti impostazioni dalla proprietà Universal Analytics: nome proprietà, URL del sito web, fuso orario e impostazioni valuta. Tuttavia, deseleziona l'opzione Attiva la raccolta dati utilizzando i tag esistenti per disattivare la funzionalità dei tag del sito collegati. In alternativa, se non vuoi copiare le impostazioni dalla proprietà Universal Analytics, crea una proprietà Google Analytics 4 senza l'Assistente alla configurazione GA4.
2. Aggiungi il tag Google.
   1. Apri il contenitore di Google Tag Manager per l'implementazione di Universal Analytics esistente.
   2. Fai clic su Tag > Nuovo.
   3. Fai clic su Configurazione tag e seleziona Tag Google.
   4. Inserisci l'ID tag della tua proprietà Google Analytics 4.
   5. Scegli di attivare il tag in tutte le pagine o nel sottoinsieme di pagine da misurare.
   6. Salva e pubblica la configurazione del tag.

2. Aggiungere una configurazione del tag evento GA4 per misurare gli eventi di e-commerce

Completa i seguenti passaggi per aggiungere un tag evento GA4 per inviare eventi e parametri di e-commerce alla tua proprietà GA4:

1. Crea una nuova configurazione dei tag e seleziona Evento GA4.
2. In Nome evento, utilizza la variabile integrata . Verrà utilizzato il nome dell'evento di e-commerce GA4 inviato tramite l'API gtag.js.
3. In Altre impostazioni, quindi E-commerce, seleziona Invia dati e-commerce.
4. In Origine dati, seleziona Livello dati.
5. Fai clic su Salva. I trigger verranno aggiunti nei passaggi successivi in modo che tu possa ignorare tranquillamente eventuali avvisi relativi a trigger mancanti.

Punto chiave: non è necessario creare più tag evento GA4. Per tutti gli eventi di e-commerce è invece possibile usare un singolo tag evento GA4 che utilizza la variabile Event integrata. Gli attivatori del tag definiranno gli specifici eventi e-commerce GA4 che attivano il tag.

3. Aggiornare le configurazioni dei tag e-commerce di UA per utilizzare gli eventi GA4

Per ogni configurazione dei tag di e-commerce di Universal Analytics, devi aggiungere un attivatore che si attivi sull'evento di e-commerce GA4 equivalente e abilitare l'opzione di lettura dei dati sugli eventi di e-commerce GA4.

Per ogni evento di e-commerce di Universal Analytics, di seguito sono riportati i passaggi generali per eseguire l'aggiornamento a un evento GA4 corrispondente:

1. Per l'evento di e-commerce UA che intendi aggiornare, utilizza le informazioni disponibili in Compatibilità tra eventi UA e GA4 e Parametri paragonabili per le tabelle UA e GA4 e/o helper per la migrazione e-commerce per identificare il nome dell'evento GA4 corrispondente. Ad esempio, se aggiorni un evento per misurare i clic sui prodotti, il nome dell'evento GA4 sarà select_item.
2. Aggiorna la configurazione dei tag di Universal Analytics per l'evento:
   1. In Altre impostazioni, poi E-commerce, seleziona Utilizza lo schema GA4 per assicurarti che i tag esistenti leggano correttamente l'evento di e-commerce GA4 aggiornato. Questa modifica è consentita prima di eseguire la migrazione dal livello dati all'API gtag.js.
   2. Nella sezione Attivazione, aggiungi un nuovo attivatore Evento personalizzato, in cui il Nome evento è l'evento di e-commerce GA4 identificato in precedenza. Dopo aver completato questo passaggio dovresti avere almeno due attivatori: quello originale che ha attivato il tag e quello appena aggiunto che si attiverà alla fine una volta completata la transizione agli eventi GA4. Il trigger aggiuntivo assicura che non vi siano interruzioni dei dati durante la transizione dal livello dati all'API gtag.js, come descritto di seguito in questo documento.
   3. Salva le modifiche.
3. Aggiungi il nuovo attivatore al tag evento GA4:
   1. Apri il tag Evento GA4 configurato in precedenza per l'invio di eventi e parametri di e-commerce alla tua proprietà GA4.
   2. Nella sezione Attivazione, aggiungi l'attivatore Evento personalizzato creato in precedenza (ad es. select_item) per assicurarti che il tag evento GA4 venga attivato per l'attività di e-commerce associata dopo la transizione agli eventi GA4.
   3. Salva le modifiche.
4. Ripeti i passaggi precedenti per ogni attività e-commerce di Universal Analytics. Al termine, pubblica le modifiche in Tag Manager.

Attenzione: assicurati di attivare l'opzione Usa schema GA4 nella configurazione dei tag di Universal Analytics. Se questa opzione non è attivata, i report e-commerce di UA non verranno compilati correttamente.

4. Attivare l'API gtag.js

Per aggiornare l'implementazione dell'e-commerce da UA a GA4, ti consigliamo di passare dall'utilizzo del livello dati all'utilizzo dell'API gtag.js, che opera in coordinamento con Tag Manager.

Per attivare l'API gtag.js, aggiungi il seguente snippet di codice nella parte superiore della pagina sopra lo snippet contenitore di Tag Manager:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

Attenzione: se in precedenza hai seguito l'articolo sull'aggiunta delle variabili del livello dati a una pagina e hai già dichiarato una variabile del livello dati nella pagina, lo snippet riportato sopra deve essere inserito dopo la dichiarazione del livello dati esistente.

5. Passare dall'utilizzo del livello dati all'utilizzo di gtag.js

Una volta completati tutti gli aggiornamenti della configurazione dei tag e abilitato l'API gtag.js, potrai passare dall'utilizzo del livello dati all'utilizzo dell'API gtag.js.

Per aiutarti con l'aggiornamento, utilizza le seguenti risorse:

• Consulta la guida per gli sviluppatori per l'e-commerce (GA4) per scoprire come inviare gli eventi di e-commerce GA4 utilizzando l'API gtag.js e configurare il tag e gli attivatori evento GA4 in Tag Manager.
• La tabella Compatibilità tra gli eventi UA e GA4, che ti consente di trovare il nome dell'evento GA4 appropriato per un'attività di e-commerce di Universal Analytics. Ad esempio, se aggiorni un evento per misurare le impressioni dei prodotti, il nome dell'evento GA4 sarà view_item_list.
• La tabella Parametri paragonabili per UA e GA4 per aiutarti a mappare i nomi dei parametri di e-commerce UA ai nomi dei parametri di e-commerce GA4 equivalenti.
• L'helper per la migrazione dell'e-commerce per verificare che gli eventi di e-commerce siano stati aggiornati correttamente.

Per ogni evento di e-commerce di Universal Analytics, di seguito sono riportati i passaggi generali per eseguire la transizione dall'utilizzo dell'API dataLayer.push() con gli eventi di e-commerce UA all'API gtag.js con l'evento di e-commerce GA4 corrispondente:

1. Aggiorna i nomi degli eventi personalizzati con il nome dell'evento GA4 corrispondente. Ad esempio, se aggiorni un evento per misurare un clic su un prodotto che utilizza il nome dell'evento personalizzato productClick, il nome dell'evento aggiornato per GA4 sarà select_item. Il nome dell'evento GA4 deve corrispondere al nome dell'evento di un trigger che hai configurato in precedenza.

   Ad esempio, il seguente evento di clic sul prodotto che utilizza il livello dati

   dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
   

   quando viene eseguita la transizione all'API gtag.js:

   gtag('event', 'select_item', {<ecommerce_parameters>});
   

2. Aggiorna i parametri di e-commerce in modo che corrispondano a quanto previsto per l'evento GA4. Assicurati di utilizzare parametri paragonabili per UA e GA4, poiché sono state apportate modifiche ai nomi dei parametri. Completare il valore del parametro GA4 con il valore del parametro UA corrispondente.

Nota: al termine della migrazione dall'API dataLayer.push() all'API gtag.js, puoi facoltativamente rimuovere qualsiasi attivatore di evento personalizzato che si attiva in base ai vecchi eventi livello dati di UA.

Esempio: aggiornare un evento UA a GA4

L'esempio seguente mostra come creare un evento GA4 equivalente per un'attività di e-commerce clic sul prodotto implementata in Tag Manager per Universal Analytics.

Prima: inviare eventi UA utilizzando il livello dati

La seguente sezione Misura un clic su un prodotto per Universal Analytics, implementata utilizzando il livello dati. Il nome dell'evento personalizzato è productClick.

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

In Tag Manager, la configurazione dei tag di Universal Analytics è la seguente:

Tipo di tag : Universal Analytics
Tipo di monitoraggio : Evento
Categoria evento: Ecommerce
Azione evento: Product Click
Attiva le funzionalità di e-commerce avanzato: true
Utilizza livello dati: true
Attivatore: event è uguale a productClick

La configurazione dell'attivatore è impostata per attivare il tag quando viene eseguito il push dell'evento productClick al livello dati:

Dopo: invio di eventi GA4 utilizzando gtag.js

Aggiornamenti della configurazione dei tag per UA

In Tag Manager, la configurazione dei tag di Universal Analytics viene aggiornata in modo che l'evento Clic sul prodotto venga attivato in base al nome dell'evento GA4 e l'opzione Utilizza schema GA4 è attivata. La configurazione del tag è ora la seguente:

Tipo di tag : Universal Analytics
Tipo di monitoraggio : Evento
Categoria evento: Ecommerce
Azione evento: Product Click
Attiva le funzionalità di e-commerce avanzato: true
Utilizza il livello dati: true
Utilizza lo schema GA4: true
Attivatore n. 1: event è uguale a productClick
Attivatore n. 2: event è uguale a select_item

La configurazione dell'attivatore del nuovo attivatore Evento personalizzato è impostata in modo da attivare il tag sul Nome evento select_item:

Aggiornamenti della configurazione dei tag per GA4

Un evento GA4 è configurato per misurare le attività di e-commerce implementate utilizzando eventi e parametri GA4. Il tag utilizza la variabile integrata Event per trasmettere il nome dell'evento a GA4. Lo stesso attivatore creato per il tag UA (ad es. select_item) viene utilizzato per attivare il tag GA4.

Passare dall'utilizzo del livello dati all'utilizzo di gtag.js

Di seguito viene mostrato come viene eseguita la transizione dell'implementazione UA sopra riportata dall'utilizzo dell'evento personalizzato productClick con l'API dataLayer.push() all'utilizzo dell'evento GA4 select_item con l'API gtag.js. I valori parametro per select_item sono impostati di conseguenza.

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>