Come tracciare gli eventi di Contact Form 7 con Google Analytics

tracciare contact form 7 con google analytics

La Genesi del problema

Questo articolo nasce da un’esperienza avuta in un recente progetto in cui ho lavorato con i colleghi di Direzione Web e nel quale era richiesto il tracciamento di alcuni form realizzati con contact form 7 su piattaforma WordPress, e nel cui sito era implementato il codice di tracciamento di Google Analytics (non Google Tag Manager). Il problema era quindi quello di tracciare gli eventi di contact form 7 con Google Analytics.

Il vantaggio del web marketing è senza alcun dubbio quello di poter misurare ogni singola azione che viene compiuta e “aggiustare” il tiro volta per volta. Risulta quindi molto importante che i dati misurati siano corretti e i metodi di lettura siano quanto più precisi possibile.

La situazione in cui ci siamo trovati era la seguente:

  • Un sito web con 4 lingue;
  • Tre pagine contenenti uno stesso form condiviso tra le lingue (quindi form_ita, form_en, ecc);
  • Altri form presenti in tutto il sito web;
  • Necessità di tracciare l’invio del form senza alcuna pagina di ringraziamento.

Occorreva quindi tracciare l’evento di invio del form sapendo esattamente da quale pagina proveniva la richiesta e in che lingua.

A molti può sembrare un task abbastanza semplice da portare a termine, ed in effetti fino a poco tempo fa tracciare l’invio di un form cf7 non era un’operazione complicata, bastava infatti aggiungere la seguente riga:

on_sent_ok: "ga('send', 'event', 'CF7 Form', 'Submission', 'Contact Page');"

nelle impostazioni aggiuntive aprendo il form di interesse in contact form 7.

Tuttavia questo metodo ha tre problemi:

  1. Occorre inserire il codice su ogni form andando a variare l’etichetta volta per volta, altrimenti risulta poi difficile sapere con esattezza da quale form avviene la sottoscrizione.
  2. Se uno stesso form viene utilizzato per più pagine perde di efficacia.
  3. Il metodo è ormai deprecato.

Da qualche tempo a questa parte infatti il team di Contact Form 7 ha rilasciato i cosiddetti DOM Events, che permettono di eseguire una funzione nel momento in cui avviene un certo evento (come ad esempio il click sul pulsante “Invia“).

I DOM Events in Contact Form 7

I DOM Events sono una vera e propria rivoluzione in quanto, come abbiamo detto prima, permettono l’esecuzione di qualcosa non appena avviene un evento. Questo evento può essere il click su un pulsante, l’invio della mail, il mancato invio della mail e molto altro. Gli eventi comunemente utilizzati sono i seguenti:

  • wpcf7invalid – Si attiva quando l’invio di un modulo Ajax è stato completato correttamente, ma la posta non è stata inviata perché ci sono campi con input non validi.
  • wpcf7spam – Si attiva quando l’invio di un modulo Ajax è stato completato correttamente, ma la posta non è stata inviata perché è stata rilevata una possibile attività di spam.
  • wpcf7mailsent – Viene generato quando l’invio di un modulo Ajax è stato completato correttamente e la posta è stata inviata.
  • wpcf7mailfailed – Si attiva quando l’invio di un modulo Ajax è stato completato correttamente, ma non è riuscito a inviare la posta.
  • wpcf7submit – Viene generato quando una richiesta di modulo Ajax è stata completata correttamente, indipendentemente da altri incidenti.

Questi eventi poi devono essere richiamati in uno script che andrà inserito su tutto il sito, per farlo utilizzeremo il gestore degli eventi Javascript e un semplice tag html.

Può sembrare a parole complicato, ma vi assicuro che, una volta superate le barriere iniziali, vi basterà copiare e incollare una porzione di codice che vedremo in seguito.

Aggiungere uno script personalizzato in WordPress

La piattaforma WordPress è una delle piattaforme più elastiche che io abbia mai utilizzato, molte operazioni che in altri casi sarebbero complicate, qui si risolvono in pochi passaggi.

La situazione di dover appunto caricare un proprio script personalizzato nel footer del sito può essere infatti risolta grazie ad una semplice funzione da integrare nel file function.php. All’interno di essa richiameremo poi il nostro script.

Abbiamo però detto in precedenza che dobbiamo conoscere esattamente da quale pagina arriva la nostra richiesta e, come nel nostro caso, di sito multi lingua, anche per quale lingua. Per poter conoscere queste informazioni utilizzeremo le funzioni:

get_the_title();
if ( defined( 'ICL_LANGUAGE_NAME' ) ) { echo ICL_LANGUAGE_NAME; }

L’unica differenza che andremo a fare è se nel nostro sito è implementato il codice di Standard Analytics o di Universal Analytics, vediamo quindi la nostra soluzione in entrambi i casi.

