Come Tracciare l’Evento di Invio Modulo Contatti con il Plugin Contact Form 7 tramite Google Tag Manager

Questa guida è perfetta per te se:

• utilizzi il plug-in Contact Form 7 sul tuo sito WordPress
• desideri impostare l’invio di moduli di contatto come obiettivo in Google Analytics
• usi Google Tag Manager (GTM, per comodità) per integrare Analytics

In estrema sintesi i punti da affrontare sono i seguenti:

1. creare un tag di GTM che generi un evento data layer quando il messaggio scritto nel modulo viene effettivamente inviata (e che includa anche l’ID del modulo, nel caso nel tuo sito ci siano vari moduli con ID diversi)
2. creare un attivatore GTM che cerchi l’evento data layer appena descritto (quello che si genere quando viene inviato il messaggio) e attivi a sua volta un secondo tag (quello sottostante nel punto 3)
3. creare un tag GTM che invii queste informazioni dell’evento a Google Analytics
4. creare una variabile per l’ID del modulo compilato
5. impostare un obiettivo in Google Analytics in base all’evento

Tutto questo ti sembra un caos totale?
Non ti biasimo, perché lo è.
Tu però fidati di me e prosegui nella lettura.

Come tracciare i moduli inviati tramite Google Tag Manager: il video

Primo passaggio: creare un tag di GTM che generi un evento quando il messaggio scritto nel modulo viene effettivamente inviato

Devo fare una premessa.
Quando si fa clic sul pulsante “Invia” su un modulo di contatto creato con Contact Form 7, viene generato un evento di invio del modulo.
E fin qui, tutto regolare.
Sfortunatamente, però, questo evento scatta anche quando ci sono degli errori di mezzo, ad esempio quando non tutti i campi obbligatori siano stati compilati: il modulo potrebbe non essere stato effettivamente inviato, ma l’evento è comunque attivato.

La buona notizia è che con Contact Form 7 sono contemplati diversi eventi corrispondenti a diversi scenari:

• wpcf7invalid : si attiva quando l’invio di un modulo è stato completato correttamente, ma il messaggio non è stato inviato perché sono presenti campi con input non valido
• wpcf7spam: si attiva quando l’invio di un modulo è stato completato correttamente, ma il messaggio non è stato inviato perché è stata rilevata una possibile attività di spam
• wpcf7mailsent : si attiva quando l’invio è andato a buon fine. Questo è quello che ci interessa!
• wpcf7mailfailed: si attiva quando l’invio di un modulo è stato completato correttamente, ma l’invio non è riuscito
• wpcf7submit: si attiva quando l’invio di un modulo è stato completato con successo, indipendentemente da altri incidenti di percorso

Dicevo che “wpcf7mailsent” è il fattore importante.
Come descritto, questo elemento si attiva quando il modulo è stato effettivamente compilato e il messaggio è inviato correttamente.
A questo punto per procedere con il tracciamento dobbiamo utilizzare una stringa di codice per creare un evento a livello di Data Layer.
Il che suona troppo tecnichese, forse.
Il “Data Layer” fa da tramite tra più livelli, mettiamola così.
In parole povere, dobbiamo dire al sistema di monitorare il sito e fare attenzione quando scatta l’invio del modulo: quando questo avviene, viene creato un evento nel Data Layer chiamato “moduclocf7inviatoconsuccesso”, il quale a sua volta attiverà un attivatore – perdona il gioco di parole – che permetterà l’invio dei dati ad Analytics (punti 2 e 3 sottostanti).

Non solo, già che ci siamo cattureremo anche l’ID del modulo di contatto, in modo da passare anche questa informazione ad Analytics: è utile nel caso tu abbia vari form diversi e ti stia domandando quale form ottiene più compilazioni.

Come sapere quali sono gli ID dei tuoi moduli costruiti con Contact Form 7?
Li scopri così:

• Dentro WordPresso clicca a sinistra su “Contatto”
• ti compariranno i moduli che avrai creato
• sulla destra nella colonna “ShortCode” vedrai una stringa di code: l’ID è presente lì sotto forma di una sequenza numerica a quattro cifre

Chiusa la parentesi sull’ID dei moduli di contatto, ecco come portare a termine il primo passaggio:

1. accedi a GTM
2. clicca su “nuovo tag”
3. su configurazione scegli “html personalizzato” e incolla il seguente codice e su “attivazione” seleziona la voce “All pages”

