Tracciare l’invio di email con Contact Form 7 e Analytics

Contact Form 7 è uno dei plugin più utilizzati su WordPress per creare e gestire form di contatto.

Grazie alla sua semplicità e le numerose estensioni per integrarlo con ulteriori sistemi (come database di email o sistemi di prenotazione) è strumento davvero versatile.

È anche per tutti questi motivi che la quasi totalità dei temi WordPress, come quelli venduti da ThemeForest, lo utilizza.

Comportamenti che si possono analizzare

Se si utilizza Google Analytics per monitorare il traffico, sarà sicuramente utile poter tracciare l’utilizzo del contact form per registrare le interazioni o per legare un invio email ad un obiettivi.

Contact Form 7 utilizza il metodo addEventListener() che permette di impostare delle condizioni che scatteranno al verificarsi dell’evento specificato.

document.addEventListener(event, function, useCapture)

Questo consente non solo di interagire solo con il semplice invio della mail ma di “osservare” qualsiasi tipo di comportamento. Nello specifico CF7 mette a disposizione cinque eventi principali:

• wpcf7mailsent: quando l’email è stata inviata
• wpcf7submit: quando i dati vengono correttamente inviati
• wpcf7invalid: quando l’email non è stata inviata perché ci sono campi non validi
• wpcf7spam: quando l’email non è stata inviata perché è stata rilevata una possibile attività di spam
• wpcf7mailfailed: quando l’invio non è andato a buon fine

La differenza tra i primi due eventi è che nel caso di wpcf7submit non si ha la certezza che l’email è realmente partita, mentre con wpcf7mailsent si valida l’avvenuto invio.

Tracciare l’invio su Google Analytics

Sfruttando gli eventi di CF7 per agganciarne altri di Analytics è possibile creare una funzione che manda i dati di invio.

Ammettendo di valore tracciare l’invio in un evento Analytics con queste caratteristiche:

• Categoria: Form
• Azione: Newsletter
• Etichetta: Invio riuscito

Si otterrà questo script di tracciamento pet gli eventi Analytics:

// SE SI UTILIZZA UNIVERSAL ANALYTICS (analytics.js)

ga('send', 'event', 'Form', 'Newsletter', 'Invio riuscito');



// NEL CASO DI GLOBAL SITE TAG (gtag.js)

gtag('event', 'Newsletter', { 'event_category': 'Form', 'event_label': 'Invio riuscito' });

Ad esempio in questo script sarà possibile associare un evento o qualsiasi altro tipo di codice quando l’email è stata realmente inviata:

<script>

   document.addEventListener( 'wpcf7mailsent', function( event ) {

      gtag('event', 'Newsletter', { 'event_category': 'Form', 'event_label': 'Invio riuscito' });

   }, false );

</script>

Ma è anche possibile monitorare eventuali problemi nella compilazione o validazione, per conoscere ad esempio quali campi non sono stati compilati correttamente o registrando qualsiasi altro tipo di informazione.

<script>

   document.addEventListener( 'wpcf7mailsent', function( event ) {

      gtag('event', 'Newsletter', { 'event_category': 'Form', 'event_label': 'Validazione fallita' });

   }, false );

</script>

Gestire più form nella stessa pagina

In alcuni casi è possibile trovarsi più form nella stessa pagina ed è corretto gestire il loro tracciamento separando gli eventi.

Per fare questo è possibile utilizzare una o più condizioni che sfruttano l’id del form: questo valore, espresso con un numero, è facilmente reperibile dall’interfaccia di riepilogo di Contact Form 7.

<script>

   document.addEventListener( "wpcf7invalid", function( event ) {

      if ( '452' == event.detail.contactFormId ) {

         // CODICE DI TRACCIAMENTO PER FORM #452

      } else if ( '974' == event.detail.contactFormId ) {

         // CODICE DI TRACCIAMENTO PER FORM #974

      }

   }, false );

</script>

Integrazione dello script in WordPress

Il modo migliore per gestire l’inserimento dello script è attraverso la modifica del file functions.php con una funzione che inietta all’interno del sito le istruzioni per tracciare il form.

function cf7Tracking() {

   echo '<script>

            document.addEventListener( \'wpcf7mailsent\', function( event ) {

               // CODICE DI TRACCIAMENTO

            }, false );

         </script>';

      }

add_action('wp_enqueue_scripts', 'cf7Tracking');

Per effettuare questa operazione solo su alcune aree del sito, come ad esempio la pagina di contatto, basterà anche in questo caso anteporre una condizione che utilizza l’id della pagina interessata.

function cf7Tracking() {

   if ( is_page(10) ) {

      echo '<script>

               document.addEventListener( \'wpcf7mailsent\', function( event ) {

                  // CODICE DI TRACCIAMENTO

               }, false );

            </script>';

         }

      }

add_action('wp_enqueue_scripts', 'cf7Tracking');