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

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

    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.