Proprio così: il plugin Contact Form 7 che utilizzi per creare form sul tuo sito in WordPress è davvero comodo.

Ma quando si tratta di tracciare in GA4 l’invio del form contatti con questo plugin, il tutto potrebbe diventare un po’ più… “complicato“.

Infatti i form creati con Contact Form 7 non eseguono il Submit (ovvero il caricamento di una nuova pagina, ad esempio una Thank-You page), ma inviano una richiesta AJAX, facendo comparire nella pagina stessa un messaggio che ci avvisa dell’avvenuto invio del form.

Il tutto senza caricare una nuova pagina.

E perché questo sarebbe un problema?

Beh, perché per impostare il tracciamento dell’invio dei form creati con questo plugin non potrai fare affidamento sulla creazione di un attivatore di tipo Modulo tramite l’utilizzo di Google Tag Manager.

Ma se hai già fatto scorpacciata delle nostre guide, lo saprai bene: non basta questo a fermarci! 😉

Vediamo allora come tracciare l’invio di form contatti con Contact Form 7 e inviare l’evento a Google Analytics 4 grazie agli Eventi Personalizzati (Custom Event) 🙂
Ovviamente con Google Tag Manager!

Ecco come procederemo:

  • Step 1: Installiamo e attiviamo i plugin su WordPress;
  • Step 2: Creiamo l’attivatore di tipo Evento tramite Google Tag Manager (GTM);
  • Step 3: Creiamo la variabile di livello dati (sì, sempre tramite GTM);
  • Step 4: Creiamo il tag evento di Google Analytics 4 (GA4);
  • Step 5: Verifichiamo il corretto funzionamento del tag con l’Anteprima di Google Tag Manager.

Iniziamo!

 

Premessa

In questa guida vedremo come tracciare un form creato con il plugin Contact Form 7.

E per farlo utilizzeremo il plugin Google Tag Manager for WordPress (in precedenza si chiamava Duracell Tomi).

Ma se proprio non vuoi (o non puoi) installare un plugin per creare dei form di contatto sul tuo sito web/e-commerce, non ti preoccupare.

Per te ho un’altra soluzione che prevede l’utilizzo di un Listener JavaScript.

Ti spiego di cosa si tratta in questa guida: Guida Avanzata come tracciare l’invio di CF7 in GA4 con Google Tag Manager

 

STEP 1 – INSTALLA E ATTIVA I PLUGIN SU WORDPRESS

La prima cosa da fare per procedere con questa guida è avere installato Google Tag Manager su WordPress tramite il Plugin Google Tag Manager for WordPress.

Google Tag Manager for WordPress è il plugin che ti permetterà di attivare anche il secondo plugin che ci interessa: ovvero Contact Form 7.

Una volta installati entrambi i plugin potrai poi creare l’Evento Personalizzato di tracciamento dei form.

Ma andiamo con ordine. Ecco come fare per installare i due plugin:

  • Nel pannello di controllo del tuo sito WP, vai su Plugin nel menu a sinistra.
  • Individua il plugin Google Tag Manager for WordPress e clicca su “Impostazioni”.
  • Clicca sulla tab “Integration”.
  • Se il plugin Contact Form 7 è già installato e attivato, dovresti avere la possibilità di spuntarlo. Selezionalo come nell’immagine:

integrare contact form 7 google tag manager

Come trovi scritto sotto il flag, questa configurazione andrà a pushare un evento personalizzato nel Data Layer dopo l’invio del form.

(Se non conosci il termine “Pushare”, ti spiego qui cos’è un Push in Google Tag Manager).

Ora, se vai nella Modalità Anteprima in Google Tag Manager e provi a inviare il form del tuo sito, vedrai comparire l’evento gtm4wp.contactForm7Submitted.

Nel prossimo step andremo a creare l’Attivatore che farà accendere l’Evento.

push dataLayer invio form plugin duracell tomi

STEP 2 – CREA L’ATTIVATORE DI TIPO EVENTO PERSONALIZZATO

Ora che abbiamo l’evento personalizzato, andiamo a gestirlo attraverso un attivatore di tipo Custom Event 🙂

