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

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?

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.

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.

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

Messaggio inviato

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:

Lascia un commento

7 commenti

  1. Ciao Stefano,
    ottimo articolo ti ringrazio per le preziose informazioni.
    Volevo chiederti una cosa. In questo articolo parli di come tracciare i form di CF7 con Analytics. Io avrei la necessità di fare la medesima cosa con Google Adwords.
    Dal mio account adwords ho creato già la conversione. Al termine della procedura mi viene fuori uno script da implementare su una thankyou page (che non vorrei implementare) con il seguente codice:

    /* */

    Sapresti dirmi come devo implementare il codice da te segnalato:
    on_sent_ok: ………………………………………
    in modo da avere una traccia corretta dell’azione compiuta?
    Grazie in anticipo

    • Ciao Francesco,
      per tracciare le conversioni AdWords ti consiglio uno dei due seguenti metodi:

      1) Crei un obiettivo in Google Analytics di Tipo Evento (https://support.google.com/analytics/answer/1032415) ed utilizzi il metodo spiegato nel mio articolo per tracciare l’invio del form. Poi importi l’obiettivo GA in AdWords (https://support.google.com/adwords/answer/2375435?hl=it) in modo che sfrutti come conversione AdWords l’obiettivo di Google Analytics.

      2) Crei una Thank You page nel tuo sito con all’interno il codice di conversione AdWords (assicurati che non sia raggiungibile da nessuna parte se non dal reindirizzamento di CF7). La pagina può essere ad esempio http://www.miosito.it/grazie; e nelle impostazioni aggiuntive di CF7 inserisci questa stringa:
      on_sent_ok: “location = ‘http://www.miosito.it/grazie’;”
      che reindirizza l’utente alla Thank You page dopo che il form è stato inviato.

          • Ciao,
            si, le conversioni tracciate come obiettivo le ritrovi nella sezione Conversione -> Obiettivi ma anche nei vari report Google Analytics se vuoi incrociare i dati con altri parametri. L’evento che utilizzi come base per l’obiettivo lo ritrovi invece nell’area Comportamento -> Eventi.

  2. Ciao Stefano, ho trovato utilissimo questo tutorial.
    Ho però una domanda: su Analytics vedo che viene tracciato l’evento, però non lo ritrovo nelle conversioni. Ho impostato l’obiettivo come Personalizzato, l’ho chiamato “Contatto”, e ho settato “Evento” come tipo, “Form” come categoria, “Invio” come azione e {{Page Path}} come Etichetta.
    Vedo l’invio come evento in GA in tempo reale, ma non tra le conversioni in tempo reale.
    E non riesco a capire dove sbaglio…
    Puoi darmi una dritta?

    • Ciao Tamara,
      probabilmente il mancato tracciamento della conversione dipende dalla configurazione errata dell’obiettivo. Accertati che i campi Categoria, Azione ed Etichetta contengano all’interno l’esatto valore delle impostazioni del tuo evento (se utilizzi l’impostazione “è uguale a” stai attenta anche alle maiuscole/minuscole).

      In secondo luogo nel campo etichetta non inserire la sintassi {{Page Path}}; questo metodo fa riferimento alla variabile del Google Tag Manager che Analytics non è in grado di riconoscere (in quanto si valorizza con l’url della pagina nella quale si è scatenato l’evento).

      Puoi tranquillamente compilare i campi Categoria ed Azione e lasciare vuoto Etichetta. L’informazione sul quel valore la trovi nell’evento.

      Spero di esserti stato d’aiuto.

Lascia un commento

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

Loading Facebook Comments ...