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.

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”

Ninja form tracking listener con Google Tag Manager

 

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”

Ninja form id con google tag manager

 

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”

 

Trigger compilazione form ninja forms google tag manager

 

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), selezionaSome Custom Events“.

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

Così:

Ninja form evento compilato con Google Tag Manager

 

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.

Tag evento Google Analytics 4 compilazione ninja forms

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.

Tag evento Google Analytics 4 compilazione ninja forms 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 🙂

 

VUOI IMPARARE A USARE GA4 (GOOGLE ANALYTICS 4) IN MANIERA SEMPLICE E VELOCE?

Se ne hai abbastanza di perdere valanghe di ore a studiare delle guide per cercare di usare Google Analytics 4 da vero esperto e vuoi passare subito all’azione, forse ti posso aiutare.

Il consiglio spassionato che ti do è di dare un’occhiata al mio corso Google Analytics 4.

Ah, se invece gestisci un e-commerce (tuo o dei tuoi clienti) e vuoi configurare alla perfezione Google Analytics 4, nello Shop di Tag Manager Italia trovi un corso dedicato proprio a questa esigenza: si tratta di ”L’E-commerce in GA4”.

 

Corso Google Analytics 4

 

Link utili:

 

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

Condividi anche tu Google Tag Manager!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.