Google Analytics

Come tracciare un Form in Google Analytics 4

come tracciare un form in google analytics 4

UPDATE: 1 Maggio 2022. L’aggiornamento contiene uno script da inserire in un tag per inserire l’attivatore ogni volta che un form viene compilato.

In questo post ti mostro come tracciare la sottoscrizione di un Form (Contact Form 7 per WordPress) con il nuovo Google Analytics 4 e Google Tag Manager.

Se vuoi sapere che cosa è Google Analytics 4 e tutti i vantaggi che offre, leggi il mio post, altrimenti, proseguiamo !

Per tracciare la lead di un utente che compila il form sul tuo sito web, ovviamente devi aver in precedenza creato una nuova Proprietà per GA4 e creato il tag in Google Tag Manager per passare le informazioni ad Analytics.

Questo il percorso che seguiremo:

form tracking google analytics 4
Contenuti del post:
- Creare un nuovo tag
    - Selezionare un tag evento
    - Tag di Configurazione
    - Scelta del nome Evento
    - Definire i parametri evento (opzionale)
    - Definire le user properties (opzionale)
- Creare il tag Custom HTML per il Contact Form 7
- Creare il trigger
- Tag e trigger
- Test in Preview
- Creare la dimensione personalizzata in Google Analytics 4
- Creare la user property in Google Analytics 4
- Pubblicazione del contenitore
- Visualizzazione dati in GA4

Creare un nuovo Tag

Selezionare un tag evento

Per prima cosa dobbiamo crea un tag in Google Tag manager.

Vai nella sezione Tag > New > Google Analytics 4: Event.

google analytics 4 event tag

Tag di configurazione

Nel box Configuration Tag (A) seleziona il tag collegato a Google Analytics 4 (leggi questo post se vuoi vedere come crearlo in un semplice passaggio):

configuration tag google analytics 4

Scelta del nome evento

Ora dobbiamo dare un nome all’Evento. Ti consiglio di non inserire un nome a caso, ma di prendere spunto dalla guida ufficiale di Google.

Visto che stiamo tracciando una compilazione di un Form, quindi l’utente sta generando una lead, utilizzeremo il nome evento generate_lead come suggerito dal team di Google:

eventi vendita al dettaglio ecommerce

Il motivo, per il quale ti suggerisco di utilizzare questo nome invece di inventarne uno, è legato all’implementazione continua di Google Analytics 4 e dei suoi report. Nel futuro Google potrebbe sviluppare dei report in cui raccogliere questi nomi evento e sarà per te più facile misurarlo, perché rientrerà direttamente nel rapporto.

A questo punto, il nostro tag apparirà in questo modo:

tag evento generate_lead

Definire i parametri evento (opzionale)

A questo punto, possiamo aggiungere dei parametri evento.

Con questi parametri possiamo raccogliere una serie di informazioni aggiuntive.

Inseriamo i seguenti valori come in immagine (B):

  • Parameter name: lead_type
  • Value: newsletter_subscription
parametri eventi google analytics 4

Perché inserire gli event parameters? Se abbiamo diverse tipologie di Form sul nostro sito, possiamo avere un solo nome evento (che abbiamo chiamato “generate_lead”) e poi diversi parametri che identifichino il tipo di form, ad esempio:

  • Form di iscrizione alla newsletter: possiamo inserire un valore parametro tipo “newsletter_subscription”;
  • Form di richiesta informazioni: possiamo mettere il valore “informazioni_subscription”;
  • Form di richiesta preventivo: potremmo inserire il valore “preventivo_subscription”;

La scelta dei nomi e della struttura del tag dipende dal tuo piano di misurazione.

Definire le user properties (opzionale)

Il tag evento di Google Analytics 4 ci offre un’altra possibilità: quella di definire la proprietà utente.

Se compiliamo questo campo, tutti gli utenti che hanno compilato il form, secondo le regole che abbiamo inserito nel tag, saranno riconosciuti come sottoscrittori di questo tipo di lead.

Inseriamo i seguenti valori, come in immagine (C):

  • Property name: newsletter_subscriber
  • Value: true
user properties google analytics 4 tag manager

Creare il tag Custom HTML per il Contact Form 7

Dato che stiamo tracciando il Contact Form 7 di wordpress, andrò a inserire uno snippet di codice che mi permetterà di aggiungere un Listener ogni volta che il form viene compilato.

Lo script sarà il seguente:

script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

