Tracciare l’invio di un form WordPress con Contact Form 7 e Google Tag Manager

Articolo aggiornato ad novembre 2018

Indice dell’articolo

In un altro post qualche tempo fa mi è capitato di spiegare come utilizzare Contact Form 7 e gli eventi di Google Analytics per tracciare l’invio di un form su un sito wordpress. Con il passaggio a Universal Analytics e l’utilizzo sempre più comune del Google Tag Manager oggi vi spiego come effettuare la stessa operazione di monitoraggio tramite lo strumento di gestione dei tag di Google.

Quello che ci serve è:

  1. Un sito worpress con il plugin Contact Form 7 installato;
  2. Un account Google Tag Manager (qui spiego come utilizzarlo);
  3. Un po’ di concentrazione 🙂 .

Un po’ di teoria

Il Google Tag Manager è già predisposto per il tracciamento di eventi come click su link, bottoni ed invio di form; per questo tipo di azioni GTM ha nativamente dei listener (“ascoltatori”) che hanno lo scopo di captare le interazioni degli utenti con il nostro sito.

In un articolo di qualche tempo fa’ ho spiegato come utilizzare questi listener insieme agli eventi di GA per tracciare alcune azioni specifiche. La differenza principale tra quel tipo di attività e quella che vi sto per illustrare è che, mentre i listener captano eventi generici (es: invio form), il metodo che vi illustro sotto ha l’obiettivo di monitorare specificatamente l’invio di un form da Contact Form 7.

Come funziona il metodo di tracciamento?

L’idea è semplice, in pratica andremo a creare un tag che ha lo scopo di generare un evento in Google Analytics quando qualcuno invia un form dal nostro sito; questo tag si attiverà solo ad un’azione specifica, cioè l’invio del form, ed invierà a GA i dati che decideremo di passare come informazioni nell’evento.

Attenzione: il metodo che utilizza la funzione on_sent_ok è deprecato e non sarà più disponibile dalla fine del 2017. Utilizza il nuovo metodo dell’evento DOM.

Entriamo nel nostro sito wordpress e rechiamoci nella sezione CF7 scegliendo il modulo che vogliamo monitorare

Amministrazione Contact Form 7

Entriamo nel modulo e clicchiamo sul tab “Additional settings” dove andremo ad inserire la seguente riga di codice:

on_sent_ok: "dataLayer.push({'event': 'contactForm7Inviato'});"

In pratica stiamo creando un evento che verrà “pushato” nel data layer e raccolto dal Google Tag Manager; questo evento diventerà il nostro attivatore per il tag che invece avrà l’obiettivo di creare l’evento su Google Analytics.

Salviamo ed il lavoro sul sito è terminato. Ora non ci resta che entrare nel Google Tag Manager per creare il nostro tag.

Aggiornamento Maggio 2017. L’utilizzo dell’on_sent_ok è deprecato, al suo posto è consigliabile utilizzare gli eventi DOM preimpostati di Contact Form 7, nello specifico l’evento wpcf7mailsent che indica il corretto invio del form.

Per utilizzare l’evento DOM non andremo nelle impostazioni aggiuntive di CF7 ma utilizzermo un TAG html personalizzato del Google Tag Manager.

Rechiamoci su GTM e creiamo un nuovo tag di tipo HTML personalizzato. Al suo interno incolliamo il seguente codice:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
dataLayer.push({'event': 'contactForm7Inviato'});
}, false );
</script>

Attiviamo il tag in Tutte le pagine del sito e salviamo.

Presupponendo che all’interno del nostro Tag Manger ci sia già il codice di monitoraggio di Google Analytics, andiamo su tag e clicchiamo nuovo.

Tag Evento CF7

Scegliamo come prodotto “Google Analytics”, selezioniamo come tag “Universal Analytics” e configuriamo il tutto:

  • ID monitoraggio: è l’id che troviamo nell’amministrazione del nostro GA;
  • Tipo di monitoraggio: evento (per passare le informazioni a Google Analytics)
  • Categoria, azione ed etichetta: sono le informazioni che passiamo a GA, solo le prime due sono obbligatorie, la label (etichetta) può essere omessa ma in questo caso la utilizzeremo per tenere traccia della pagina da cui è stato inviato il form.

Salviamo ed il tag è quasi pronto. Ora dobbiamo scegliere la regola di attivazione del tag, ovvero dire al tag di attivarsi quando e solo se il form è stato inviato.

Andiamo nella sezione “Attiva” e scegliamo Altro.

Altro

Configuriamo l’attivatore come “evento personalizzato”.

Evento personalizzato

Selezioniamo l’evento che dovrà dare il via libera al nostro attivatore,  nel nostro caso, contactForm7Inviato. (possiamo aggiungere dei filtri aggiuntivi da combinare insieme all’evento come ad esempio una pagina specifica in cui far attivare il tag).

Attivatore

Salviamo e testiamo se tutto funziona correttamente.

Anteprima e controllo

Il bello del GTM è che prima di pubblicare abbiamo la possibilità di vedere una preview dei nostri tag e capire come si comportano. Clicchiamo sul bottone “Anteprima” e colleghiamoci al nostro sito.

Quello che vedremo è una versione del nostro sito web con una finestra aggiuntiva con i dati relativi al Tag Manager.

Andiamo nella pagina dove si trova il nostro modulo di contatti e inviamo una mail.

Come vedete nell’immagine sopra, una volta inviato il form, l’attivatore funziona correttamente ed invia l’evento a GA. Come ulteriore conferma possiamo loggarci al nostro account Analytics e nella sezione “Tempo reale” -> “Eventi” vediamo che GA ha acquisito le informazioni inviate dal tag.

Evento Twmpo Reale GA

Inserito in:
L'Autore

Stefano Salustri

Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online. 📈

45 commenti

                                  Lascia un commento

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