Contact Form 7 e Standard Analytics

Per Standard Analytics si intende il codice Google Analytics standard, che magari è stato implementato sul sito prima del cambio con Universal Analytics (il gTag).

In questo caso quello che andremo a fare sarà inserire il nostro script personalizzato nel footer del sito, dichiarare la lettura del titolo pagina e del nome della lingua e inserire lo script di tracciamento di contact form 7 con Google Analytics tramite l’evento wpcf7mailsent e popolando la lettura di Google con il tipo di evento, la categoria, e la label (in cui ci sarà titolo pagina e nome della lingua).

Il codice, da inserire nel file function.php del nostro child theme, sarà il seguente:

function add_this_script_footer(){
    ?>
    <?php global $page;
	    $page = get_the_title();
	?>
        <script>
        
            var pathname = window.location.host;
            
            document.addEventListener( 'wpcf7mailsent', function( event ) {
                ga('send', 'event', 'Richiesta Informazioni', '<?php echo get_the_title();?> - <?php if ( defined( 'ICL_LANGUAGE_NAME' ) ) { echo ICL_LANGUAGE_NAME; } ?>' )
            });    
        </script>
<?php
} 
 
add_action('wp_footer', 'add_this_script_footer', 20);

Come potete vedere con la funzione function add_this_script_footer stiamo dicendo a WordPress di inserire questo script nel footer del nostro sito.

Attraverso la variabile globale $page otteniamo il titolo della pagina in cui avviene l’evento e nello script vero e proprio poi abbiamo la stringa di standard analytics:

ga('send', 'event', 'Richiesta Informazioni', '<?php echo get_the_title();?> - <?php if ( defined( 'ICL_LANGUAGE_NAME' ) ) { echo ICL_LANGUAGE_NAME; } ?>' )

in cui è dichiarato il trigger (il comando che scatena l’evento), l’evento stesso, la label formata da: get_the_title(); che è il titolo pagina e ICL_LANGUAGE_NAME che è la funzione di WPML per ottenere il nome della lingua corrente.

In questo modo sapremo sempre quando l’utente invia una mail da un qualsiasi form del sito, da qualsiasi pagina e da qualsiasi lingua.

Contact Form 7 e Universal Analytics

Da qualche tempo Google ha cambiato lo script di lettura delle analytics, quindi se avete implementato il nuovo codice (lo riconoscete dalla presenza di gtag) lo snippet precedente va modificato a favore di questo indicato di seguito:

function add_this_script_footer(){
    ?>
    <?php global $page;
	    $page = get_the_title();
	?>
        <script>
        
            var pathname = window.location.host;
            
            document.addEventListener( 'wpcf7mailsent', function( event ) {
                gtag('event', 'Richiesta Informazioni', {
				  'event_category': 'Pagina',
				  'event_label': '<?php echo get_the_title();?> - <?php if ( defined( 'ICL_LANGUAGE_NAME' ) ) { echo ICL_LANGUAGE_NAME; } ?>'
				});
            }, false );
        
        </script>
<?php
}

Il nuovo script prevede alcune informazioni aggiuntive che andiamo a spiegare:

  • <action> : sarà la nostra “Richiesta Informazioni” e serve a identificare il tipo di azione;
  • <event_category> : Inserite quello che volete, io per comodità ho inserito “Pagina”;
  • <event_label> : è ciò che ci interessa maggiormente perché è l’informazione che verrà passata a Google, all’interno ho inserito il titolo pagina e il nome della lingua.

Abbiamo terminato, anche in questo caso non ci resta che copiare e incollare nel file function.php del nostro child theme la porzione di codice, impostare gli obiettivi su Google Analytics e iniziare a tracciare gli eventi di contact form 7 con Google Analytics.

Se non sapete come impostare gli obiettivi su Analytics potete leggere la guida ufficiale di Google a questo indirizzo.

Ci tengo a sottolineare quanto sia importante tracciare tutto ciò che accade sul vostro sito web, solo così saprete comunicare al meglio i vostri servizi e prodotti alla giusta nicchia di mercato.

Voglio infine ringraziare nuovamente Direzione Web e il suo Team per lo splendido aiuto!

Avete altre esperienze da condividere? Scrivetemi oppure commentate l’articolo.

Sommario
Vediamo insieme come tracciare gli eventi di contact form 7 con Google Analytics
Nome Articolo
Vediamo insieme come tracciare gli eventi di contact form 7 con Google Analytics
Descrizione
Questo articolo prende vita da un'esperienza e dalla necessità di tracciare gli eventi di contact form 7 con Google Analytics su un sito in WordPress composto anche da pagine in lingue differenti. Vediamo insieme come fare grazie a due porzioni di codice.
Autore
Nome Editore
ideaGrafica
Logo Editore
Share it