Implementare l’Advanced Matching, la ricerca delle corrispondenze avanzata del Pixel Facebook

Argomenti: Facebook, Social Media, Web Design

implementare l'advanced matching

Se già conosci la ricerca delle corrispondenze avanzata del Pixel Facebook e vuoi sapere solo come implementare l’Advanced Matching, puoi saltare l’introduzione cliccando qui.

Al momento della configurazione del Pixel Facebook possiamo notare notevoli cambiamenti rispetto alle passate versioni dello script. In particolare possiamo notare un piccolo pulsantino:

Implementare la ricerca delle corrispondenze avanzata

Cliccando sul pulsantino possiamo attivare l’Advanced Matching del Pixel Facebook, ossia la ricerca delle corrispondenze avanzata.

Cos’è l’Advanced Matching del Pixel Facebook

Prima di speigarti come implementare l’Advanced Matching credo sia giusto fornirti qualche indicazione di carattere generale su questa nuova feature di casa Facebook. La ricerca delle corrispondenze avanzata (che sembra quasi un titolo di romanzo) ha visto la luce nel Luglio del 2017. L’Advanced Matching è utilissimo per “ipertarghettizzare” il pubblico delle inserzioni Facebook. In poche parole, modificando il Pixel standard come ti farò vedere a breve, potrai fornire i dati degli utenti del tuo sito a Facebook affinché trovi corrispondenze con i suoi utenti e li utilizzi per migliorare le tue inserzioni.

I dati forniti da Facebook riguardo il miglioramento delle prestazioni delle campagne sono molto incoraggianti: le conversioni aumentano del 10%, e le campagne di retargeting addirittura del 20%.

Certo, a molti potrebbe suonare come una grossa violazione della privacy, ma come dichiarato dagli ingegneri Facebook, tutti i dati dei clienti che passano attraverso il pixel di Facebook vengono elaborati in locale sul browser prima di essere inviati ai server di Facebook affinché creino la corrispondenza. Questo processo di trasferimento trasforma i dati in brevi messaggi crittografati che non possono essere hacherati. Dopo la conclusione del processo di abbinamento, i brevi messaggi appena creati vengono subito eliminati dai server Facebook, e non c’è modo di recuperarli. Per maggiori informazioni a riguardo è possibile consultare il post della release dell’Advanced Matching del Pixel Facebook.

Come funziona la ricerca avanzata delle corrispondenze

Il funzionamento dell’Advanced Matching  è abbastanza semplice da capire se conosciamo un po’di codice JavaScript. Quello che non è stato facile è elaborare una strategia per implementarlo. Difatti in giro sui vari blog italiani e stranieri non ho trovato articoli buoni a riguardo, e quando pure ho trovato titoli che promettevano di spiegare come implementare l’Advanced Matching, il contenuto dell’articolo si limitava a tradurre o parafrasare semplicemente gli articoli del blog di Facebook. Addirittura forum molto specializzati sui linguaggi di programmazione, come Stack Overflow, ancora non sembrano aver dato attenzione al problema.

Ecco, dunque,  come funziona la ricerca avanzata delle corrispondenze. In pratica, nel momento in cui gli utenti del tuo sito compilano un form di contatto, oppure compilano un modulo di checkout per acquistare un prodotto, i dati inseriti all’interno dei campi da compilare vengono immagazzinati temporaneamente all’interno di variabili, che in JavaScript sono una sorta di contenitori di dati. Grazie a questi contenitori essi possono essere successivamente utilizzati per vari scopi, come inviare una email o effettuare un ordine sul tuo e-commerce.

Se dunque comunichi il nome di queste variabili al tuo Pixel Facebook, lo stesso Pixel li invierà ai server Facebook affinché effettui la corrispondenza.

Ora vediamo come implementare l’Advanced Matching fornendo al Pixel i dati inseriti dai nostri utenti.

Come implementare l’Advanced Matching del Pixel Facebook

Vi avverto che questa soluzione non è ancora stata testata. Avevo l’urgenza di scrivere questo articolo in primis per ricordarmela domani, e in secondo lugo perché, come già accennato, non se ne parla ancora molto, e magari da questo articolo potrebbe nascere una discussione che porti a una soluzione valida.

Dunque, come faccio a conoscere il nome delle variabili del mio form di contatto oppure della mia pagina di checkout?

I moduli di contatto e quelli di checkout sono formati da <input>il tag che genera il campo per immettere i dati.  Tra gli attributi del tag <input> troviamo name=””, che è l’attributo con il quale l’input passa le informazioni a JavaScript. Il valore di questo attributo è proprio il nome della variabile nella quale i dati immessi all’interno del campo del form vengono immagazzinati.

Dunque, sapendo questo, non ti resta che controllare che valore ha l’attributo name dei campi del nostro checkout con Ispeziona Elemento.

Come implementare l'Advanced Matching