Copia il codice e incollalo in GTM. Crea un nuovo tag in Tag > New > Custom HTML:

custom form 7 tracking gtm

Ora creiamo il trigger: creiamo il trigger di tipo DOM Ready che si attiverà quando gli elementi della pagina sono disponibili. In questo modo, quando il form sarà compilato, il nostro listener sarà pronto a raccogliere questa informazione.

dom ready trigger gtm

Il nostro tag e trigger appariranno in questo modo:

tag for contact form 7 google tag manager

Ora è il momento di testare le implementazioni. Dobbiamo lanciare la Preview e compilare il Form.

Se tutto funziona correttamente, possiamo trovare l’evento ‘cf7submission‘ nel nostro datalayer appena il form è stato compilato:

data layer contact form 7

Creare il trigger

Ora creiamo il trigger per il nostro tag di GA4.

Ora che abbiamo a disposizione l’evento ‘cf7submission‘ nel data layer, possiamo utilizzare il trigger Custom Event.

Selezioniamo un trigger di tipo Custom Event

trigger custom event tag manager

Ora inseriamo nel box il nome esatto dell’evento pushato a data layer:

custom event trigger for contact form 7 wordpress

Tag e Trigger

Ecco come apparirà il risultato finale, ossia il nostro tag con il suo trigger:

tag e trigger

Salva.

Test in Preview

Ora che il tag e il suo trigger sono stati creati, dobbiamo verificare che scattino correttamente, prima di pubblicare.

Come descritto nei punti precedenti:

  • Attiviamo la modalità Preview;
  • Colleghiamo il nostro sito web;
  • Compiliamo il Form e inviamolo;
  • Controlliamo la Preview: se tutto è corretto, vedremo il Tag che si attiva(A), appena il Form è stato inviato e l’evento è stato pushato nel dataLayer (B)
tag fired ga4 contact form 7

Creare la dimensione personalizzata in Google Analytics 4

Ora dobbiamo registrare una nuova dimensione personalizzata in GA4, in modo da poter vedere il valore del parametro che abbiamo inserito nel nostro tag (quello che abbiamo chiamato “lead_type”).

Andiamo in Events > All Events > Manage Custom Definitions

creare dimensioni personalizzate ga4

Si aprirà una finestra, clicchiamo su Create Custom Dimensions

nuova dimensione personalizzata ga4

Inseriamo il nome del parametro che abbiamo scritto nel Tag in Google Tag Manager, ossia ‘lead_type’ (A) e, se vuoi, puoi modificare il nome che apparirà all’interno dei tuoi report dando un nome più chiaro (B), che ho chiamato “Lead Type”:

registrare dimensione personalizzata google analytics 4

Salviamo.

Creare la User Property in Google Analytics 4

Ora dobbiamo registrare la User Property in GA4.

Andiamo in Configure > User Properties > New user property

creare nuova user property ga4

Ora digitiamo lo stesso nome inserito nel tag, cioé ‘newsletter_subscriber’ (ricorda che, una volta inserito il nome della user property, non potrà più essere modificato, potrai modificare in ogni momento la descrizione):

nuova user property ga4

E salviamo.

Nella guida ufficiale di Google, puoi trovare una serie di Dimensioni utente predefinite.

Pubblicazione del contenitore

Se tutti i test sono andati a buon fine, puoi pubblicare il contenitore in Google Tag Manager per rendere le modifiche live sul sito web.

pubblicazione contenitore in gtm

Visualizzazione dati in GA4

Una volta eseguiti questi passaggi, Google Analytics 4 inzierà a raccogliere le informazioni.

Per ogni utente che compila il Form, secondo le regole impostate nel tag, potrai vedere l’evento che viene raccolto (A), il parametro (B) e la user property impostati (C), oltre ad una serie di altri parametri che si associano all’evento.

debug mode google analytics 4

Dopo 24 ore, i valori saranno visibili nel Rapporto Events > All Events

rapporto eventi google analytics 4

Se clicchiamo sull’evento che abbiamo creato, ossia ‘generate_lead’, è possibile vedere i parametri custom (A) che abbiamo inserito nel tag in precedenza:

custom parameters google analytics 4

Buone analisi!