E per procedere dovrai “spostarti” dal tuo WordPress al tuo account Google Tag Manager e:

  • Nel menù a sinistra cliccare su Trigger > New > Trigger Configuration.
  • Tipo di Trigger: Custom Event.
  • Nome Evento: gtm4wp.contactForm7Submitted.
  • Questo Trigger si attiva su: Tutti gli eventi personalizzati.
  • Nomina l’Attivatore. Per comodità puoi chiamarlo sempre “gtm4wp.contactForm7Submitted”.

creazione trigger form inviato contact form 7

STEP 3 – CREA LA VARIABILE DI LIVELLO DATI

Cosa succede se hai più form nella stessa pagina?

Beh, sicuramente li vorrai tracciare tutti separatamente, così da poter distinguere i dati che provengono da ogni singolo form.

In questo modo, ad esempio, potrai sapere quale dei diversi form in pagina viene compilato più di frequente dai tuoi utenti.

Un bel vantaggio, no? 🙂

Per tracciare i form separatamente uno dall’altro, devi conoscere qual è l’ID univoco di ogni singolo form che devi tracciare.

Nel dettaglio, per tracciare l’ID univoco del form dove è stato effettuato il submit, dovrai creare la variabile di livello dati (dataLayer variable) in modo da estrapolare l’ID univoco dal push nel dataLayer eseguito dal plugin.

Vediamo insieme come fare.

  • Sempre dal menù a sinistra del tuo account di Google Tag Manager vai su Variables > User-Defined Variables > Variable Configuration.
  • Tipo di Variabile: Data Layer Variable.
  • Nome Variabile di Livello Dati: gtm4wp.cf7formid.
  • Nomina la Variabile: Per comodità puoi chiamarla “dlv – gtm4wp.cf7formid”.

variabile di livello dati per estrapolare id fomr contact form 7 GTM

Ehi, tutto bene fino a qui?

Ricordati che se hai dubbi o domande le porte della nostra community sono sempre aperte!

Sul nostro Gruppo Facebook ufficiale “Fatti di Tag Manager” (sì, il nome non è molto fantasioso, lo ammetto 🙂 ) puoi unirti a oltre 4.400 professionisti e trovare le risposte che cerchi ai tuoi dubbi con Google Tag Manager, Google Analytics 4 o in generale sulla Digital Analytics.

Ma torniamo al nostro tracciamento dei form di Contact Form 7!

 

STEP 4 – CREA IL TAG EVENTO DI GOOGLE ANALYTICS 4

Ora che hai tutti i dati non ti resta che passarli al tuo Google Analytics 4.

Ecco come fare:

  • Tag > 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 (ho utilizzato lo stesso nome evento che utilizza GA4 per gli eventi consigliati)
  • Aggiungi un nuovo parametro in Event Parameters
  • Parameter Name: form_id – Parameter Value: {{dlv – gtm4wp.cf7formid}} 
  • Attiva su: seleziona il Trigger “gtm4wp.contactForm7Submitted” creato in precedenza
  • Dai un nome al Tag. Io, di solito, lo rinomino in questo modo: “GA4 – Event – generate_lead”.
  • Salva il Tag.

tag ga4 invio form contact form 7 gtm

STEP 5 – VERIFICA IL TAG CON IL DEBUG DI GTM

Non ti resta che verificare se il Tag è stato implementato correttamente grazie alla Modalità Anteprima e Debug di GTM.

Attivala cliccando sul pulsante “Preview” e inserisci il link del tuo sito web.
A questo punto il Tag “GA4 – Event – generate_lead” dovrebbe essere ancora fra i Tags Not Fired.

tag ga4 contact form 7 not fired debug gtm

Se scateni l’evento compilando il form e inviando la richiesta, il Tag dovrebbe comparire fra i Tags Fired.

tag ga4 contact form 7 fired debug gtm

Inoltre, se vuoi verificare i dati, puoi utilizzare la funzione nativa di GA4 DebugView 🙂

Bingo!

Se tutto è andato per il verso giusto vuol dire che il Tag è funzionante ed è pronto per essere pubblicato 🙂

Per pubblicarlo dovrai solo cliccare sul pulsante blu “Submit“.

 

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 PRO 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

Alla prossima e ovviamente… Buon Tag!

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.