Molto spesso mi arrivano richieste del tipo: “Matteo ma come faccio a catturare i valori esatti dei campi presenti in questo form?”.

Questo è un tracciamento sicuramente molto interessante, soprattutto per capire gli errori. In particolare:

• quando l’utente sbaglia qualcosa e compare il messaggio di errore dei form
• i pattern di comportamento degli utenti
• gli errori che vengono fatti più spesso

Essendo a conoscenza di queste informazioni immagina quanto puoi migliorare la User Experience.

Il problema è che spesso molti vogliono tracciare anche i dati personali, i cosiddetti PII (Personally Identifiable Information) come nome, cognome, email, ecc, ma devi sapere che non  sono permessi da Google Analytics.

E allora come si fa? Si criptano i dati, come veri agenti 007 😎 (sì, ho una leggera fissa, lo so).

In questa guida ti spiegherò come tracciare gli errori dei form e oscurare i campi sensibili come l’email dell’utente.

STEP 1 – CREA IL TAG HTML PER CATTURARE L’ERRORE

Per prima cosa ti serve un listener che registri quando avviene un errore all’interno del form. In questa guida prenderemo come esempio un form creato con Contact Form 7. Ecco i passaggi da fare per tracciare l’errore:

• Sezione Tag>Nuovo.
• Tipo di Tag: HTML personalizzato.
• Incolla questo snippet:

<script>
document.addEventListener( 'wpcf7invalid', function( event ) {
 window.dataLayer.push({
 "event" : "cf7erroreForm",
 "cf7FormId" : event.detail.contactFormId,
 "cf7Campi" : event.detail.inputs
 })
}); 
</script>

• Aggiungi l’Attivatore: “All Pages”.
• Nomina il Tag: “Contact Form 7 Errore Form”.

STEP 2 – CREA LA VARIABILE JAVASCRIPT PER CRIPTARE I DATI

Ora dovremo usare la Variabile che contine l’informazione che l’utente ha inserito all’interno del form. In questo esempio utilizzo la Variabile {{CF7 Email}} che sarà una variabile di livello dati di con  il valore cf7Campi, ma ovviamente nel tuo caso puoi utilizzare quella che vorrai criptare.

Psss… in questa guida ti spiego nel dettaglio come è possibile catturare i campi del form 😉

Non ci resta che criptare il valore della variabile attraverso una Regular Expression.

Quello che succederà in pratica sarà che il valore verrà completamente sovrascritto con il carattere “X” in presenza di caratteri e il numero “1” in presenza di numeri.
Quindi il valore “mariorossi1993@tuosito.it” diventerà “XXXXXXXXXX1111@XXXXXXX.XX“.

Ecco i passaggi che devi seguire:

• Sezioni Variabili > Variabili definite dell’utente > Nuova.
• Tipo di Variabile: JavaScript personalizzato.
• Incolla questo script:

function(){

var str = {{CF7 Email}};

var newString = str.replace(/[a-z,A-Z]/g, "X").replace(/[0-9]/g, "1");

return newString;

}

• Salva con il nome: “Criptare Valore Campo Email”.

Questo tipo di criptografia è irreversibile, quindi non sarà più possibile conoscere il valore originale 😉

STEP 3 – CREA L’ATTIVATORE PER CATTURARE L’ERRORE

Ora è arrivato il momento di creare l’attivatore per tracciare i messaggi di errore del form. Solo se sai quante volte c’è un errore e quale tipo di errore sarà possibile migliorare la user experience da parte di chi sta utilizzando il form. Quindi ti basterà creare un Attivatore che si accenda quando compare l’avviso di errore.

Ecco gli step:

• Sezione Attivatori > Nuovo.
• Tipo di Attivatore: Evento personalizzato.
• Nome evento: cf7erroreForm.
• Salva con il nome: “cf7erroreForm”. 

STEP 4 – CREA IL TAG DI TIPO EVENTO IN GOOGLE ANALYTICS

Ora non ti resta che creare un Tag di tipo Evento su Google Analytics, che raccolga i dati criptati quando è presente l’errore nel form.

• Sezione Tag > Nuovo.
• Tipo di Tag: Universal Analytics.
• Tipo di monitoraggio: Evento.
• Categoria: Errore Form.
• Azione: {{Criptare Valore Campo Email}}. 
• Adesso seleziona la Variabile delle impostazioni di Google Analytics in Impostazioni di Google Analytics, se l’hai creata, oppure abilita l’override e seleziona la costante {{gaID}} (che dovresti avere se hai seguito la mia guida su come creare una costante per l’ID di monitoraggio di GA). In alternativa inserisci semplicemente il tuo codice UA-XXXXXX-X.
• Aggiungi l’Attivatore:“cf7erroreForm”.
• Salva con il nome: “GA – Event – Errore Form”.

STEP 5 – VERIFICA L’IMPLEMENTAZIONE

Ci siamo!

Non ti resta che verificare correttamente il funzionamento e poi potrai finalmente pubblicare le tue modifiche 🙂

La prima cosa che devi fare è usare la funzione di Debug e Anteprima e controllare che si attivi l’evento “cf7erroreForm”. Per farlo dovrai simulare un errore all’interno del form. Una volta che attiverai l’errore, vedrai l’evento “cf7erroreForm” comparire nel debuh di lato a sinistra. Se hai fatto tutto correttamente, all’interno dell’evento si attiverà il Tag “GA – Event – Errore Form”. All’interno del Tag troverai il valore dell’email completamente criptato.

In questo modo siamo sicuri che Google non si arrabbierà, e tu potrai capire quali sono i pattern che causano gli avvisi di errore e migliorare il tasso di conversione del form 😀

Ricordati naturalmente, una volta verificato il corretto funzionamento delle modifiche, di pubblicare la nuova versione del contenitore cliccando sul pulsante blu “Invia”.

Ovviamente, se non usi Contact Form 7, dovrai adattare l’attivatore e lo script di gestione di errore. Questa guida ti ha dimostrato come grazie alla Variabile dello Step 2, puoi oscurare qualsiasi dato sensibile: email, numero di telefono, nome, cognome e così via in modo davvero molto semplice.

Ti è servita questa guida? Lasciami un commento qui sotto!

A presto e… Buon Tag!