Guida Base: come Tracciare Ninja Forms per WordPress in GA4 con Google Tag Manager

Ma quanto bello è Google Analytics 4?

Sei d’accordo?

Mmm sì? no? Ne ho parlato in questa guida su cos’è GA4 con alcune opinioni.

Anyway, in questo bellissimo articolo vedremo come tracciare in Google Analytics 4 i form creati con Ninja Forms con Google Tag Manager.

Ninja Form è 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 superiore alla versione 3.x

Ecco come procederemo:

• STEP 1 – creiamo e impostiamo un pezzetto di codice per creare l’evento, utilizzando un Tag Custom HTML
• STEP 2 – creiamo una Variabile di livello dati
• STEP 3 – creiamo un Trigger evento personalizzato
• STEP 4 – creiamo un Tag evento di Google Analytics 4
• STEP 5 – verifichiamo il corretto funzionamento del tag con l’Anteprima di Google Tag Manager.

Nel mio libro su GA4 “Google Analytics 4 per chi inizia” ti spiego passo passo come configurare gli eventi di tracciamento Enhanced Measurement, gli eventi Consigliati e gli eventi Personalizzati.

Sei pronto? Iniziamo!

 

STEP 1 – CREA IL LISTENER PER L’EVENTO UTILIZZANDO UN TAG CUSTOM HTML

Come primo passaggio dovremmo creare il listener per il tracciare l’invio del form, con un Tag HTML personalizzato sul tuo account di Google Tag Manager.

Che diavolo è un listener JavaScript?

Non è altro che un pezzetto di codice che rimarrà “dormiente” fino a che non avviene la compilazione del form di Ninja Forms.

Bene, finite le presentazioni con il listener, vai nel tuo account di Google Tag Manager e dal menu a sinistra:

• Clicca su Tags > New > Custom HTML
• 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 Trigger seleziona All Pages
• Salva con “Listener – Ninja Forms Tracking”

 

STEP 2 – CREA UNA VARIABILE DI LIVELLO DATI

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 Variables > User-Defined Variables > New
• Tipo: Data Layer Variables
• Nome variabile: ninjaForm.formId
• Salva con il nome “dlv – ninjaForm.formId”

 

Fermi tutti. Facciamo subito una verifica.

Se fino ad ora hai fatto tutto giusto, attivando la Modalità Debug (Anteprima) di Google Tag Manager  e compilando il form dovrebbe comparirti l’evento “ninjaForm.submit”.

Se ora clicchi nella sezione “API Call“,  insieme all’evento ti comparirà anche il parametro che contiene l’ID specifico di questo form che hai appena testato.

E il parametro dell’ID specifico del form ti consiglio di segnartelo nel caso in cui volessi tracciare esclusivamente questo form in modo distinto da altri form nel tuo sito web.

 

STEP 3 – CREA UN TRIGGER EVENTO PERSONALIZZATO

Adesso non ci resta che creare il Trigger per tracciare le compilazioni del form, o dei form.

Lo faremo attraverso un Trigger di tipo evento personalizzato.

Sempre dal tuo account di Google Tag Manager segui questi passaggi:

• clicca su Triggers > New
• Tipo di Trigger: Custom Event
• Nome evento: ninjaForm.submit
• Salva con il nome “ninjaForm.submit”

 

 

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

(Ehi, se non hai chiare le differenze sulla gestione degli Eventi in Google Universal Analytics (UA) e il nuovo Google Analytics 4 (GA4), questa guida fa per te)

Hai notato dall’immagine in alto l’impostazione dell’Attivatore su “Tutti gli Eventi Personalizzati”?

Con questa impostazione senza un specifico filtro, l’attivatore si attiverà su tutti i form presenti nel sito.

“Mmm… e se voglio invece tracciare più form in modo distinto, ad esempio il form contatti?”

Non c’è nessun problema!

Ti basterà fare una piccolissima modifica.

Invece che impostare “All Custom Events” (sempre come da immagine sopra), seleziona “Some Custom Events“.

Ora inserisci la condizione basata sulla variabile “dlv – ninjaForm.formId” che hai impostato nello STEP 1 e creato nello STEP 2.

Così:

 

In questo esempio ho inserito l’ID 5.

Ovviamente dovrai mettere l’ID specifico del form del tuo sito web.
(ID che dovresti aver già verificato nello STEP 2 di questa guida. Lo hai fatto, vero? 😀 )

 

STEP 4 – CREA UN TAG EVENTO DI GOOGLE ANALYTICS 4

• All’interno del tuo GTM vai nella sezione Tags > New > Tag Configuration.
• Tipo di tag: GA4 Event.
• Adesso seleziona il Tag di Configurazione di Google Analytics 4 in Configuration Tag.
  Oppure inserisci direttamente il codice del Data Stream di GA4
• Event Name: generate_lead (questo è il nome evento consigliato da GA4 per i lead)
• Aggiungi un nuovo parametro in Event Parameters
• Parameter Name: form_id Parameter Value: {{dlv – ninjaForm.formId}}
• Attiva su: seleziona il Trigger “ninjaForm.submit”
• Dai un nome al Tag. Io, di solito, lo rinomino in questo modo: “GA4 – Event – generate_lead”.
• Salva il Tag.

STEP 5 – VERIFICA IL FUNZIONAMENTO con il debug di Google Tag Manager

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

Attiva la Modalità Debug (Anteprima) e vai nel sito, nella pagina in cui si trova il form di contatto.

In questo momento, nella scheda della modalità Anteprima, dovresti notare il Tag “GA4 – Event – generate_lead” fra i Tags Not Fired.

Una volta che compili e invii il Form, nella scheda di Debug di GTM vedrai il Tag passare tra i Tags Fired.

 

Vuoi essere ancora più sicuro che tutto funzioni correttamente?

Allora ti consiglio di utilizzare il DebugView di Google Analytics 4 per testare gli eventi!

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

 

Se hai dubbi o domande, scrivimi pure qui sotto nei commenti 😉