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

tag html contact form google tag manager

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? 😛 ).

attivatore contact form google tag manager

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.

data layer contact form google tag manager 3

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

variabile contact form id google tag manager

 

  • 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. 

variabile data layer contact form

 

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

tag evento contact form google analytics

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!

 

verifica contact form google tag manager 1

verifica contact form google tag manager 2

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!

Condividi anche tu Google Tag Manager!
  • Reply

    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 😉

  • Reply

    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 😀

  • Reply

    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 😉

  • Reply

    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 🙂

  • Reply

    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!

  • Reply

    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!!

  • Reply

    Bernardo

    24 07 2018

    Cf7…scatena sempre le madonne

    • Matteo Zambon

      30 07 2018

      Non solo quelle 😉

  • Reply

    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!

  • Reply

    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!

  • Reply

    luca

    22 03 2018

    Ciao e complimenti per il sito, è molto utile. Una volta creato questo Tag come posso monitorarlo attraverso analytics?

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.