Monitoraggio delle Conversioni Adwords in WordPress e Ajax e admin-ajax.php

Durante attività di configurazione e gestione di campagne Adwords ci capita spesso di configurare il monitoraggio delle conversioni Adwords su form AJAX presenti su siti web in WordPress

La cosa si rivela abbastanza semplice quando il monitoraggio è associato alla visita di una certa pagina, ad esempio una thank-you-page per la conversione di un’azione (come l’invio di un modulo o il completamento di un acquisto) o una landing page. In questi casi basta ottenere il tag di monitoraggio conversioni di Adwords e posizionarlo nella pagina che si desidera monitorare. Se ricadete in questa casistica allora basta seguire quanto indicato al seguente link (https://support.google.com/adwords/answer/6095821)

Quello tuttavia che vogliamo trattare qui è come fare nel caso si tratti di un modulo (form) dinamico in AJAX su WordPress che implementi il famigerato admin-ajax.php. In questo caso, AJAX si occupa di inviare richiesta asincrona e gestire la risposta dal server senza ricaricare la pagina. In questo caso il tag di monitoraggio Adwords non funzionerà. Di seguito vi spieghiamo come fare, tuttavia prima di spiegare come usare il codice del tracking, vogliamo spiegare bene come funziona l’elaborazione dei moduli AJAX in WordPress.

Come funziona AJAX in WordPress con admin-ajax.php

Spesso troviamo dei moduli già implementati in temi esistenti acquistabili online che usano questa tecnologia.

Un modulo AJAX in WordPress ha la struttura seguente

<form class="wordpress-ajax-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>">
    <input type="text" name="tuo_nome">
    <input type="email" name="tua_email">
    <input type="hidden" name="action" value="la_tua_azione">
    <?php wp_nonce_field( 'la_tua_azione_nonce', 'name_of_nonce_field' ); ?>
    <button>invia modulo</button>
</form>

Rispetto ad un modulo standard vediamo due particolarità:

1. l’action del modulo viene restituito dalla funzione admin_url(‘admin-ajax.php’);
2. è presente un campo hidden necessario all’elaborazione corretta del form
3. viene inserita una parte dinamica wp_nonce_field( ‘custom_action_nonce’, ‘name_of_nonce_field’ ) che serve ad aumentare la sicurezza della chiamata .

Elaborazione dei form Ajax in WordPress

L’elaborazione dei form Ajax in WordPress è fatta in due passaggi. La parte jQuery / Javascript invia i dati, riceve e visualizza la risposta; la parte lato server, solitamente elaborata in una funzione presente nel file functions.php del vostro tema, si preoccupa di elaborare i dati ed inviare la risposta. Vediamo come si presentano di solito.

La parte jQuery la potete trovare di solito in un file .js allegata al tema e dovrebbe presentare questa forma (o similare, ad esempio con una chiamata di tipo $.post())

jQuery(document).ready(function($) {    
    $('.wordpress-ajax-form').on('submit', function(e) {
        e.preventDefault();
         var $form = $(this);
        // inizio elaborazione ajax         
        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            success: function(){
                //fai qualcosa con la risposta
                ....
            },
            error: function(){
                //oopps errore!!!
                ....
            },
            dataType: json
        });
    });
});

Non stiamo qui a spiegare il codice, non essendo lo scopo di questo post. Quello che ci interessa capire e sapere è che, in caso positivo (ossia se la chiamata ajax ha successo)  viene eseguito quanto espresso nella funzione di callback associata alla condizione success

            success: function(){
                //fai qualcosa con la risposta
                .....
            }

Infine troviamo una parte lato server che dovreste trovare nel vostro file functions.php e che si occupa di elaborare i dati inviati dal modulo (ad esempio completare l’acquisto sul vostro sito di ecommerce, inviare i dati di un modulo contatti, etc..)

Questa parte di codice che trovate nel file functions.php ha la seguente forma

....

