Vediamo quali sono i passaggi per tracciare e inviare a Google analytics gli eventi
T
ramite Google Tag Manager è possibile tracciare eventi sulle form di contatto, nello specifico, in questo articolo, vedremo come tracciare eventi derivanti da Contact Form 7.
Di seguito sintetizziamo le varie procedure da seguire per punti. Ecco quello di cui abbiamo bisogno:
Su Google Tag Manager
- Un TAG di tipo “Custom HTML”
- Un trigger di tipo “Custom Event”
- Un TAG di tipo” Universal analytics”
- Una variabile di tipo “Data Layer Variable”
Su Contact Form 7
Nel caso si faccia uso di cache e non si riescano a tracciare gli eventi
Su Google Analytics e Google Tag Manager
- Settare un obiettivo di conversione (google Analytics)
- Test di funzionamento (anteprima su Google Tag Manager ed eventi in tempo reale in Analytics)
Importante: se utilizzi una versione di Contact Form 7 antecedente al Maggio 2017
Google Tag Manager: creazione di un TAG di tipo "Custom Html"
Cliccare sulla voce di menu TAG e poi sul bottone new
Diamo il nome “wpcf7mailsent” al tag e scegliamo come tipo “Custom HTML”. A questo punto inseriamo il codice javascript:
… e come attivatore/trigger “All pages”
Analizziamo velocemente lo script che abbiamo appena aggiunto:
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
var grazie = document.getElementsByName(“grazie”)[0].value;
//alert(grazie);
dataLayer.push({
‘event’ : ‘wpcf7successfulsubmit’,
‘CF7formID’ : event.detail.contactFormId+’-‘+grazie
});
document.getElementById(‘responsive-form’).style.display = ‘none’;
}, false );
</script>
Il plugin Contact Form 7 supporta una serie di eventi che vengono scatenati in determinate situazioni.
Se la form viene inviata con il metodo AJAX, e quindi non atterriamo su di una pagina esterna a seguito del submit, potremo disporre dei seguenti eventi:
- wpcf7invalid – è avvenuta l’azione di submit ma la form non viene inviata a causa di campi con contenuto errato od assente (se/quando obbligatorio)
- wpcf7spam – è stato fatto un submit, ma la mail non viene inviata a causa della individuazione di una possibile azione di spam
- wpcf7mailsent – questo evento viene invocato quando la mail è correttamante inviata
- wpcf7mailfailed – viene fatto submit ma è sopraggiunto un errore per il quale non è stato possibile inviare la mail
- wpcf7submit – abbiamo cliccato su “invia”, ma la mail non è ancora stata inviata, potrebbero sopraggiungere eventi di errore come quelli sopra descritti (invalid, spam, failed)
L’evento che fa al caso nostro è sicuramente wpcf7mailsent , lo useremo pertanto come argomento della funzione di listener
document.addEventListener( ‘wpcf7mailsent’, function( event ){ …per “mettere in ascolto” la pagina web, e compiere delle azioni quando esso si verificherà.
Nella riga
var grazie = document.getElementsByName(“grazie”)[0].value;creiamo invece una variabile di nome “grazie” che conterrà il valore dell’attributo “name” di un campo hidden posizionato nelle singole form. Utilizzeremo questo valore per passare ad analytics un nome intellegibile e riconducibile ad essa. Ad esempio, se la form si trova in una pagina di prodotto, potremmo inserire come valore da passare, la stringa “grazie-pagina-prodotto.html”.
Alla riga seguente lanciamo una azione che invierà dei dati ad analytics tramite un evento di tipo “push”:
dataLayer.push({le informazioni o proprietà che passeremo allo script di analytics sono un evento che andremo a creare a breve come trigger o attivatore del tag “Contact Form Submission” :
‘event’ : ‘wpcf7successfulsubmit’,… e l’ID della form di contact form 7 concatenato con il più comprensibile nome che abbiamo inserito nel campo nascosto della form:
‘CF7formID’ : event.detail.contactFormId+’-‘+grazie.. a questo punto chiudiamo la funzione datalayer.push()
});.. e prima di chiudere il listener inseriamo una azione che “nasconderà la form con i suoi campi a seguito dell’invio, lasciando posto al solo messaggio di esito
document.getElementById(‘responsive-form’).style.display = ‘none’;Google Tag Manager: creazione di un trigger di tipo custom event
A questo punto creeremo il trigger o attivatore che verrà passato, come evento, alla funzione appena vista che invia i dati della form ad analytics.
Chiamiamo il trigger “ContactForm7 trigger”
mentre il tipo di trigger sarà un “custom event” con le seguenti impostazioni
..come potete notare il nome dell’evento corrisponde a quello passato nella funzione dataLayer.push():
dataLayer.push({‘event’ : ‘wpcf7successfulsubmit’,
Google Tag Manager: creazione di un TAG di tipo "Universal Analytics"
Il passo successivo è quello di creare un nuovo TAG che chiameremo “Contact Form Submission”.
Caratteristiche del tag:
Tag Type -> Universal Analytics
Track Type -> Event
Category -> contact-form
Action -> invio
Label -> {{CF7-formID}}
Non-Interaction Hit -> False
Google Analytics Settings -> la variabile con il codice se avete utilizzato quiesto metodo di memorizzazione
Enable overriding settings -> nel caso si voglia inserire direttamente il codice analytics ( in alternativa al punto precedente)
Il tag ha come attivatore il trigger “contactForm7Trigger” visto in precedenza.
Google Tag Manager: creazione di una variabile di tipo "Data Layer"
Nel TAG “Contactform submission” abbiamo inserito una variabile {{CF7formID}} nel campo “Label”. Andiamo a crearla!
Cliccare su Variabili –> Nuova
Chiamiamo la variabile “CF7-formID” e impostiamo come tipo “Data Layer Variable” con le seguenti impostazioni
Contact Form 7: creazione di un campo "Hidden"
Una volta che abbiamo preparato tutto l’occorrente su Google Tag Manager, passiamo all’inserimento, nelle form che tracceremo, di un campo nascosto nel quale scriveremo il nome da dare alla pagina virtuale di ringraziamento che verrà passata ad analytics attraverso il dataLayer.
La sintassi per inserire un campo di tipo hidden in Contact Form 7 è semplice:
[hidden your-email default:user_email "example@example.com"]Vediamo un esempio pratico. Creaimo un campo hidden con valore “grazie-pagina-contatti.html”
[hidden grazie default:grazie "grazie-pagina-contatti.html"]
Questo il codice html generato dallo shortcode:
<input name="grazie" value="grazie-pagina-contatti.html" class="wpcf7-form-control wpcf7-hidden" type="hidden">
Wordpress: esclusioni dello script di Contact Form 7 in caso di problemi con l'invio dell'evento
Può capitare che dopo aver fatto tutti i passaggi, l’evento non venga inviato ad Analytics. Escludendo di aver fatto errori nei passaggi appena visti, potrebbe esserci un problema legato alla cache. Non siamo in grado di riportare tutte le eventuali casistiche, anche in considerazione del fatto che i plugin, se manutenuti, possono eliminare, nelle versioni successive, eventuali criticità anche legate a conflitti con altri plugin.
Riportiamo una casistica da noi verificata, con l’utilizzo del plugin Autoptimize .
Per rimuovere il conflitto è necessario aggiungere alle esclusioni dei file javascript da NON comprimere, il file “scripts.js”
In generale, per capire se il problema possa essere legato alla cache, si consiglia di disattivarla temporaneamente e rifare i test.
Google Analytics: Settaggio dell'obiettivo di conversione
La creazione di un obiettivo non è obbligatoria per tracciare e monitorare l’evento di invio delle form. Esse possono essere monitorate ugualmente attraverso la sezione “In tempo Reale -> Eventi”
… e successivamente in “Comportamento –> Eventi”
Per completezza di informazione vi mostriamo anche la procedura di creazione di un obiettivo, senza dilungarci oltre sulle finalità e opportunità di utilizzo di questo sistema di misurazione delle conversioni.
Per prima cosa è necessario recarsi nella sezione “Amministrazione” del proprio pannello di analytics, e poi cliccare su Obiettivi
A questo punto dovremo cliccare sul bottone Nuovo Obiettivo
..sceglieremo l’opzione “Personalizzato”
… nel secondo step inseriremo il nome dell’obiettivo e come “Tipo” l’opzione “Evento”
…nel pannello dei dettagli, allo step 3, andremo a inserire
facendo attenzione a inserire il nome della categoria UGUALE a quello inserito nel TAG UNIVERSAL ANALYTICS in Google Tag Manager e a lasciare il campo Etichetta vuoto se si vogliano tracciare tutte le form presenti nel sito.
Google Analytics e Google Tag Manager: Test di funzionamento
Chiudiamo questo articolo parlando della fase finale di test.
Su Google Tag Manager.
Clicchiamo sulla preview e apriamo il sito web su un nuovo tab dello stesso browser, navigando fino a una pagina dove si trova una form.
Il TAG wpcf7msilsent è stato correttamente attivato.
Proviamo a inviare la form…
…e come possiamo notare è stato attivato anche il TAG Contact Form Submission che avrà inviato la stringa contenuta nel campo hidden della form + l’id della form stessa ad analytics
Su Google Analytics.
Nella sezione In tempo Reale -> Eventi viene registrata la nostra presenza sulla pagina dei contatti, e anche l’evento appena generato:
Cliccando sulla categoria “contact-form” potremo vedere il dettaglio:
…come possiamo notare abbiamo traccia della stringa che identifica la pagina da cui la form è stata inviata.
Cosa fare con versioni di Contact Form 7 antecedenti alla 4.7
L’evento on_sent_ok e on_submit sono stati ufficialmente rimossi dalla versione 5.0 di Contact Form 7 (vedi annuncio ufficiale dal sito di contactform7.com).
Nel caso in cui vi trovaste nella impossibilità di aggiornare il plugin, potreste avere il problema di far funzionare il listener che avete inserito nel tag wpcf7mailsent.
Di conseguenza, non verrà passato alcun evento allo script di analytics.
Ecco di seguito cosa fare:
- eliminare il tag wpcf7mailsent, non ci servirà più
- aggiungere nel tab “Additional settings” delle singole form di contact form 7 il codice di invio ad analytics dei dati della form
nell’esempio di cui sopra stiamo passando la stringa ‘grazie-pagina-contatti-fr.html’ ad Analytics, ed eliminando la form subito dopo l’invio
Bene, abbiamo terminato!
See you soon!
Leave a Comment