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!
Agostino
11 10 2019
Ciao Matteo,
ottima guida e ottima spiegazione! Complimenti!
Una cosa non mi è chiara, sicuramente la mia poca preparazione in meteria…
Dopo aver configurato su Tag Magaer gli obiettivi, sarà necessario configurare anche su Analytics gli obiettivi?
Ti ringrazio ancora
Un saluto
Agostino
Matteo Zambon
11 10 2019
Ciao Agostino, se lo vuoi gestire come obiettivo su GA e quindi come conversione (su Google ads per esempio) allora la risposta è sì 🙂
A presto!
Agostino
23 10 2019
Grazie Matteo, davvero gentile. Grazie per la risposta.
Il tracciamento GTM funziona correttamente come da te descritto.
Ho creato l’obiettivo su GA ma non riesco a far tracciare correttamente la conversione.
Non so se ci deve essere corrispondenza tra ‘categoria | azione | etichetta | valore’ di GTM e GA o sbaglio altro.
Grazie ancora per la disponibilità e professionalità
Agostino
Matteo Zambon
24 10 2019
Ciao Agostino, nell’obiettivo ti basta mettere anche un solo parametro (ti consiglio anche solo categoria/azione). Fammi sapere se riesci!
Andrea
05 08 2019
Ciao Matteo e grazie anticipatamente dela tua risposta
nel caso avessi 2 form che generano lo stesso evento (cf7mailinviata) per poterli tracciare distintamente c’è un modo. Devo intevenire sull’attivatore evento personalizzato attivando l’attivatore non su tutti gli eventi personalizzati ma solo su alcuni e creare 2 attivatori per form?
Grazie
Andrea
Matteo Zambon
07 08 2019
Ciao Andrea, sì esatto lo fai usando la variabile di tipo dataLayer: cf7FormId che si basa sull’id del form 😉
Andrea
31 07 2019
Ciao Matteo,
per la gestione delle variabili posso passare il tutto tramite nome al posto della posizione?
Ad esempio cf7Campi.2.value -> cf7Campi[‘name-variabile’].value?
Grazie!
Matteo Zambon
01 08 2019
Ciao Andrea, no non credo sia fattibile 🙂 Prova (non l’ho testato) ma a naso non può funzionare.
Andrea
01 08 2019
Grazie! Ho provato ma nulla. Ulteriore domanda: nel caso abbiamo una lista multipla di valori il sistema mi passa solo il primo. Riesco in qualche modo a prenderli tutti?
Thanks
Matteo Zambon
07 08 2019
Ciao Andrea, lo farei con una variabile custom JavaScript che riprenderei nel momento dell’evento personalizzato di GTM. Personalmente non l’ho mai fatto ma la strada è questa 🙂
Fammi sapere!
ANDREA
22 08 2019
Grazie Mille Matteo e scusa il ritardo per la risposta
Matteo Zambon
26 08 2019
Figurati! Tempo di ferie 😀
max
11 07 2019
Ciao sai che non ho capito una cosa? quando creo l’obiettivo in google analytics, dato che ci sono valori dinamici, tipo
{{CF7 – Form ID}} … non ho capito nella creazione dell’obiettivo su analytics – nei dettagli obiettivo – in particolare per la voce Azione, che cosa dobbiamo inserire.
se è così: Azione È uguale a {{CF7 – Form ID}}
oppure
Azione È uguale a Form ID
oppure
Azione È uguale a Form ID {{CF7 – Form ID}}
+
Matteo Zambon
11 07 2019
Ciao Max, la seconda. Google Analytics non sa nemmeno che hai usato GTM, vedrà solo i valori passati 😉
Sara
13 02 2019
Ciao Matteo,
una domanda: se si ha lo stesso form in più pagine del sito c’è un modo per tracciare anche da quale pagina è stato compilato ?
Matteo Zambon
13 02 2019
Ciao Sara, ti ho risposto al commento sotto 🙂
Roberto Cucco
01 02 2019
Ciao,
perchè a me non funziona già allo step 3?
l’evento cf7mailInviata non si vede nel preview.
Ho provato anche a disattivare la thank you page.
Come ti dicevo nell’altro tuo articolo, una configurazione GTM simile a questa l’avevo e funzionava. Poi ha smesso.
E adesso già non sembra partire l’evento
Matteo Zambon
04 02 2019
Ciao Roberto, mi risulta funzionante (testato con plugin appena installato (5.1.1) di Takayuki Miyoshi, wp aggiornato alla 5.1) Sei sicuro di aver gestito correttamente il primo step? Nel caso riesci a farmi vedere degli screenshot?
A presto!
Andrea
27 01 2019
Ciao Matteo, complimenti davvero per tutto questo utilissimo sito!
Scusa l’ignoranza ma ho un paio di delucidazioni da chiederti:
1 – ho seguito tutte le tue istruzioni, sembra funzionare tutto ma poi non capisco dove dovrei ritrovarmi l’evento in Analytics… ho provato a vedere se compariva qualcosa nell’apposita sezione Eventi ma non si vede nulla.
2 – non contento, ho voluto provare a complicarmi la vita 🙂 creando un elemento di conversione all’interno della mia campagna attiva con Google Ads. L’intento sarebbe quello di registrare una conversione quando viene attivato cf7mailInviata e quindi mi sono creato un tag di tipo Monitoraggio delle Conversioni di Google Ads, ho inserito ID ed Etichetta Conversione ottenuti creando la conversione su Google Ads e ho messo come Attivazione il cf7mailInviata creato attraverso questa guida. Quel che ho ottenuto, è stato semplicemente il cambio di stato da Non verificato a Nessuna conversione recente all’interno della sezione Conversioni di Google Ads.
Potresti dissolvere la fitta nebbia che mi avvolge? :-))
Grazie mille, spero di non essere stato troppo lungo!!
Matteo Zambon
29 01 2019
Ciao Andrea e grazie per i complimenti 🙂
1- Puoi trovare info qui: https://www.tagmanageritalia.it/guida-come-tracciare-eventi-analytics-con-google-tag-manager/ e qui https://www.tagmanageritalia.it/glossario-rapporto-tempo-reale-google-analytics/
2- Se hai impostato la conversione correttamente la prassi è quella. Puoi usare l’obiettivo di Google Analytics come conversione Ads se lo importi. Diciamo che entrambe dovrebbero funzionare, solo che con GA non hai la problematica relativa ai dati di conversione (etichetta e id) e soprattutto sei moooolto più flessibile nell’identificare la conversione. Io di solito uso sempre GA per questo tipo di tracciamenti.
A presto!
Bernardo
24 07 2018
Cf7…scatena sempre le madonne
Matteo Zambon
30 07 2018
Non solo quelle 😉
Lorenzo
29 06 2018
CIao Matteo, grazie per l’articolo.
– E’ possibile inviare ad analytics il form “title” invece che l’id ?
– Perché nei campi del mio data layer manca il campo name: ‘your-subject’ secondo te?
Matteo Zambon
30 06 2018
Ciao Lorenzo 🙂
Serve a GTM più che a GA il valore dell’id. Puoi usare il selettore CSS invece del title.
Per la seconda domanda invece, il campo lo devi inserire nel tag HTML personalizzato. Se noti nell’esempio dello step 1 dico che devi inserire i campi che preferisci prendendoli dalla lista ufficiale: https://contactform7.com/dom-events/
Fammi sapere!
Antonio
09 05 2018
Salve,
Complimenti per la guida!
Come faccio a creare un obiettivo Google Analytics e importarlo in AdWords arrivati a questo punto?
Grazie!
Matteo Zambon
10 05 2018
L’obiettivo lo crei all’interno della vista. Una volta fatto e hai collegato AdWords con Analytics lo puoi importare attraverso il pannello delle conversioni di AdWords 🙂
A presto!
luca
22 03 2018
Ciao e complimenti per il sito, è molto utile. Una volta creato questo Tag come posso monitorarlo attraverso analytics?
Matteo Zambon
22 03 2018
Ciao Luca, assolutamente sì 🙂 L’importante è che non violi le TOS di Google Analytics salvando dati di tipo PII (https://www.tagmanageritalia.it/glossario-pii-personally-identifiable-information/)
A presto!