add_action( ‘wp_ajax_custom_action’, ‘custon_action’ );
add_action( ‘wp_ajax_nopriv_custom_action’, ‘custom_action’ );
function custom_action() {
   // per prima cosa controlla se il campo nonce è valido ed è possibile elaborare la richiesta
    if (!isset($_POST[‘name_of_nonce_field’]) || !wp_verify_nonce($_POST[‘name_of_nonce_field’], ‘custom_action_nonce’)) {
        exit();
    }
    // … poi elabora i dati e torna una risposta in json
    exit(json_encode($response));
}

…

A questo punto abbiamo tutti gli elementi al loro posto e possiamo capire come inserire questo benedetto tag per il tracking delle conversioni di Adwords.

Inserire il codice di monitoraggio Adwords nella chiamata Ajax di WordPress

Allora la buona notizia è che Google Adwords può gestire le richiesta in modo asincrono se viene usata la libreria giusta, quindi il primo passo è di includere nella pagina del form (o in tutto il sito, vedete voi come vi viene più facile) il caricamento del seguente script remoto

<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js" charset="utf-8"></script>

Lo scopo di questa chiamata è di aggiungere alla pagina corrente la funzione google_trackConversion.

Questo file può essere aggiunto al footer.php del vostro tema per l’inclusione prima della chiusura del </body>

A questo punto preparate una chiamata javascript per lanciare il nostro codice di conversione nel seguente modo:

recuperate l’ID della conversione ed eventuali parametri aggiuntivi e se vi interessa utilizzare questa conversione per il remarketing. Dovreste avere a questo punto una chiamata all’oggetto google_trackConversion con i seguenti parametri

...
window.google_trackConversion({
  google_conversion_id: 123456789, 
  google_conversion_label: "la mi conversione",
  google_custom_params: {
    parameter1: 'abc123', 
    parameter2: 29.99
  },
  google_remarketing_only: true
})
...

ed infine, ultimo step, facciamo si che la nostra chiamata AJAX, se ha successo, lanci la conversione inserendola nella funzione di callback

Quindi la nostra funzione .js dovrebbe avere un’aspetto di questo tipo

...
jQuery(document).ready(function($) {    
    $('.wordpress-ajax-form').on('submit', function(e) {
        e.preventDefault();
         var $form = $(this);
        // inizio elaborazione ajax         
        $.ajax({
            type: "POST",
            url: $form.attr('action'),
            data: $form.serialize(),
            success: function(){
                //fai qualcosa con la risposta
                ....
                
                window.google_trackConversion({
                  google_conversion_id: 123456789, 
                  google_conversion_label: "la mi conversione",
                  google_custom_params: {
                    parameter1: 'abc123', 
                    parameter2: 29.99
                  },
                  google_remarketing_only: true
                })
                
                ....
            },
            error: function(){
                //oopps errore!!!
                ....
            },
            dataType: json
        });
    });
});
...

Et voilà, il gioco è fatto.

Testare le conversioni di un modulo Ajax in WordPress

Per testare se tutto è stato fatto correttamente, vi consigliamo di usare l’estensione di Chrome, Google Tag Assistant.

Lo strumento è molto comodo e vi permette di tenere traccia dei tag che vengono attivati nelle varie fasi in una particolare pagina. Se tutto è settato correttamente dovreste vedere la conversione. Di sotto un’immagine di quello che dovrebbe apparire in Tag Assistant

Come vedete il Tag Assistant è in grado di diagnosticare eventuali problemi di configurazione ed aiutarvi nel debug. Di seguito un video esplicativo

Conclusioni

Forse è un po’ troppo tecnico questo post rispetto al taglio che abbiamo voluto dare nel nostro blog, tuttavia abbiamo visto che la corretta configurazione del conversion tag di Adwords è cruciale per il corretto monitoraggio delle campagne. Inoltre la documentazione Google e quella di WordPress sono molto spesso troppo tecniche e poco concise nella formulazione di soluzioni pratiche a problemi comuni come queste.

Come agenzia web specializzata in webmarketing e nella gestione di campagne SEO e PPC, è sempre stato cruciale la corretta configurazione degli strumenti di monitoraggio.
Se hai problemi sull’impostazione della tua campagna Adwords o necessiti di assistenza sul tuo sito WordPress non esitare a contattarci.

Buone conversioni a tutti