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

Attivatore Invio Modulo GTM

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)

Messaggio Thank You nascosto tramite CSS
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.

Messaggio Thank You nascosto HTML

Quando il form viene inviato viene mostrato il messaggio.

Messaggio Grazie per Averci Contattato

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

Tag HTML Personalizzato

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

Attivatore Evento Push Messaggio Inviato

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

Evento GA Forma Inviato

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.

Anteprima Data Layer messaggioinviato

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

Anteprima Evento Form Inviato

Inserito in:
L'Autore

Stefano Salustri

Sono un Consulente in Marketing Digitale e Consulente SEO 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. 📈

7 commenti

  1. Ciao Stefano,
    ho utilizzato il tuo metodo per tracciare gli errori di compilazione dei form e devo dire che sono rimasto piacevolmente sopreso (non posso riportare le parole testuali 🙂 ).
    L’unico appunto è che ho dovuto aumentare il tempo (da 300 a 2000) dello script per la creazione dell’evento push.
    Grazie

  2. Ciao Stefano,
    complimenti per l’ottimo articolo.

    L’unica integrazione che ritengo andrebbe fatta riguarda il reindirizzamento alla Thank You page. Prima potevamo farlo tramite il metodo “on_sent_ok” ora invece con il GTM è poco chiaro cosa bisogna fare.

    Ho letto la guida dello sviluppatore: https://contactform7.com/redirecting-to-another-url-after-submissions/, ma consiglia di inserire un codice fra i tag head. E’ possibile farlo con il GTM senza dover mettere mano al sito?
    Grazie per il supporto.

    • Ciao Giuseppe,
      il reindirizzamento del form ad una Thank You page è una procedura che viene sconsigliata dallo sviluppatore del plugin. La soluzione migliore è quella di sfruttare il custom dom event di Contact Form 7 (wpcf7mailsent) come attivatore per inviare l’evento a Google Analytics.

      Per vedere come fare con Google Tag Manager ti consiglio di leggere questo mio articolo.

      In alternativa puoi anche impostare il reindirizzamento come spiegato nella guida da te indicata utilizzando sempre un tag html personalizzato di Google Tag Manager (copi ed incolli il codice indicato nella pagina in un custom tag e come attivatore scegli la pagina dove si trova il form).

      Stefano

      • Ciao Stefano, perdonaerai l’intromissione in questo commento. Io utilizzavo la funzione “on_sent_ok” per reindirizzare l’utente non a una Thank You page, ma a una pagina per il download di una risorsa a seguto della compilazione di un modulo (ho visto che anche utilizzi un metodo simile per far scaricare il tuo ebook sulla SEO).

        Ho già seguito la tua altra guida per tracciare tramite GTM la compilazione di un form CF7 su Analytics, però ora mi serve proprio la possibilità di indirizzare a una pagina di download senza utilizzare il deprecato “on_sent_ok”. C’è modo di farlo con GTM?

        Grazie in antivipo per la risposta.

        • Ciao Claudio,
          il metodo on_sent_ok ora è deprecato ma al suo posto CF7 permette di utilizzare un evento dom. Ad esempio nel caso di successivo redirect dopo la compilazione puoi utilizzare il codice javascript presente qui (https://contactform7.com/redirecting-to-another-url-after-submissions/) che puoi implementare anche attraverso GTM.

          Crei un custom html tag da utilizzare solo nella pagina dove si trova il form da compilare per il download ed inserisci al suo interno il seguente script:

          Per tracciare il download della risorsa come obiettivo su Analytics puoi impostare un obj destinazione con url la tua landing page (se è interna al sito). Se invece la risorsa è esterna puoi decidere di tracciare il corretto invio del form utilizzando un evento da inviare al data layer a cui poi ti agganci con un tag (come descritto qui: https://www.stefanosalustri.com/blog/tracciare-form-wordpress-con-contact-form-7-e-google-tag-manager/).

          Nel caso 2 puoi anche inserire tutto nello stesso script:

          Fammi sapere se è tutto chiaro e se funziona correttamente 🙂

          • Grazie per la risposta, sei stato velocissimo! È chiaro il procedimento, anzi avrei potuto arrivarci anche da solo dato che lo script della tua guida che h già seguito (https://www.stefanosalustri.com/blog/tracciare-form-wordpress-con-contact-form-7-e-google-tag-manager/#nuovo-metodo) è simile a quello presente nel sito CF7 per i redirect 🙂

            Ho già implementato il tracciamento mediante il metodo del data layer, ma lo uso anche per altri form che non hanno bisogno del redirect, per cui preferisco creare un nuoo tag specifico per non richiare di fare casini.

            A questo proposito ti chiedo un’altra cosa: ma la presenza di tanti tag all’interno di GTM rallenta il caricamento del sito? Io al momento ne ho 10, ma ogni giorno scopro nuove potenzialità di GTM. C’è un limite non scrito che è meglio non superare?

          • Ciao Claudio, puoi stare tranquillo :). 10 tag non sono molti. Inoltre lo script di Google Tag Manager lavora in maniera asincrona quindi non rallenta il caricamento del contenuto visibile della pagina.
            L’importante comunque è lavorare in modo efficiente e fare in modo che non vengano caricati tag se non strettamente necessari (esistono le regole di attivazione apposta).
            Inoltre, il consiglio che ti do, mano a mano che implementi nuove funzionalità è capire se puoi razionalizzare i tag già esistenti. Ad esempio se trovi un sistema più efficace per il tracciamento dei form di contatti puoi inserirlo eliminando tutti i vecchi tag non più necessari.

Lascia un commento

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