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!
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:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7mailInviata",
"cf7FormId" : event.detail.contactFormId,
"cf7Campi" : event.detail.inputs
})
});
</script>
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).
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:
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:
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.
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:
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!
Questa guida ha preso spunto da questo articolo di Julius Fed
A presto e… Buon Tag!
LUISAVIAROMA è uno dei principali fashion e-tailer di lusso al mondo, con oltre 5 milioni…
All’interno del vasto e competitivo mercato della Grande Distribuzione Organizzata (GDO), Mondo Convenienza rappresenta uno…
Se ti occupi di marketing o advertising, saprai che i funnel rappresentano il percorso che…
È stato un nuovo record per il GA4Summit: oltre 500 professionisti e professioniste del web…
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
View Comments
Ciao Matteo.
Una domanda ho diversi moduli nel mio sito web e vorrei poter tracciare Il titolo del modulo oltre all'id o al Oggetto.
è possibile far ciò?
Si certo, dovresti trovarlo tra i parametri dei push. Ti basterà quindi creare una variabile di livello dati.
Fammi sapere!
Ciao,
ho seguito la guida passo per passo seguendo prima la modalità con il plugin duracelltomi attivato e, non funzionando, ho provato l'altra strada.
Purtroppo in entrambi i casi facendo debug anteprima con google chrome l'evento non mi compare mai.
A cosa può essere dovuto?
Ciao Marco, hai guardato se nel source compare? Ti basta mettere view-source: prima dell'url nella barra di Chrome per vedere e cerchi GTM-
Nel caso potrebbe essere qualche conflitto con il tema o altri moduli :(
Fammi sapere!
Buongiorno Matteo,
complimenti per la guida davvero utilissima! Ho seguito i vari passi e sono riuscita a creare l'evento in Google Analytics che traccia correttamente gli invii del form (solo non valorizza il campo con l'argomento della mail, ma pazienza).
Non capisco però perché l'obiettivo creato in GA appoggiandosi a quell'evento invece non tracci nulla e non risulti neanche visibile tra quelli importabili come conversioni in Google Ads.
Hai per caso qualche consiglio anche su questo?
Grazie mille
Ciao Mila, di solito devi attendere qualche ora per vedere i dati in piattaforma ads, di solito 24 ore.
Fammi sapere!
Come non detto: era solo un problema di ritardo :-). Grazie lo stesso!
Uh ecco :)
Ciao Matteo,
ho seguito la guida passo passo, il tag sembra essersi attivato (era in "tags fired"), ma su Analytics l'evento non sembra essersi registrato. Cosa potrei aver sbagliato?
Grazie mille
Ciao Valentina, verifica nel rapporto reale e se sono presenti nel report eventi: https://www.tagmanageritalia.it/glossario-rapporto-tempo-reale-google-analytics/
Fammi sapere :)
Ciao Matteo,
E' normale che GA si perdi qualche form completato? Per esempio in un form, GA indica che è stato completato 43 volte mentre il plugin Contact Form CFDB7 ne indica 50 (ovviamente nessun bot).
Grazie!
Grazie Matteo, e gentile come sempre!
Problemi con dispositivi mobile non ce ne sono, dal momento che le compilazioni avvengono anche tramite essi.
In realtà io l'evento registrazione form l'avevo impostato tramite la guida https://www.tagmanageritalia.it/tracciare-plugin-contact-form-7-wordpress-google-tag-manager/#gref . Potrebbe essere che questa guida avanzata abbia dati più accurati? O tra le due, non cambia nulla?
Ciao Nicolò, stai guardando gli obiettivi di GA o il numero degli eventi? Occhio che se guardi gli obiettivi il loro scope è per sessione e non per hit :)
Fammi sapere :)
Ciao Nicolò, ricordati che esistono adblocker, estensioni che bloccano e JavaScript che non funzionano. Non ci sarà mai il 100% del tracking reale se lo facciamo client side.
Quindi, in breve, sì è normale. Il numero di mancanze è un po' altino, supera i canonici 10%. Verifica se ci sono problemi con dispositivi mobile o simili :)
Fammi sapere!
Ciao Matteo, grazie mille per la guida! Molto utile e sono riuscito a crearlo in Tag Manager
Una domanda: come faccio a creare l'evento nel Pixel di Facebook?
Quindi a creare una conversione personalizzata nel Pixel, che mi mostri il numero di volte che il form viene compilato e inviato (come avviene su Analytics, ma all'interno del Pixel)
Grazie ancora!
Era proprio il tag script di apertura e chiusura che mi mancava!
Grazie mille, funziona tutto alla perfezione!
Ottimo :)
Grazie Matteo!
Per il momento ho provato a fare come mi hai consigliato, usando l'evento standard Lead, ma purtroppo non si attiva...
Ho già il Pixel PageView attivo, con il suo tag dedicato che ho creato seguendo un'altra tua guida.
All'interno del nuovo tag Custom HTML, il codice fbq('track', 'Lead'); devo comunque inserirlo all'interno di ... giusto? Perché forse sto tralasciando questo piccolo fondamentale particolare...
E poi come Attivatore scelgo l'Evento personalizzato cf7mailInviata, corretto?
Grazie!
Ciao Riccardo, ti basta creare il tag e mettere lo stesso attivatore che usi per il tag di GA.
Ricordati di metterlo dentro il tag script.
Fammi sapere
Ciao Riccardo, ti basta fare un tag Custom HTML con il tuo trackCustom:
fbq('trackCustom', 'nomeEventoCustom');
Ti consiglierei un evento standard di tipo Lead ;)
PS: Ti consiglio vivamente questo corso che ho creato ad hoc (lo trovi anche nello shop): https://club.tagmanageritalia.it/corso-facebook-pixel-perfect-2020/
A presto!
Ciao Matteo! Inanzitutto ti ringrazio per la guida!
Premetto che sono un newbie in GTM. Ho provato a seguire i passi che spieghi per andare a tracciare form 7 per wordpress. Ho creato il Tag e l'attivatore. Lancio l'anteprima, riempio il form ma GTM verifica solamente gi eventi standard di visualizzazione pagina. Nessuna tracia del completamento del form :( Secondo te dove può essere il problema? devo attivare qualche impostazione in Wordpress?
Ciao Jacopo, sicuramente c'è qualcosa nella guida che non hai riportato fedelmente. Se hai il plugin di Duracell Tomi, una buona alternativa è questa guida: https://www.tagmanageritalia.it/tracciare-plugin-contact-form-7-wordpress-google-tag-manager/
Fammi sapere!
Il "Listener" praticamente sostituisce l' integrazione nel plug in giusto? il Listener pusha i dati sul datalayer come se lo facesse l' attivazione dell' integrazione del plug in giusto?
Ciao Greta, sì esatto :)
Ciao Matteo, grazie per le tue guide.
Sto cercando di usare questo metodo per mandare i dati in Analytics. (in gtm debug vedo popolate correttamente le variabili email, oggetto, ecc...) e il tag di invio form si attiva correttamente.
Sto utilizzando da poco GA4 e non riesco a visualizzare l'evento negli eventi esistenti di Analytics.
Qui vedo solo: gli eventi: first_visit, page_view, scroll e session_start.
Ci possono essere ritardi nella visualizzazione degli eventi in GA?
O forse questa guida non funziona con GA4?
Ciao questa guida funziona con qualsiasi strumento di tracking. Semplicemente attivi il tipo di Tag (quindi di servizio: FB, GA, GA4, CRM etc) una volta che l'utente compila il form.
Dovresti verificare con il debug di GTM cosa effettivamente arriva in GA4 selezionando l'icona di G-XXXXXXX. Ho fatto un corso che spiega come usare GA4: https://club.tagmanageritalia.it/corso-google-analytics-appweb/
Fammi sapere
Per quale motivo abbiamo creato due tag: 1) Contact Form Listener e 2) GA - Event - Contact Form 7?
Cosa differenzia il secondo dal primo?
Perchè invece di usare l' integrazione nel plug in di GTM per WP, questo Listener mi permette di preparare il terreno per l' evento che voglio scatenare. Il senso del ragionamento dovrebbe reggere, giusto?
Yep, esatto
si matteo, questo l' ho capito. Intendevo chiedere per quale motivo serve prima creare il "Listener". Serve per pushare nel datalayer il dato che "configura" GA per un evento specifico giusto? (In questo caso l' invio del Contact Form 7) Cerca di "passarmi i terminI", non è terminologia tecnica specifica ma il concetto è giusto?
Ciao Riccardo, si è giusto :)
Il motivo è che senza listener non hai un qualcosa che ti dice in modo chiaro che il form è stato compilato.
Ciao Riccardo ti ho risposto all'altro commento :)
1) Serve per avere l'evento che gestirà l'attivatore
2) Può essere qualsiasi servizio di tracking che vuoi agganciare
Correggetemi se sbaglio: con il primo tag configuriamo il datalayer per mettere a disposizione di GTM e quindi di GA le informazioni che necessitiamo, poi con il secondo tag scateniamo l' evento? .... E' come installare il Pixel base di FB per poi far scatenare gli eventi standard/custom? Molto gentili! a breve compro il libro, nel frattempo avrei bisogno di integrare quantomeno le funzioni base...
Ciao Riccardo, il primo Tag ti permette di avere un evento custom per poter agganciare GTM, il secondo Tag può essere qualsiasi altro servizio (come ad esempio Facebook, Google Analytics e così via).