Tracciamento Avanzato dei Form con Google Tag Manager

Tracciare le conversioni su un sito è uno degli obiettivi principali che ci si pone nell’ambito della web analytics; infatti sapere quanti utenti visitano il nostro sito senza sapere come interagiscono con noi serve ben a poco.

Tra le conversioni più comuni che si possono analizzare ci sono i form di contatto, che sono il modo più diretto che forniamo ad un utente per mettersi in contatto con noi. Sapere il percorso di conversione che ha fatto un visitatore da quando è entrato nel nostro sito (e come ci è arrivato) fino a quando ci ha contattato ci permette di ragionare su vari aspetti (es: mezzi più efficaci sui quali investire, sezioni del sito da ottimizzare, potenziali contenuti da sviluppare, etc..).

Già in passato ho scritto un articolo su come utilizzare il Google Tag Manager per tracciare le conversioni di un sito web, se non l’hai letto ti invito a farlo, ma oggi voglio trattare alcuni casi particolari che mi è capitato di incontrare durante il mio lavoro.

Google Tag Manager dispone, per il tracciamento dei moduli, di un attivatore nativo che si chiama appunto Attivatore di Invio Moduli; questo sistema permette in maniera semplice di attivare un tag quando un form sul nostro sito viene compilato. Grazie alle impostazioni dell’attivatore è possibile decidere su quali pagine e su quali form specifici attivare il tag (es: inviare un evento a Google Analytics).

Questo metodo, oltre ad essere molto veloce, offre la possibilità di ritardare l’invio del modulo finché tutti i tag che dipendono da questo attivatore non sono attivati (opzione “Attendi i tag”) e di attivare i tag solo se l’invio del modulo avviene correttamente (opzione “Verifica convalida”).

Purtroppo però questo sistema non sempre funziona.

Quando l’attivatore di Invio Moduli non funziona

Per sfruttare l’attivatore nativo per i moduli di Google Tag Manager sono necessarie due condizioni:

• Il form deve inviare un evento submit valido al browser;
• A questo evento non deve essere impedito di propagarsi lungo il nodo del documento (document node).

Senza entrare in tecnicismi che possono essere superflui, questa situazione può accadere spesso quando i form del sito vengono gestiti tramite jQuery e l’invio del form e la propagazione dell’evento submit del form vengono fermati da un’impostazione specifica.

In questo modo l’attivatore nativo di GTM non è in grado di capire che il form è stato inviato correttamente.

Per ovviare a questo problema esistono due possibilità:

1. In primo luogo potete contattare lo sviluppatore del sito (o farlo voi stessi se potete) e chiedere di impostare l’evento submit del form in modo che sia in grado di propagarsi correttamente lungo tutto il documento.
2. In alternativa (e seguendo la logica del GTM che nasce per non mettere mano al codice del sito) è possibile implementare uno script personalizzato sfruttando il metodo dataLayer.push() che invia al Tag Manager un evento personalizzato che possiamo poi utilizzare come attivatore dei nostri tag.

Come utilizzare un attivatore con un evento personalizzato

L’utilizzo di un evento personalizzato da “pushare” nel data layer ci permette di inviare al Google Tag Manager una sorta di aggancio che possiamo sfruttare poi come attivatore per un tag Evento Google Analytics.

La sequenza è: L’utente compila il form -> Il form restituisce all’utente il messaggio di Invio Avvenuto -> Contestualmente al messaggio inviamo al data layer un evento personalizzato -> L’evento personalizzato attiva il tag Evento Google Analytics.

Quello che ci serve è fare in modo di inviare l’evento personalizzato al data layer solo quando il messaggio è stato realmente inviato dall’utente e questo può avvenire sfruttando la comparsa del classico Thank You Message (Grazie per averci contattato).

Nei vari siti in cui mi sono imbattuto ho trovato due diverse tipologie di casi in cui il Thank You Message viene mostrato all’utente:

1. Il messaggio Thank You è già presente nella pagina (visibile nell’html) ma è nascosto tramite una regola css. Quando il form viene compilato un’altra regola css rende visibile il messaggio.
2. Il messaggio Thank You non è presente nella pagina. Quando il form viene compilato il messaggio viene inserito nella pagina e mostrato all’utente tramite un’apposita funzione.

A seconda del caso che vi trovate davanti cambia leggermente lo script per il push dell’evento personalizzato.

Per capire a quale caso corrisponde il vostro sito potete utilizzare i dev tools del vostro browser per ispezionare la pagina dove si trova il form ed analizzare il caso specifico.

Tramite “ispeziona elemento” recatevi sul form e ispezionatelo. I dati che vi serve sapere sono 3:

• Classe o ID del form;
• Classe o ID del bottone Invia (submit);
• Metodo con cui viene mostrato il messaggio di Thank You.

