WP Fluent Forms è un ottimo plugin per creare form contatti piuttosto popolare per WordPress. Cosa fanno i bravi professionisti del marketing con i moduli di contatto? Tracciano la compilazione del form, ad esempio, con Google Analytics 4 e quindi misurano il rendimento complessivo: da quale pagina provengono le conversioni? quali form funzionano meglio? ecc.
Attualmente uno dei modi più popolari e direi, anche efficienti, per tracciare cosa avviene sul tuo sito è usare Google Tag Manager.
Nota: La guida si Basa su Google Analytics 4, non su Universal Analytics (chiamiamolo Google Analytics 3).
COSE DA TENERE A MENTE
In questo tutorial vedremo come possiamo tenere traccia dei form contatti creati con WP Fluent Forms (sia Visualizzazione del form che Invio del form) attraverso Google Tag Manager e come inviare i dati a Google Analytics 4.
Fluent Forms attiva eventi jQuery, ciò implica che la pagina non viene ricaricata e non si atterra su una thank you page (anche se, in realtà, si può settare questo metodo più classico, ma te lo sconsiglio).
Inoltre, questa guida si rivolge principalmente ai moduli su una sola pagina. I form contatti multi pagina generano eventi di invio di dati dopo ogni passaggio. Il loro monitoraggio non è trattato in questa guida.
Bene iniziamo.
1. Creiamo un Auto Event Listener per WP Fluent Forms
Il primo ingrediente del monitoraggio del form contatti è un pezzo di codice che ascolterà e attenderà l’invio di contatto nel modulo stesso. Questo codice è noto anche come listener di eventi automatici. Il listener aspetterà gli eventi DOM di Fluent Forms e, se si verificano, invierà alcuni dati utili al data layer di Google Tag Manager (in questa guida faremo il tracking dell’id del form e della pagina dal quale proviene).
Per implementare questo codice, vai nel tuo account Google Tag Manager, scegli il contenitore e crea un tag HTML personalizzato che si attivi solo su quelle pagine che contengono i form contatti.
Supponiamo che, nel nostro caso, un modulo sia nel piè di pagina di ogni pagina, quindi lo attiveremo su Tutte le pagine.
<script>
(function($){
var fluentForms = $('form.frm-fluent-form');
fluentForms.each(function() {
var $form = $(this);
var formId = $form.attr('data-form_id');
dataLayer.push({
'event': 'FluentFormView',
'eventCategory': 'FluentForm',
'eventAction': 'FormView',
'formId' : formId
});
$form.on('fluentform_submission_success', function() {
dataLayer.push({
'event': 'FluentFormSubmit',
'eventCategory': 'FluentForm',
'eventAction': 'FormSubmitted',
'formId' : formId
});
});
});
}(jQuery));
</script>

Testa il Listener
Prima di continuare, è fondamentale verificare se il listener è in grado di acquisire il submit o il view del form contatti. In GTM, abilita la modalità Anteprima e Debug facendo clic sul pulsante Anteprima nell’angolo in alto a destra.
Se tutto ha funziona senza problemi, dovresti vedere un evento FluentFormsView sul lato sinistro per il view del form e un FleuntFormSubmit, se compili il form.

2. Variabili e Attivatori
Allora cosa abbiamo fatto finora? Abbiamo raccolto alcuni dati nel data layer che potremmo usare:
- L’evento FluentFormView che diventa un’attivatore.
- L’evento FluentFormSubmit che diventa un’attivatore.
- A titolo di esempio, in questa sede, passeremo Il form Id (nell’immagine è il n.2 ) che diventerà una nostra variabile da inviare a Google Analytics.
Attivatori
Creiamo 2 attivatori così come nelle seguenti foto. Mi raccomando a non cambiare i nomi e le maiuscole!
Nome Attivatore: FluentForms View
Nome evento: FluentFormView
Questo attivatore si attiva su: Alcuni eventi personalizzati > Event > è uguale a > FluentFormView

Nome Attivatore: FluentForms Submit
Nome evento: FluentFormSubmit
Questo attivatore si attiva su: Alcuni eventi personalizzati > Event > è uguale a > FluentFormSubmit

Variabile
Ora è il turno della variabile.
Nome Variabile: FluentFormID
Nome variabile livello dati: formId
Versione livello dati: Versione 2

