Contact Form 7 è uno dei plugin più usati per inserire form su WordPress: vediamo come tracciare gli invii
Con Contact Form 7 si possono costruire moduli molto personalizzabili, sia nelle funzioni che nell’aspetto, anche se, forse, l’interfaccia di questo plugin non è delle più intuitive.
È comunque molto utilizzato anche da diversi sviluppatori di temi che lo inseriscono direttamente nel loro pacchetto.
Per questo, chi compera un tema in uno dei tanti marketplace, può avere occasione di utilizzarlo.
Sia che tu lo abbia installato per conto tuo, sia che tu lo abbia trovato “in dote”, avrai comunque la necessità di tracciare gli invii. Per fare questo, puoi utilizzare Google Tag Manager, un potente strumento che Google ci mette a disposizione per gestire i nostri strumenti di tracciamento.
Aggiornamento: dalla fine del 2017, on_sent_ok (utilizzato di seguito) è deprecato ed è stato ufficialmente rimosso da Contact Form 7 a partire dalla versione 7.5.0.
Per continuare a tracciare gli invii del form su Google Tag Manager, il creatore del plugin ha messo a disposizione una soluzione alternativa (che richiede la modifica del file functions.php) a questo link.
Come tracciare gli invii dei moduli creati con Contact Form 7
Cosa ci serve? Partiamo da qui:
- Un sito in WordPress!
- Il plugin Contact Form 7 installato e attivato;
- Un form realizzato e inserito nel sito;
- Google Tag manager configurato e installato sul sito;
- L’ID di monitoraggio di Google Analytics relativo al sito.
Se devi installare ancora le statistiche, puoi vedere come fare in questo post che ti spiega come installare Google Tag Manager su WordPress.
Una volta che abbiamo tutti questi elementi, possiamo procedere.
Contact Form 7 utilizza una funzione AJAX per l’invio, quindi non ricarica la pagina (né ci redireziona altrove) dopo che si è verificato l’invio del form. Non avremo bisogno, quindi, di una pagina di ringraziamento per contare gli invii: basterà “dire” a Tag Manager di prendere nota dell’invio del form e comunicarlo ad Analytics.
Primo step: configurare il form di contatto
Entrare nella configurazione del form che vogliamo tracciare e selezionare la Tab “Impostazioni aggiuntive”; nell’apposito spazio scrivere:
on_sent_ok: “dataLayer.push({‘event’: ‘FormContatto’});”
Questa riga dice al nostro Tag Manager (che abbiamo già installato): “quando il form viene inviato con successo, dì alla tua interfaccia di contare 1 evento chiamato FormContatto”. Posso sostituire “FormContatto” con qualsiasi altro nome.
Con questo semplice comando, abbiamo finito di settare Contact Form 7.
Configurare Tag Manager per contare gli invii da Contact Form 7
Accedo a Google Tag Manager e, per prima cosa, creo un attivatore: è la condizione che, al suo verificarsi, attiva (lo dice il nome) il Tag. Dal menu a sinistra, vado nella sezione “Attivatori” e clicco sul pulsante “Nuovo” per crearlo e configurarlo.
Sullo schermo apparirà l’area di configurazione dell’attivatore: clicchiamo su “Scegli un tipo di trigger per configurare l’attivatore” e, tra le scelte disponibili, scegliamo Evento Personalizzato.
Nel popup di configurazione che si aprirà, immettiamo il nome dell’evento che genererà il conteggio dell’invio form, cioè FormContatto (o qualunque sia il nome impostato in CF 7).
Salviamo, dando un nome all’attivatore (ad esempio “CF7 invio”).
Finalmente, siamo pronti per creare il Tag!
Dal menu di GTM, clicchiamo su Tag e poi su NUOVO: come per l’attivatore, si aprirà una finestra di configurazione.
Settiamo il nostro Tag come segue:
- Tipo: Universal Analytics
- ID Monitoraggio: il nostro ID di monitoraggio di Analytics, oppure la gaProperty, se l’abbiamo impostata
- Tipo di monitoraggio: evento
- Categoria: facoltativa, possiamo inserire “Form”
- Azione: facoltativa, possiamo inserire “Invio”
- Etichetta: {{PagePath}} (lo scegliamo cliccando sull’icona del mattoncino a destra)
- Valore: lascio vuoto
Nella sezione “Attivazione”, andiamo a selezionare l’attivatore che abbiamo creato prima (CF7 Invio).
Diamo un nome al Tag (tipo CF7 Contatti), salviamolo e, prima di pubblicarlo, facciamo un test!
Testare il funzionamento del Tag… e pubblicare!
Prima di cliccare su “Pubblica”, possiamo far uso del comodo strumento di anteprima che Tag manager ci mette a disposizione; dalla freccia in basso accanto a “Pubblica”, scegliamo Anteprima.
Google Tag Manager si caricherà in una modalità che ci permetterà di vedere se abbiamo fatto tutto correttamente: basta visitare il sito da una nuova scheda del browser, per vedere in basso una nuova area.
Qui, troveremo tutti i tag presenti nella pagina e vedremo quali vengono attivati via via che gli eventi che li innescano si verificano; così, potremo verificare che funzioni tutto correttamente prima di mettere il Tag effettivamente in azione.
Visitiamo una pagina del sito che contiene il form da testare, compiliamolo e inviamolo: se abbiamo configurato correttamente il Tag, Google ce lo segnalerà nell’area in basso, non appena l’invio del modulo sarà avvenuto (on_sent_ok, ricordi?).
Vedi una schermata simile a questa?
Complimenti, hai appena configurato Google Tag Manager per contare gli invii da Contact Form 7!
