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:

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.

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):

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:

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:

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

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

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:

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.

Il nostro tag e trigger appariranno in questo modo:

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:

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

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

Tag e Trigger

Ecco come apparirà il risultato finale, ossia il nostro tag con il suo 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)

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

Si aprirà una finestra, clicchiamo su Create Custom Dimensions

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”:

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

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):

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.

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.

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

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

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 […]