3. Google Analytics 4 Tag Eventi
I primi due passaggi del monitoraggio degli eventi del modulo di contatto sono terminati! Ora, inviamo 2 eventi, uno di visualizzazione e l’evento dell’invio del modulo a Google Analytics 4 con le seguenti impostazioni.
Vai a Tag> Nuovo> Evento GA4. Presumo che tu conosca già alcune nozioni di base di Google Analytics 4 e che tu abbia già il tag di configurazione di Google Analytics 4 creato nel contenitore GTM.
Nome tag: GA4 – Evento – Fluent Form View
Nome evento: Fluent_Form_View
E inserisci due parametri da passare ad analytics (la variabile appena creata dell’Id del form che stai tracciando e la pagina dove si trova):
Form_Id con valore {{FluentFormID}}
Path con valore {{Page Path}}
Attivatore: scegli quello creato precedentemente FluentForms View

Fai la stessa cosa per l’evento submit in questo modo:
Nome tag: GA4 – Evento – Fluent Form Lead
Nome evento: Fluent_Form_Lead
Form_Id con valore {{FluentFormID}}
Path con valore {{Page Path}}
Attivatore: scegli quello creato precedentemente FluentForms Submit

4. Testa gli eventi
Salva tutte le modifiche e aggiorna la modalità Anteprima e Debug (facendo clic sul pulsante ANTEPRIMA nell’angolo in alto a destra dell’interfaccia GTM). Reindirizzati sulla pagina dove c’è il modulo. Compila il form e Invialo e dai un’occhiata più da vicino a cosa sta succedendo nella scheda (o finestra) della modalità Anteprima.
Risultato previsto:si attiva il tag evento di Google Analytics 4 per il form che è stato visto, mentre il tag evento del submit deve attivarsi solo quando il modulo è stato inviato correttamente (in altre parole, quando l’evento FluentFormSubmit è presente sul lato sinistro della modalità di anteprima). Tuttavia, il tag HTML personalizzato deve essere attivato su qualsiasi pagina (indipendentemente dal fatto che il modulo sia stato inviato o meno).

Una volta che il tag viene visualizzato nella sezione dei tag attivati, vai nella sezione DebugView di Google Analytics 4 e prova a trovare il tuo dispositivo (nel selettore nell’angolo in alto a sinistra) se ce n’è più di uno.

Quindi dovresti iniziare a vedere gli eventi provenienti dal tuo dispositivo.
Fai clic sull’evento e vedrai i parametri che sono stati inviati insieme ad esso. Fai clic su uno di questi parametri per verificare i valori. Non preoccuparti se non vedi immediatamente l’evento su Google analytics, sii paziente e attendi qualche minuto, ho notato un certo ritardo nel passaggio degli eventi, speriamo che Google risolva il problema in breve tempo 🙂

Ma il nostro lavoro non è ancora finito. Anche se vedi parametri personalizzati in DebugView, non li vedrai nei normali rapporti GA4. Se vuoi usarli / vederli (e scommetto di sì), devi registrarli come definizioni personalizzate.
In Google Analytics 4, vai a Events e quindi fai clic su Gestisci le definizioni personalizzate.

Poiché abbiamo inviato 2 parametri personalizzati ( form_id e path ) con l’invio di WP Fluent Forms, dobbiamo registrarli entrambi qui.

E adesso aspettiamo. Entro le prossime 24 ore, i parametri personalizzati inizieranno a essere visualizzati nei rapporti di Google Analytics 4.
5. Crea le Conversioni in Google Analytics 4
L’ultimo passaggio del monitoraggio degli eventi del modulo di WP Fluent Forms è creare una conversione in Google Analytics 4. Non è necessario, ma se desideri trattare ogni invio del form contatti come un’interazione importante, dovresti farlo.
Presumo che tu voglia trattare ogni evento Fluent_Form_Lead come una conversione. In tal caso, dovresti accedere alla tua interfaccia di Google Analytics 4 e andare su Conversioni (sulla barra laterale sinistra).
Quindi fai clic su Nuovo evento di conversione e inserisci Fluent_Form_Lead. Premi salva.
Quindi compila nuovamente il modulo di contatto invialo e controllare la visualizzazione nel Debug di GA4. Da questo momento, l’evento Fluent_Form_Lead verrà visualizzato con un’icona verde. Ciò significa che GA4 ora considera questo evento come una conversione.