<script>document.addEventListener( ‘wpcf7mailsent’, function( event ) {        dataLayer.push({          ‘event’ : ‘moduclocf7inviatoconsuccesso’,          ‘CF7formID’ : event.detail.contactFormId        });     }, false );</script>

Secondo passaggio: creare un attivatore che intercetti l’evento di invio del modulo

Molto semplice:

1. Clicca su Attivatori e poi su “Nuovo”
2. Come tipo seleziona “Eevento personalizzato”
3. Su nome evento inserisci nuovamente “moduclocf7inviatoconsuccesso”
4. spunta la casella “tutti gli eventi personalizzati”

Ecco, così abbiamo creato “il ponte” tra il tag creato prima e quello che stiamo per inserire nel seguente passaggio

Terzo passaggio: l’ultimo tag

Accedi a GTM e seleziona la casella “Nuovo tag” o vai alla sezione “Tag” e creane uno lì. Assegna un nome al nuovo tag come preferisci (io ho scelto “Tag Contact Form 7 realmente inviato (secondo tag)”).

Compila i seguenti campi così:

Tipo di tag: Universal Analytics

Tipo di monitoraggio: Evento

Successivamente imposterai la categoria, l’etichetta e altri parametri che se non conosci puoi scoprire visitando l’apposita guida ufficiale di Google.

Categoria: puoi impostarla come preferisci e verrà visualizzato in Google Analytics quando vai al rapporto sugli Eventi. Nel mio caso ho inserito “modulo-di-contatto”.

Azione: ancora una volta, la scelta è tua. Ho inserito “messaggio-via-modulo-inviato-con-successo”.

Etichetta: se desideri tenere traccia di moduli diversi (perché ne hai vari nel tuo sito, con ID diversi), devi inserire {{CF7-formID}} .
Dopodiché segui il resto delle istruzioni qui sotto.

Valore: non ho aggiunto un valore.

Hit da non interazione: in sostanza, se qualcuno atterra su una pagina e completa l’invio di un modulo e poi se ne va senza visualizzare altre pagine, ciò sarebbe considerato come rimbalzo a meno che non si scelga Falso.
Personalmente credo che qualcuno che completa l’invio di un modulo e poi se ne vada non dovrebbe essere considerato per forza un rimbalzo, dunque io ho scelto “False”.

Impostazioni di Google Analytics: ovvero il tuo ID monitoraggio (UA-123456-1 o simile).
Avevo precedentemente impostato il mio come variabile costante, il che spiega perché nella screenshot qui sotto vedi dice {{GASV aka Impostazione di Google Analytics}}

Altre impostazioni: ignora pure

---

Tracciare moduli differenti

Come anticipato, potresti avere diversi moduli all’interno del tuo sito WordPress e potresti – comprensibilmente – voler monitorare quali convertono meglio di altri.
Quindi, morale della favola, devi tracciarli tutti quanti dentro Analytics.
Insomma, dobbiamo fare in modo che quando il modulo viene inviato, l’ID del modulo venga inserito nel Data Layer, per poi essere acquisito in GTM e, conseguentemente, negli eventi di Analytics.

Procedi così: aggiungi una nuova variabile definita dall’utente denominata CF7-formID. Imposta il nome della variabile come CF7formID (così come lo vedi scritto qua, con questi maiuscoli e minuscoli).

Impostare l’Obiettivo in Google Analytics

E siamo alla battuta finale!
Finalmente è arrivato il momento di impostare l’obiettivo/conversione all’intenro di Analytics.
Segui queste istruzioni:

1. ovviamente apri Analytics e scegli in basso a sinsitra la voce “amministratore” (simbolo dell’ingranaggio)
2. da lì clicca su “Obiettivi” (ultima colonna a destra)
3. clicca sul bottone rosso per aggiungere uno nuovo
4. nella lista di modelli seleziona “personalizzato”
5. dagli il nome che preferisci (io l’ho chiamato “Contact Form 7 Inviato con Successo”)
6. compila il resto come da screenshot qui sotto facendo attenzione alla nomenclatura che avevi usato precedentemente su GTM.
   Se non vuoi tracciare un modulo in particolare, lascia lo spazio bianco dove qui sotto vedi 1932, che nel mio caso è l’ID del modulo di contatto che volevo tracciare io.
   Per tracciare altri moduli specifici, ripeti il procedimento ma ovviamente cambia l’ID del modulo

Bene, spero che questa guida sia stata di tuo aiuto.
Per qualsiasi cosa utilizza pure l’apposita area commenti qui sotto.
Alla prossima!

---

Crea finalmente campagne DAVVERO efficaci!