Come puoi vedere il campo cognome del mio form ha come attributo name billing-last-name, che è il nome della variabile (quella del plugin Woocommerce in questo caso) nella quale il cognome dell’utente che acquisterà sul mio sito verrà immagazzinato, prima di essere inviato alla mia email nel momento in cui effettua l’ordine, insieme ovviamente a tutti gli altri dati del modulo di checkout che ha compilato.

Prendiamo, dunque, tutti i valori dell’attributo name dai nostri tag input. Più ne sono, meglio è. Come affermano i programmatori Facebook, bisognerebbe sempre fornire nome, cognome, data di nascita o un codice postale con città e stato per ottenere la corrispondenza migliore. Ci mancava solo il numero, la scadenza e il codice di sicurezza della carta di credito.

La formattazione dei dati

I problemi però non finiscono qui. Nonostante abbiamo trovato il modo in cui il nostro sito immagazzina le informazioni, come i programmatori specificano in questa guida che spiega come implementare l’Advanced Matching, prima di essere inviati, i dati devono avere i seguenti requisiti:

  • Tutti i dati devono avere lettere minuscole;
  • Tutti gli spazi devono essere rimossi;
  • Tutti i dati devono rispettare queste linee guida:
Dati Parametri Esempio
Email em jsmith@example.com
First Name fn john
Last Name ln smith
Phone ph 16505551212
Gender ge m
Date of Birth db 19911226
City ct menlopark
State st ca
Zip zp 94035

 

Più che un articolo su come implementare l’Advanced Matching, sembra un corso di programmazione.

Una bella gatta da pelare insomma. Infatti, se per quanto riguarda email, numero di telefono e CAP, non  sembrano esserci problemi, tutti gli altri campi ammettono lettere minuscole o spazi, o comunque possono avere un formato non conforme con i parametri imposti da Facebook.

Ovviamente non possiamo costringere il nostro utente a scrivere in minuscolo, senza spazi, e seguendo una formattazione astrusa. Soprattutto nel momento in cui sta effettuando un acquisto. Come minimo penserebbe che sta passando i suoi dati all’Isis e scapperebbe dal sito.

Quello che possiamo fare in questo caso è creare delle variabili nostre, composte dai valori delle variabili del nostro form, che invieremo al pixel riformattate seguendo le regole imposte da Facebook.

Crea le variabili

Iniziamo rendere tutte le lettere delle variabili minuscole, e allo stesso tempo creare le nostre variabili. La struttura del nostro script è questa:

var laNostraVariabile = laVariabileDelForm.toLowerCase();

Questo script va utilizzato per tutte le variabili del nostro modulo, tranne per quello della data. A breve ti spiegherò il motivo. In questo modo abbiamo immagazzinato i dati del form e abbiamo reso tutte le lettere minuscole. Ora dobbiamo togliere gli spazi e riformattare i dati secondo il formato rischiesto da Facebook.

Per soddisfare il secondo requisito è possibile utilizzare questo script che nel nostro caso avrà questa finionomia:

laNostraVariabile = laNostraVariabile.replace(/\s/g, "");

Non ci resta che dare uno sguardo alla formattazione richiesta da Facebook per la data, che di solito restituisce un formato con i trattini. Per toglierli ci basterà utilizzare questo script:

laVariabileDelForm = laVariabileDelForm.replace(/[-]/g, "");

Infine passiamo il valore restituito alla nostra variabile con:

var laNostraVariabile = laVariabileDelForm;

Dopo questo parto plurigemellare non ci resta che passare i nostri dati al Pixel Facebook per implementare la ricerca delle corrispondenze avanzata.

Inviare le variabili all’Advanced Matching del Pixel Facebook

Devo creare un nuovo Pixel

Se stai creando un Pixel tutto nuovo ti troverai davanti una schermata simile cliccando sul pulsantino per attivare la ricerca delle corrispondenze avanzata:

implementare l'advanced matching

I campi attivi di default sono nome, cognome ed e-mail, ma puoi aggiungere tutti gli indicatori che vedi utilizzando il menu a tendina infondo al form.

Una volta attivati tutti i campi che puoi riempire, inserisci le variabili che hai creato nei campi, e finalmente, forse, potrai goderti i vantaggi dell’Advanced Matching del Pixel Facebook.

Ho già un Pixel e devo modificarlo

Se invece hai già un Pixel e devi modificarlo devi cambiare la parte dello script con l’ID del tuo Pixel Facebook. Ti spiego: in genere un pixel standard ha questa struttura:

<!-- 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', '129522231025386');
 fbq('track', 'PageView');
 </script>
 <noscript><img height="1" width="1" style="display:none"
 data-src="https://www.facebook.com/tr?id=129522231025386&ev=PageView&noscript=1"
 /></noscript>
 <!-- End Facebook Pixel Code -->

La parte in grassetto va cambiata in questo modo:

<!-- 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');
//Inizio della parte da modificare
fbq('init', '129522231025386', {
  em: variabileMail,
  fn: variabileNome,
  ln: variabileCognome,
//e così via per tutti i campi che abbiamo scelto
  });