Potrebbero interessarti anche i seguenti articoli:

  • Google Analytics 4: Rapporto source/medium
    Uno dei rapporti più popolari all’interno della versione Universal Analytics è sicuramente il Rapporto source/medium. In questo Rapporto è possibile osservare velocemente la sorgente e il mezzo di provenienza degli utenti che atterrano sul sito web. In UA possiamo trovarlo sotto Acquisition > All Traffic > Source/Medium La nuova versione di GA4 offre numerose features […]
  • Google Analytics 4: Pagine di Destinazione
    In questo post ti mostro come trovare le pagine di destinazione in Google Analytics 4. Per questo motivo do per scontato che sai già cosa è GA4 e la sua differenza con la versione Universal Analytics. Se però vuoi approfondire, ti rimando a questo post in cui ti spiego cosa è Google Analytics 4 e […]
  • Search Console e Google Analytics 4
    In questo post ti mostrerò due cose che ritengo molto utili: Collegare la Google Search Console direttamente alla tua Proprietà di Google Analytics 4 Salvarti un widget per accedere più velocemente ai dati della Search Console Partiamo! Collegare Search Console a GA4 I passaggi per collegare la Search Console a Google Analytics 4 sono davvero […]
  • Google Analytics 4: Content Groups
    I Content Groups o Raggruppamenti di Contenuti permettono di creare delle sezioni del sito, all’interno delle quali poter racchiudere diversi contenuti. Questo ci permette di aggiungere un elemento aggiuntivo alle nostre analisi. Facciamo alcuni esempi: posso creare un gruppo specifico che mi mostra i Brand più visualizzati sul mio sito web oppure posso creare delle […]
  • Google Analytics 4: Confronti
    In questo post ti mostro come utilizzare la funzionalità confronti o comparison (nella versione inglese) di Google Analytics 4. Se vuoi saperne di più su GA4, leggi questo post, altrimenti, proseguiamo! Così come avviene nella versione UA (Universal Analytics), dove è possibile utilizzare i segmenti per analizzare meglio il comportamento dei tuoi utenti sul sito, […]
  • Obiettivi di Destinazione: Google Analytics
    Google Analytics ti offre una impostazione molto utile: gli Obiettivi. Gli Obiettivi permettono di capire meglio se i tuoi utenti hanno compiuto un’azione per te importante e raggiunto lo scopo che ti eri prefisso con il tuo sito web. Si possono impostare diversi Obiettivi in GA , in questo post ti mostro come impostare un […]
  • Filtrare il traffico interno in Google Analytics
    I Filtri in Google Analytics ti permettono di pulire il traffico per raccogliere un dato qualitativo sul tuo sito web. Uno dei Filtri principali da impostare all’interno delle Viste di Google Analytics (versione Universal Analytics) è quello per escludere il traffico interno. In questo modo tutte le persone che lavorano sul sito e che lo […]

4 pensieri su “Come tracciare un Form in Google Analytics 4

  1. Ciao, grazie della guida preziosa. Avrei un dubbio. Se io ho una thank you page per il form non posso mettere quella come attivatore invece del tag che si attiva quando compilo il form?
    Grazie!

    1. Ciao, certamente. Nel caso in cui il Form portasse ad una thank-you page, potresti utilizzare come trigger il tipo ‘Page view’ selezionando come opzione di attivazione solo su ‘Some page views’, quindi selezionare come condizione la variabile ‘Page Path’ che “contiene” (o “corrisponde esattamente a” oppure le altre opzioni in base al tuo caso) il valore della URL della tua thank-you page (es.: /yourform-thankyou.html).

  2. Ciao, ho configurato seguendo la guida il tag ma al punto “Controlliamo la Preview: se tutto è corretto, vedremo il Tag che si attiva(A), appena il Form è stato inviato e l’evento è stato pushato nel dataLayer (B)” non si attiva il Tag configurato.
    Ho inserito un evento che compare dopo il submit ma non sono sicuro che sia quello giusto.
    Come come faccio a capire a quale elemento del Summary corrisponde l’evento da inserire?
    Grazie per l’aiuto!

    1. Ciao Alessandro,

      per l’esempio in questione, e per la maggior parte dei Form, ti consiglio di agire in questo modo: apri la modalità Anteprima di GTM e inserisci il link del sito in cui c’è il Form che vuoi tracciare; compila il Form ; appena inviato il Form, apparirà un evento nel data layer, corrispondente all’azione di compilazione (quello che è il punto B); quello è l’evento nel Summary che viene pushato a data layer dopo la tua interazione con il Form; prendi quell’evento e usalo nelle impostazioni del trigger per far attivare il tag.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.