Guida Avanzata: Tracciare l’Invio Contact Form 7 con Google Tag Manager

Anche tu vorresti tracciare quando un utente compila una richiesta attraverso Contact Form 7 di WordPress? Magari senza installare plugin come spiegato nella mia guida di come tracciare Contact Form 7 con il plugin Duracell Tomi.

In questa guida non solo ti spiegherò come tracciare chi compila il form dei contatti, ma anche come catturare i valori dei campi form! Ovviamente solo se hai Contact Form 7 😉

Sei pronto? Iniziamo!

STEP 1 – CREA TAG HTML PERSONALIZZATO

Per riuscire a tracciare l’invio del form da parte dell’utente, la prima cosa che devi fare è inviare un pezzo di codice che rimanga in attesa della compilazione del form, e che in seguito inserisca nel Data Layer i dati giusti.

La logica è questa. Contact Form 7 ha una serie di eventi che invia direttamente al tuo browser (qui la lista ufficiale). Basta quindi catturare uno di questi eventi, ovvero la email inviata con successo.

Ecco i passaggi:

• Entra nel contenitore > Sezione Tag > Nuovo.
• Tipo di Tag: HTML personalizzato.
• Incolla questo snippet:

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

• Aggiungi l’Attivatore: All Pages.
• Salva il Tag con il nome: “Contact Form 7 Listener”.

Questo script non solo andrà ad inserire all’interno del Data Layer l’evento cf7mailInviata, ma farà un push dei dati relativi al form (l’id, i valori dei campi inseriti dall’utente, ecc).

STEP 2 – CREA L’ATTIVATORE

Il secondo step è facilissimo: hai pushato nel Data Layer l’evento cf7mailInviata, ti basterà intercettalo attraverso un Attivatore di tipo evento personalizzato. In questo modo potrai inviare a Google Analytics (o a chi ti pare) i dati raccolti.

Ecco quello che devi fare:

• Sezione Attivatori > Nuovo.
• Tipo di Attivatore: Evento personalizzato.
• Nome evento: cf7mailInviata.
• Salva l’Attivatore con il nome: “cf7mailInviata” (originale, eh? 😛 ).

STEP 3 – CREA LE VARIABILI

Facciamo subito una verifica. Se fino ad ora hai fatto tutto giusto, compilando il form e attivando la console di Debug e Anteprima, dovrebbe comparire l’evento “cf7mailInviata“.

Se vai nella scheda “Data Layer”, puoi notare come all’interno di questo evento si sia popolato di dati.

Bene, ora ti mostro come prendere i valori del Form Id e l’oggetto dell’email (sembra una cosa figa in effetti).

Mi raccomando però, ricordati che non è possibile tracciare i dati sensibili dell’utente (email, nome, ecc) e cioè i famosi PII (Personally Identifiable Information), altrimenti Google si arrabbia 😉

Come si creano queste Variabili? Ecco come si fa:

• Sezione Variabili> Variabili definite dell’utente > Nuova.
• Tipo di Variabile: Variabile di livello dati.
• Nome Variabile livello dati: cf7FormId.
• Salva con il nome: “CF7 – Form ID”.

• Sezione Variabili> Variabili definite dell’utente > Nuova.
• Tipo di Variabile: Variabile di livello dati.
• Nome Variabile livello dati: cf7Campi.2.value.
• Salva con il nome: “CF7 – Oggetto Email”.

Oh, ma aspetta. Perché “cf7Campi.2.value”? 

Perché il Data Layer è un’array JavaScript e, come hai visto dalla prima immagine dello step 3, in cf7Campi dipendono le chiavi “name” e “value”.

cf7Campi: [

{name: 'your-name', value: 'Matteo'}, //posizione 0

{name: 'your-email', value: 'test@test.it'}, //posizione 1

{name: 'your-subject', value: 'Test Oggetto'}, //posizione 2

{name: 'your-message', value: 'Questo è un test'} //posizione 3

]

Ma guarda un po’. Ogni riga ha la sua posizione, che parte da 0. Di conseguenza, visto che ti interessa prendere l’oggetto dell’email, la posizione in questo caso è esattamente 2. Ma cosa ti interessa della posizione 2? Il “value”, perciò il valore della Variabile sarà: cf7Campi.2.value. 

STEP 4 – CREA IL TAG EVENTO

Ora non ti resta che inviare a Google Analytics tutti i dati raccolti, ovviamente con un bellissimo evento. Quindi ti basterà creare un evento che si attiva quando un utente compila il form di contatto.

Segui questi passaggi:

• Sezione Tag > Nuovo.
• Tipo di Tag: Universal Analytics.
• Categoria: Contact Form 7.
• Azione: Form ID: {{CF7 – Form ID}}.
• Etichetta: Oggetto Email: {{CF7 – Oggetto Email}}.
• Adesso dentro le Impostazioni di Google Analytics, puoi inserire la Variabile delle Impostazioni di Analytics, se l’hai creata come ti ho spiegato, oppure puoi abilitare l’override e inserire la costante {{gaID}}nel campo ID monitoraggio (in alternativa puoi anche semplicemente inserire il tuo codice UA di Analytics).
• Aggiungi l’Attivatore: “cf7mailInviata”.
• Salva con il nome: “GA – Event – Contact Form 7”.

STEP 5 – VERIFICA L’IMPLEMENTAZIONE

Ora prova a compilare il form, se tutto è andata secondo i nostri malefici piani, dovresti vedere qualcosa del genere nella funzione di Debug e Anteprima!

Se le nuove implementazioni funzionano correttamente, adesso puoi tornare su Google Tag Manager e cliccare sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.

Psss… fammi sapere nei commenti se ti è piaciuta questa guida!

Link utili

Questa guida ha preso spunto da questo articolo di Julius Fed

A presto e… Buon Tag!