//Fine della parte da modificare
fbq('track', 'PageView');
 </script>
 <noscript><img height="1" width="1" style="display:none"
 data-src="https://www.facebook.com/tr?id=129522231025386&ev=PageView&noscript=1"
 /></noscript>
 <!-- End Facebook Pixel Code -->

Attenzione perché sulla guida ufficiale hanno scritto quella che di primo acchitto sembra una cavolata:

Hanno creato un esempio di come si modifica il Pixel per utilizzare l’Advanced Matching:

fbq('init', '<FB_PIXEL_ID>', { 
 em: '{{_email_}}',
 // Data will be hashed automatically via a dedicated function in FB pixel 
 ph: '{{_phone_number_}}', 
 fn: '{{_first_name_}}' .... })

Poi hanno specificato:

In the example above, replace email, phone_number, first_name with the names of the variables on your website that capture this data.

In realtà quello che hanno scritto è sbagliato, o comunque non è sbagliato ma potrebbe facilmente essere mal interpretato, poiché quando genero i campi per l’Advanced Matching alla creazione del Pixel, questi, come abbiamo visto poche righe più sopra, vengono formattati in questo modo:

fbq('init', '129522231025386', {
  em: variabileMail,
  fn: variabileNome,
  ln: variabileCognome,
  });

Seguendo il loro ragionamento mi verrebbe di formattare lo script in questo modo:

fbq('init', '<FB_PIXEL_ID>', {
 em: '{{_variabileEmail_}}',
ph: '{{_phone_number_}}',
 fn: '{{_first_name_}}'
....
});

Poi se ci sono due modi di formattarlo ancora non ho avuto modo di capirlo, però a me sa molto di errore.

Per fortuna c’è un altro modo per implementare l’Advanced Matching

Come implementare l’Advanced Matching con un plugin WordPress

Infine, se sei ricco e te ne sbatti di tutta quella roba da nerd che ho scritto sopra, c’è una soluzione fantastica che molto probabilmente prenderò in considerazione anche io quando scoprirò che in realtà il metodo che ho proposto funziona meno di quello che ha scritto il mio cane camminando a caso sulla tastiera del mio portatile.

È un plugin che si chiama Facebook Pixel By PixelYourSite, che nella versione PRO, promette di farti superare senza ulteriori traumi l’ennesima feature di Facebook, che quando si tratta di implementare emoticon, maschere da zombie e cacate simili rende tutto facile, mentre per chi coi social ci deve lavorare…

Inoltre il plugin ufficiale sviluppato da Facebook per Woocommerce, Facebook for Woocommerce appunto, oltre a generare un catalogo di prodotti, implementare il pixel per un maggiore controllo sull’advertising, promette anche l’implementazione dell’advanced matching.

Conclusioni

Come dicevo non ho avuto modo di testare questa soluzione che ho appena proposto, però la propongo lo stesso affinché apra un dibattito sulla questione, poiché Facebook non ha spiegato ancora bene come implementare la ricerca delle corrispondenze avanzata, i tutorial sono vaghi e inconcludenti (o forse sono io a non averci ancora capito una ceppa) e sui forum di settore ancora in molti brancolano nel buio. Ovviamente nelle prossime settimane mi ripropongo di implementarla e soprattutto di capire come verificare che sia funzionante, anche perché, che io sappia, non c’è un modo semplice per capirlo. Come se non bastasse.

Spero di averti dato una mano, o almeno qualche input che possa farti capire come implementare l’Advanced Matching, e se pensi che abbia sbagliato in qualche punto della spiegazione o che abbia scritto qualche cavolata, scrivimi nei commenti e sarò ben felice di correggere il mio articolo.

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Articoli correlati

Carosello di prodotti WooCommerce con Owl Carousel
22 Febbraio 2020
Carosello di prodotti WooCommerce con Owl Carousel
In questo articolo ti spiego come creare un carosello di prodotti WooCommerce con Owl Carousel. Ovviamente senza utilizzare…
Leggi
Guida a Pixel Your Site Pro: tracciamento professionale per WooCommerce
11 Novembre 2019
Guida a Pixel Your Site Pro: tracciamento professionale per WooCommerce
Se hai letto il mio articolo precedente probabilmente avrai scelto di affidare a PixelYourSite il tracciamento del tuo e-commerce. Come…
Leggi
Tracciamento WooCommerce: Pixel Facebook, Google Analytics e Google Ads con un unico plugin
8 Novembre 2019
Tracciamento WooCommerce: Pixel Facebook, Google Analytics e Google Ads con un unico plugin
Se vuoi entrare subito nel vivo del mio articolo e capire quali siano le migliori alternative per impostare…
Leggi
Creare ed utilizzare insiemi di prodotti del catalogo Facebook
3 Ottobre 2019
Creare ed utilizzare insiemi di prodotti del catalogo Facebook
Gli insiemi di prodotti del catalogo Facebook possono dare una spinta davvero rilevante al tasso di conversione delle…
Leggi