Caso 1: messaggio nascosto tramite css

Nel caso sotto il messaggio di Thank You è già presente sulla pagina ma è nascosto dal css (display: none). Quando il messaggio viene inviato la classe del messaggio diventa visibile (display: block)

In questo caso il nostro script per l’invio dell’evento personalizzato al data layer sarà il seguente:

<script>
(function($) {
$(document).ready(function() {
$('.form-contact button[type="submit"]').on('click', function(e) {
var setEvent = setTimeout(function() {
var setSecondEvent = setTimeout(function() {
var alertSuccess = $(".message").css("display") == "block";
if(alertSuccess) {
dataLayer.push({"event" : "messaggioinviato"});
console.log("Alert success!");
}
},0);
}, 300);
});
});
})(jQuery);
</script>

Lo script sopra si aggancia all’evento click sul bottone submit del form (in questo caso dovete inserire la classe o l’id del bottone invia) e quando il messaggio viene inviato ed il Thank You Message viene mostrato tramite css (qui dovete inserire la classe o l’id del box che contiene il messaggio di ringraziamento) utilizza il comando dataLayer.push per inviare nel data layer l’evento personalizzato messaggioinviato.

Caso 2: messaggio non presente nella pagina

In questo altro caso il messaggio di Thank You viene gestito con un input nascosto.

Quando il form viene inviato viene mostrato il messaggio.

In questo caso il nostro script per l’invio dell’evento personalizzato al data layer sarà il seguente:

<script>
(function($) {
    $(document).ready(function() {
     $('.contact-form .btn-ctsubmit').on('click', function(e) {
           var setEvent = setTimeout(function() {
             var setSecondEvent = setTimeout(function() {
                 var alertSuccess = document.getElementById("privacyDialog");
                if(alertSuccess) {
                     dataLayer.push({"event" : "messaggioinviato"});
                     console.log("Alert success!");
                 }
             },0);
            }, 300);
     });
  });
})(jQuery);
</script>

Lo script sopra si aggancia all’evento click sul bottone invia del form (in questo caso dovete inserire la classe o l’id del bottone invia) e quando il messaggio viene inviato ed il Thank You Message viene mostrato (qui dovete inserire la classe o l’id del box che contiene il messaggio di ringraziamento – utilizzate il selettore getElementById per l’ID e getElementByClass per la classe) utilizza il comando dataLayer.push per inviare nel data layer l’evento personalizzato messaggioinviato.

Creare gli attivatori ed i tag su Google Tag Manager

Ora che abbiamo gli script serve impostare il Google Tag Manager in modo che gestisca l’evento personalizzato e che attivi i tag necessari al tracciamento.

Per fare questo abbiamo bisogno di 3 elementi:

• Un tag HTML personalizzato con il nostro script (che invia al data layer un evento personalizzato quando un form viene compilato);
• Un attivatore che si innesca quando trova nel data layer il nostro evento personalizzato;
• Un tag Universal Analytics di tipo evento che si attiva con il precedente attivatore.

Tag HTML Personalizzato – Push Messaggio Inviato

Tipo: TAG

Nome Tag: Push messaggio inviato

Tipo di tag: HTML Personalizzato

Contenuto: uno dei due script sopra

Attivazione: tutte le pagine

Attivatore – Evento Push Messaggio Inviato

Tipo: Attivatore

Nome Attivatore: Evento push messaggioinviato

Tipo di attivatore: Evento personalizzato

Nome evento: messaggioinviato

Questo attivatore si attiva su: Tutti gli eventi personalizzati

Tag Universal Analytics – Evento Form Inviato

Tipo: TAG

Nome Tag: Evento Form Inviato

Tipo di tag: Universal Analytics

Tipo di monitoraggio: Evento

Categoria: Forma Inviato

Azione: Invio

Etichetta: {{Page Path}}

Attivazione: Evento push messaggioinviato

Test e controllo

Una volta impostati i Tag su GTM non ci resta che fare una verifica. Andiamo sullo strumento Anteprima del Google Tag Manager e rechiamoci nella pagina dove c’è il form che vogliamo tracciare.

Proviamo a fare un invio del form. Se tutto è stato fatto correttamente nell’anteprima del GTM dobbiamo vedere l’evento personalizzato messaggio inviato nel data layer.

In concomitanza dell’evento messaggioinviato nella sezione Tag dobbiamo vedere l’evento GA precedentemente impostato.

Stefano Salustri

Sono un Consulente in Digital Marketing con oltre 10 anni di esperienza. Mi occupo di progettare e sviluppare strategie digitali per Piccole e Medie Imprese per aiutare le aziende ad ottenere il massimo ritorno dagli investimenti nei canali online.