Come Tracciare Ninja Forms con Google Tag Manager in WordPress

Facciamo una piccolissima premessa 🙂

Esistono molti modi per tracciare l’invio di un form tramite Google Tag Manager. Puoi ad esempio usare l’attivatore nativo dedicato al form (a patto che il form esegua il submit della pagina) oppure è possibile utilizzare l’attivatore di tipo elemento di visibilità.

Nei casi in cui siano installati particolari moduli su WordPress puoi usare delle altre guide (come Contact Form 7).

In questa guida vedremo il caso specifico di Ninja Forms, un altro plugin per WordPress molto diffuso che permette di creare dei moduli in modo semplice con la funzione drag-and-drop (uh che figata).

NOTA BENE: questa guida funziona per la versione di Ninja Forms maggiore di 3.x

Step 1 – Crea il listener per l’evento attraverso un Tag HTML personalizzato

Come primo passaggio dovremmo creare il listener per il submit del form, con un HTML personalizzato. Che diavolo è un listener? Diciamo che è un tipo di sensore che andremo a creare e che permetterà a GTM di rimanere in ascolto quando succederà la compilazione del Ninja Forms.

• Tag > Nuovo > HTML Personalizzato
• Inserisci questo script:

  <script>
    jQuery(document).ready( function() {
      jQuery(document).on('nfFormSubmitResponse', function(event, response, id) { 
        dataLayer.push ({
          'event' : 'ninjaForm.submit',
          'ninjaForm.formId' : response.id 
        });
      });
    });
  </script>

• Come attivatore seleziona All Pages
• Salva con “Listener – Ninja Forms Tracking”

Step 2 – Crea la variabile di tipo Livello Dati (Data Layer)

Una volta che il listener è pronto, non ci resta che catturare i valori attraverso delle variabili di tipo livello dati.

Nel dettaglio la variabile conterrà l’id del form che vogliamo tracciare.

• Sezione Variabili > Definite dall’utente > Nuova
• Tipo: Variabile di livello dati
• Nome variabile: ninjaForm.formId
• Salva con il nome “dlv – ninjaForm.formId”

Step 3 – Crea l’attivatore dedicato attraverso un evento personalizzato

Adesso non ci resta che creare l’attivatore per tracciare i submit del form, o dei form. Lo faremo attraverso un attivatore di tipo evento personalizzato.

Segui questi passaggi:

• Sezione Attivatori > Nuovo
• Tipo di attivatore, seleziona Evento personalizzato
• Nome evento: ninjaForm.submit
• Salva con il nome “ninjaForm.submit”

Grazie a questo attivatore potremmo sarà possibile inviare, ad esempio, un evento a Google Analytics oppure inviare l’evento standard  “Lead” del Facebook Pixel.

Come lo abbiamo impostato, ovvero senza un specifico filtro, l’attivatore si attiverà su tutti i form presenti nel sito. Mmm… e se voglio invece tracciare uno specifico form, ad esempio il form contatti?

Ma non c’è nessun problema! (No problem man!)

Ti basterà fare una piccolissima modifica, inserendo la condizione basata sulla variabile “dlv – ninjaForm.formId” che hai creato prima, ad esempio così:

In questo esempio ho inserito l’id 5.

Ovviamente dovrai mettere l’id del form (che in teoria hai già controllato qual è facendo delle prove… vero che lo hai fatto? 😀 )

Step 4 – Crea il tag evento di Google Analytics

In questo esempio tracciamo la compilazione del form con un evento di Google Analytics, ma nel tuo caso puoi fare un uso diverso.

In questo esempio ho usato la variabile di Configurazione di Google Analytics.

Esempio di evento Google Analytics:

Step 5 – Verifica il funzionamento

Ci siamo quasi, non ti resta che testare l’invio per assicurarti di aver fatto tutto giusto.

Imposta il contenitore Google Tag Manager in modalità anteprima ed effettua un test compilando il form che vuoi tracciare.

Se hai fatto tutto giusto, dovresti avere qualcosa di simile:

Ti risulta tutto corretto? Bene, allora puoi pubblicare le modifiche di GTM per iniziare a tracciare come un ninja 🙂

Link utili:

• La guida ufficiale di Ninja Form (in inglese): Powerful Event Tracking for Ninja Forms Made Easy – Ninja Forms