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

Articolo aggiornato a Maggio 2017 con il nuovo metodo dell’evento DOM al posto di on_sent_ok

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.

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

Lascia un commento

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

  3. Ciao Stefano grazie per il tuo articolo, dato che dovrei fare più campagne su un unico sito devo fare moduli contatti diversi , e vorrei tracciarli con il codice di adwords e possibile? se no con il sistema obbiettivi di analitics cambio solo il nome in contact for7 e poi in 8 e cosi via?

    • Ciao Vittorio,
      il metodo più semplice è utilizzare Google Tag Manager ed il sistema di invio di eventi tramite CF7 a Google Analytics. Se non hai bisogno di diversificare i form (a livello di campi) puoi anche utilizzare un unico formulario e tramite le impostazioni aggiuntive di CF7 inviare un evento al data layer da utilizzare poi come attivatore per un evento GA (segui esattamente la mia guida).

      Il modo per differenziare i form è creare diversi tag Evento Google Analytics che si attivano tutti per l’evento personalizzato contactForm7Inviato in combinazione con l’url della pagina dove si trova il form (do per scontato che i form si trovino in pagine diverse).

      Provo a spiegarmi meglio con un esempio:

      Pagina Prodotto 1 | url=prodotto1 | Form CF7 -> Creare un TAG Evento GA (con Etichetta = Prodotto1) che si attiva per Evento personalizzato = contactForm7Inviato + Page Path = /prodotto1/
      Pagina Prodotto 2 | url=prodotto2 | Form CF7 -> > Creare un TAG Evento GA (con Etichetta = Prodotto2) che si attiva per Evento personalizzato = contactForm7Inviato + Page Path = /prodotto2/

      In questo modo avrai eventi diversi per ogni form a seconda di qual’è la pagina in cui si trova. A questo punto per ogni evento Google Analytics puoi creare un obiettivo e differenziare quindi le conversioni AdWords.

      Se i form dovessero trovarsi tutti nella stessa pagina puoi utilizzare altri parametri differenzianti come ad esempio l’id di ciascuno (che puoi personalizzare su CF7).

      Spero di non essere stato troppo contorto nella spiegazione 🙂

      Un saluto

      Stefano

  4. Ciao

    Sto cercando di risolvere questo problema dopo un paio d’anni dalla scrittura di questo post.

    Purtroppo oggi (maggio 2017) non è più consentito aggiungere l’istruzione “on_sent_ok:” sugli Additional settings.

    Idee? 🙂

    Thanks!

  5. ciao stefano,
    sto cercando di seguire la tua guida ma mi trovo un po’ in difficoltà perché alcuni passaggi non sono uguali a quello che trovo nell’attuale GTM.
    In particolarmodo nella creazione del secondo tag molte parti sono diverse.
    Ti allego un schreenshot https://www.screencast.com/t/lNWyYBjUZ
    I miei dubbi sono: La categoria: tu hai messo Form e Azione Invio. Non seleziono una delle variabili di GTM?
    Poi mi chiede di Di selezionare una variabile impostazioni. Cosa metto?
    Grazie della tua disponibilità.

    • Ciao Federico,
      effettivamente rispetto alla pubblicazione del mio post l’interfaccia è cambiata per alcune cose.

      Per quanto riguarda Categoria e Azione nel mio esempio ho inserito dei valori fissi (Form e Invio). Tu, a seconda delle esigenze, puoi decidere di inserire delle variabili predefinite GTM (es: Form ID) o personalizzate (es: Titolo del form – da catturare con una variabile dom); dipende quali informazioni possono esserti utili.

      Per quanto riguarda la sezione Impostazioni di Google Analytics, se non l’hai già fatto, va creata una Variabile Google Analytics (è stata introdotta a maggio 2017) che sostituisce l’inserimento manuale o tramite costante dell’ID di monitoraggio di Google Analytics. Ti invito a guardare questo video per una spiegazione esaustiva su come utilizzarla: http://www.tagmanageritalia.it/guida-base-variabile-google-analytics-google-tag-manager/.

  6. Complimenti per l’articolo.
    Scusate la domanda: considerando che ho bisogno di rilevare l’ID del contact form e uso Durecell Tomi per farlo perché altrimenti il valore sarebbe vuoto, come posso rilevare l’ID del form e passarlo come variabile di modo che l’event al’interno di ga() valga l’ID del form?
    Io ho impostato il custom html tag, poi creato una dlv che prelevi l’ID usando gtm4wp.formElementLeave.formID e poi un attivatore: forse qui sorge l’errore.
    MI aiutate?

  7. Ciao Stefano.
    Due cose: la prima è che putroppo il selettore css non è sufficiente, nel dataLayer non trovo nulla valorizzato per un ID o una classe univoce che un custom script possa intercettare. :/ Ma grazie della dritta.
    Ho risolto con il modulo di Duracell Tomi che estrapola l’ID del form e che mi prelevo come Variabile di Livello Dati per valorizzare l’Azione dell’evento su GA. 🙂

    Seconda cosa… possibile che lo scroll col mouse su questo sito non funzioni? 😉

    Grazie!

    • Ciao Alessandro,
      mi sono guardato la documentazione del plugin (che non conoscevo molto bene) ed effettivamente dalla release 1.2 è stata creata una variabile gtm4wp.cf7formid che contiene l’id del form (https://github.com/duracelltomi/gtm4wp/blob/master/readme.txt). Quindi basta che utilizzi quella variabile ed in automatico puoi inviare il parametro dell’id tramite un evento Google Analytics.

      Per lo scrolling, se utilizzi sempre Duracelltomi, in automatico vengono inviati al datalayer 5 diversi eventi quando l’utente si sposta sulla pagina:
      * gtm4wp.reading.articleLoaded: contenuto caricato
      * gtm4wp.reading.startReading: inizio scroll
      * gtm4wp.reading.contentBottom: fine contenuto
      * gtm4wp.reading.pagebottom: fine pagina
      * gtm4wp.reading.readerType: dato ‘scanner’ o ‘reader’ a seconda del tempo che ha impiegato nella fruizione.

      Puoi utilizzare questi eventi come attivatori per inviare Eventi direttamente a Google Analytics. Da quello che ho visto il plugin riconosce in automatico le sezioni della pagina da agganciare quindi a seconda del template che utilizzi potrebbe non funzionare correttamente.

      In alternativa ti suggerisco di provare questo metodo: https://www.stefanosalustri.com/blog/tracciare-lo-scroll-delle-pagine-con-google-tag-manager/.

      Stefano

  8. Ciao Stefano,
    grazie alla tua guida sono riuscito a comprendere meglio il funzionamento dei TM. Ti chiedo un’ulteriore info. Se io a questo punto voglio collegare le conversioni di adwords al CF7 come mi conviene procedere?
    è corretto procedere così:
    – Seleziono il tag: Monitoraggio delle attività adwords;
    – Imposto id etichetta e valore conversione (qui ho un dubbio se selezionare una conversione di adwords al caricamento di una pagina o di un clic)
    – Imposto come attivatore l’evento personalizzato che ho usato per analytics.
    è corretto il procedimento?
    grazie
    federico

    • scusa stefano, rileggendo i commenti mi sono risposto in parte da solo.
      visto che vorrei fare a meno della thank page sto provando l’altra strada.

      Ho creato su analytics un obiettivo e poi l’ho importato su adwords.
      A questo punto però ho un piccolo problema. Se imposto come tipo obiettivo evento, (categoria Contact Form e Azione Invio-Mail) analytics non registra la compilazione del formulario, nonostante nell’header ho incollato
      document.addEventListener( ‘wpcf7mailsent’, function( event ) {
      ga(‘send’, ‘event’, ‘Contact Form’, ‘Invio-Mail’);
      }, false );

      Grazie

Lascia un commento

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

Loading Facebook Comments ...