Tracciare le Conversioni dei Form Elementor in WordPress: Guida Passo Passo

La forma più semplice per tracciare una conversione, come ad esempio l’invio di un form, è mediante l’uso di strumenti di analisi del sito. In passato, si utilizzava una “thank you page” (pagina di ringraziamento), che permetteva di monitorare facilmente la conversione tramite l’URL della pagina con un goal o un evento di caricamento. Tuttavia, con l’adozione di tecnologie moderne come AJAX, non è più comune avere una pagina di atterraggio, poiché il form viene sostituito da un messaggio dinamico.

Come tracciare le Conversioni dei Form

In questi casi, per tracciare correttamente l’evento, è necessario implementare una soluzione che monitori le azioni dell’utente anche in assenza di una pagina di atterraggio. Ad esempio, in Google Analytics o in altre piattaforme di analisi come Adobe Analytics, è possibile utilizzare il tracciamento tramite eventi personalizzati. In particolare, dopo che l’utente invia il modulo e visualizza il messaggio di conferma (senza ricaricare la pagina), è possibile inviare un evento tramite JavaScript.

Per affrontare questo problema, possiamo suddividerlo in quattro fasi:

1. Intercettare le richieste ajax della pagina
2. Verificare che la richiesta soddisfi alcuni criteri
3. Esaminare la risposta del server
4. Inviare l’evento mediante javascript

1. Intercettare le richieste AJAX

WordPress include la libreria jQuery preinstallata, la cui sintassi è più semplice rispetto al JavaScript puro (vanilla JS). Quindi, è consigliabile utilizzarla. Aggiungi il seguente codice nel file degli script del tuo tema, generalmente si trova in js/scripts.js. Se il file non è presente, puoi crearne uno personalizzato e caricarlo tramite la funzione wp_enqueue_script.
Lo script qui di seguito viene lanciato alla fine di ogni richiesta AJAX.

function interceptSubmit(){
  // Aggiunta listener
  jQuery( document ).ajaxComplete(function( event, xhr, settings ) {

  });
}
interceptSubmit();

2. Verificare la richiesta

Successivamente, dobbiamo monitorare solo le richieste a wp-admin/admin-ajax.php perché, in WordPress, quasi tutte le richieste XHR che seguono le linee guida corrette di WordPress utilizzano quel metodo.

Ma verificare solo l’URL non è sufficiente, come detto quasi tutte le richieste XHR in WordPress usano lo stesso url. In admin-ajax.php va verificato il parametro “action” per definire quale azione è stata eseguita. Per scoprire l’azione, utilizziamo il pannello di rete del browser (in strumento per sviluppatori), inviamo il modulo e ispezioniamo il payload, cercando il parametro “action”.

Troviamo l’action ed aggiorniamo il nostro codice precedente:

function interceptSubmit(){
  jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
    // verifica che url includa "wp-admin/admin-ajax.php".
    if ( settings.url.includes("wp-admin/admin-ajax.php") ) {
      // verifica dell'action.
      if( settings.data.get('action') === 'elementor_pro_forms_send_form' )
      {
      }
    }
  });
}
interceptSubmit();

3. Esaminare la risposta

L’ultima cosa da verificare è la risposta. Vogliamo tracciare solo tracciare gli gli invii riusciti ed evitare di tracciare quelli con errori di validazione.
Ispezionando la risposta con esito positivo troviamo nell’oggetto di risposta {success: true, …}, quindi controlliamo questa condizione nella risposta del server.

Infine, potevamo inviare il nostro evento, che dipende dallo strumento di analisi utilizzato.

Ecco il nostro codice aggiornato:

function interceptSubmit(){
  jQuery( document ).ajaxComplete(function( event, xhr, settings ) {
    if ( settings.url.includes("wp-admin/admin-ajax.php") ) {
      if( settings.data.get('action') === 'elementor_pro_forms_send_form' )      
      {
        // verifica dell'esito
        if(xhr.responseJSON.success){
          //INVIA EVENTO
        }
      }

    }
  });
}
interceptSubmit()

Ultima cosa, più per questioni di performance, non vogliamo richiamare la funzione per tutti i form ma solo per un form nello specifico, quindi avviamo la funzione solo nella nostra pagina è presente il form da tracciare. Per farlo verichiamo che esiste un componente con la classe che racchiude il nostro form (.elementor-form).

function interceptSubmit() {
  jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url.includes("wp-admin/admin-ajax.php") && settings.data.get('action') === 'elementor_pro_forms_send_form') {
      if (xhr.responseJSON.success) {
        // INVIA EVENTO
      }
    }
  });
}

jQuery(document).ready(function() {
  if (jQuery('.elementor-form').length) {
    interceptSubmit();
  }
});

Con questo codice, possiamo assicurarci di intercettare solo le richieste AJAX per il modulo specifico che ci interessa, rendendo il nostro codice più efficiente e meno incline a interferire con altre funzionalità della pagina.

4. Inviare l’evento

Adesso non rimane che inserire l’evento dopo il commento

// INVIA EVENTO

L’evento dipende dallo strumento di analisi utilizzato, per capire il codice corretto basta consultare la documentazione ufficiale, qui un codice di esempio di un evento di Google Analytics

gtag('event', 'form_submission', {
  'event_category': 'Forms',
  'event_label': 'Contact Form Submitted',
  'value': 1
});