Una semplice guida per imparare ad inviare eventi di Contact Form 7 a Google Analytics ed al Pixel di Facebook
Perché questa guida
Cos’è Contact Form 7 e cosa sono i suoi eventi?
Come ho già avuto modo di scrivere nell’articolo dedicato all’integrazione di Google reCAPTCHA v3, Contact Form 7 di Takayuki Miyoshi è un plugin tra i più longevi ed utilizzati nella creazione di moduli per l’invio di email su WordPress.
Contact Form 7 lavora con il metodo addEventListener() e ciò consente di settare delle condizioni legate al verificarsi di un evento specificato. Vediamone insieme la sintassi:
document.addEventListener(event, function, useCapture)event: elemento obbligatorio, è una stringa che indica il tipo di evento (es. passaggio del mouse, caricamento, click, eventi DOM personalizzati come quelli che vedremo sotto);function: anch’esso obbligatorio, specifica la funzione da richiamare;useCapture: facoltativo, può avere il valore di true o false e serve a “forzare” la priorità di gestione di un evento quando ce ne sono più di uno. L’impostazione di default è false.
Ogni modulo di Contact Form 7 genera diversi eventi DOM personalizzati di cui è possibile tenere traccia:
wpcf7mailsent: quando un modulo Ajax è stato completato correttamente e la posta è stata inviata.wpcf7submit: quando una presentazione del modulo Ajax è stata completata correttamente, indipendentemente dal fatto che la posta sia stata inviata o meno.wpcf7invalid: 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: quando un modulo Ajax è stato completato correttamente, ma la posta non è stata inviata perché è stata rilevata una possibile attività spam.wpcf7mailfailed: quando un modulo Ajax è stato completato correttamente, ma non è riuscito a inviare la posta.
Vediamo un esempio di applicazione dei concetti sin qui esposti:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
alert( "Email inviata!" );
}, false );
<script>Con questo script di esempio viene programmata la visualizzazione dell’avviso “Email Inviata!” al verificarsi dell’evento DOM wpcf7sent.
Tracciare invio Contact Form 7 con Google Analytics
Compreso il funzionamento degli eventi DOM di Contact Form 7, per poterli tracciare con Google Analytics sarà necessario farli lavorare insieme agli eventi di quest’ultimo (qui informazioni dettagliate sugli eventi di Google Analytics).
Per quello che qui interessa, basta dire che un evento di Google Analytics ha la seguente anatomia:
- Categoria: es. “Form”
- Azione: es. “Contatto”
- Etichetta (facoltativa, ma consigliata): es. “Invio riuscito”
- Valore (facoltativo)
Ecco come appare l’evento codificato nelle stringhe di Analytics dedicate al monitoraggio degli eventi:
// UTILIZZANDO UNIVERSAL ANALYTICS (analytics.js)
ga('send', 'event', 'Form', 'Contatto', 'Invio riuscito');
// UTILIZZANDO GLOBAL SITE TAG (gtag.js)
gtag('event', 'Contatto', { 'event_category': 'Form', 'Invio riuscito': 'Invio riuscito' });Il codice da inserire per il tracciamento su Analytics
A questo punto possiamo passare al codice da inserire per il tracciamento dell’invio su Analytics:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'Contatto', { 'event_category': 'Form', 'event_label': 'Invio riuscito' });
}, false );
</script>Attenzione: quella presentata è solo la parte di codice Analytics per il monitoraggio dell’evento. Deve infatti essere aggiunta al resto del codice di monitoraggio Analytics (nel nostro esempio Global site tag).
In questo modo, il codice completo potrebbe apparire come il seguente:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-X');
</script>
<!-- Traccia Contatto su Analytics -->
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
gtag('event', 'Contatto', { 'event_category': 'Form', 'event_label': 'Invio riuscito' });
}, false );
</script>
<!-- End Analytics -->Dove l’unico elemento da sostituire è il codice di monitoraggio UA-XXXXXX-X con il proprio.
Inserimento del codice in WordPress
Per inserire il codice sul nostro WordPress possiamo procedere con la modifica manuale del file header.php (ricordo che è consigliato agire su un tema figlio per evitare la sovrascrittura delle modifiche quando il tema viene aggiornato).
Tuttavia, la procedura raccomanata è quella di effettuare un’iniezione di codice mediante una modifica del file funcions.php (sempre quello di un tema figlio). Ecco la funzione da inserire:
function TracciamentoCF7() {
echo '<script>
document.addEventListener( \'wpcf7mailsent\', function( event ) {
// CODICE PER IL TRACCIAMENTO
}, false );
</script>';
}
add_action('wp_enqueue_scripts', 'TracciamentoCF7');Inserimento del codice solo in alcune pagine
Se volessimo che l’inserimento avvenisse solo in alcune pagine, ad esempio solo quella dove il modulo è presente, dovremmo sfruttare una condizione e l’id della pagina che ci interessa (es. id 99)
function TracciamentoCF7() {
if ( is_page(99) ) {
echo '<script>
document.addEventListener( \'wpcf7mailsent\', function( event ) {
// CODICE PER IL TRACCIAMENTO
}, false );
</script>';
}
}
add_action('wp_enqueue_scripts', 'TracciamentoCF7');Tracciare invio Contact Form 7 con Pixel Facebook
Per poter tracciare gli invii con Pixel di Facebook, innanzitutto dobbiamo selezionare l’evento Facebook che ci interessa monitorare. Nel nostro caso è un contatto e dunque fbq('track', 'Contact');
Avendo a mente quanto già detto per il tracciamento su Analytics, il nostro codice sarà il seguente:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
fbq('track', 'Contact');
}, false );
</script>Attenzione: quella presentata è solo la parte di codice del Pixel Facebook per il monitoraggio dell’evento. Essa deve essere aggiunta al resto del codice di monitoraggio.
Il codice completo potrebbe apparire come il seguente:
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'ID_DEL_PIXEL');
fbq('track', 'PageView');
</script>
<!-- Traccia Contatto su Pixel -->
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
fbq('track', 'Contact');
}, false );
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=ID_DEL_PIXEL&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code --> Dove ID_DEL_PIXEL va sostituito con il codice ID del proprio Pixel.
Reindirizzamento ad una thank you page
Uno dei metodi classici usati per tenere traccia dell’avvenuto invio di una email consiste nel rimandare l’utente ad una tank-you page – in pratica una pagina di rigraziamento – su cui vengono installati i codici di monitoraggio.
E’ possibile effettuare il reindirizzamento alla thank you page anche con Contact Form 7 e sempre utilizzando addEventListener(). Vediamo il codice:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>E’ bene precisare che quello indicato è il metodo di reindirizzamento suggerito nella guida ufficiale di Contact Form 7, essendo stato deprecato il vecchio metodo on_sent_ok implementato con l’inserimento nel pannello “Impostazioni Aggiuntive” del modulo di stringhe come la seguente:
on_sent_ok: "location.replace('http://www.tuosito.com/thank-you-page/');"