In questo articolo vediamo come installare e integrare il Pixel di Facebook in Magento 2.

In particolare vedremo come inserire il codice di monitraggio nell’intestazione del tuo sito ecommerce, in modo che appaia in tutte le sue pagine.

Infine vedremo come monitorare i principali eventi di conversione.

Ottenere il codice di monitoraggio di Facebook

Se non sai come si fa, ti illustro passo passo come ottenere il codice di monitoraggio che, successivamente andremo a installare in Magento 2.

Prima di continuare assicurati di avere un account pubblicitario collegato al tuo Business Manager.

Se non sai come fare, ti suggerisco di leggere la guida di Facebook:

https://www.facebook.com/business/help/910137316041095

Una volta creato il tuo account pubblicitario, accedi al Business Manager e seleziona l’account pubblicitario per il quale ti interessa gestire il Pixel di Facebook.

Seleziona il menu in alto a sinistra e da li la voce Pixel in Gestione Eventi.

Crea una nuova origine dati, cliccando a sinistra sul bottone “Aggiungi una nuova origine dati” e poi “Pixel di Facebook”.

NOTA: Se hai più account pubblicitari seleziona quello corretto in alto a sinistra.

A questo punto si apre una nuova schermata, che ti chiede di dare un nome al Pixel e specificare l’url del tuo sito Web (quello dove andremo a installare il codice di monitraggio).

A questo punto non ti resta che cliccare su Crea.

Facebook a questo punto ti chiede se vuoi collegare una Piattaforma Partner oppure installare il codice Manualmente.

Facebook fornisce un plug in per collegare Facebook a Magento 1.

Mentre per Magento 2, non esiste nessun plug in fornito gratuitamente da Facebook.

Ma non è un problema:

Seleziona “Installa manualmente il codice pixel in modo autonomo”.

Hai fatto? Ottimo!

A questo punto copia il codice di monitoraggio (ti basta cliccare con il mouse nella finestra dove compare).

Ora non ci resta che installare questo codice in Magento 🙂

Installare il Pixel di Facebook su Magento

A questo punto non ti resta che accedere al pannello di amministrazione di Magento.

Una volta eseguito l’accesso vai in Content > Design > Configuration.

Clica su Modifica (oppure Edit) in corrispondenza del tema attualmente installato sulla tua piattaforma E-commerce.

Ovviamente dovrai ripetere l’operazione per ogni Vetrina installata (nel mio caso Store Italia e Store Estero).

Nella sezione Head HTML individua la casella di testo ” Scripts and Style Sheets”.

Stando attento a non modificare il contenuto già presente, incolla il codice del Pixel di Facebook (se hai copiato il contenuto dal business Manager, ti è sufficiente premere CTRL + V).

A questo punto non ti resta che salvare la configurazione, svuotare la cache (in Sistema > Strumenti > Gestione Cache) e verificare l’effettiva installazione del Pixel di Facebook.

Verifica dell’installazione del codice di Monitoraggio

Per verificare l’installazione del codice di monitoraggio, apri la home del tuo shop online e col tasto destro del mouse seleziona “Visualizza Sorgente Pagina” se sei su Chrome oppure anche su Firefox (la procedura risulta pressoché simile su altri browser).

Se tutto è andato a buon fine, troverai il codice di Monitoraggio installato.

A questo punto Facebook inizierà a monitorare il traffico sul tuo sito web, operazione fondamentale se poi vorrai fare retargeting, creando campagne ad hoc.

Prima di procedere devi concludere il processo di verifica sul business Manager:

Sempre nella stessa schermata dove abbiamo copiato il pixel di facebook, spostati più in basso, alla sezione “Invia traffico di prova al pixel”.

Digita l’url del tuo sito Web e poi clicca su “Invia traffico di Prova”.

Facebook ti darà conferma dell’effettiva installazione del codice.

Monitorare le conversioni con il Pixel di Facebook

Installare il Pixel di Facebook è la base per monitorare gli eventi principali sulla tua piattaforma.

Vediamo insieme l’evento principale:

ovvero quello di Acquisto.

Come dire a Facebook quali sono gli utenti che hanno eseguito un acquisto e che quindi, hanno portato a una conversione?

Non ti resta che tornare nel business Manager e cliccare su “Continua” dalla schermata precedente.

Se per sbaglio avevi chiuso la configurazione guidata del Pixel, puoi continuare da dove ti eri interrotto, dalla home page del pixel cliccando su “Visualizza le istruzioni di configurazione”.

Nella schermata successiva Facebook ti chiede se vuoi installare manualmente il codice dell’evento oppure usare lo strumento per la configurazione degli eventi su Facebook.

Se clicchi su installa manualmente, vedrai che Facebook ti propone diversi eventi che potrai monitorare sul tuo sito.

A noi interessa quello di Acquisto!

Non ti resta che copiare il codice riportato e incollarlo nella “Thank you Page” del tuo sito Web.

Tuttavia ho una brutta notizia 🙁

Purtroppo Magento non ti permette di modificare il codice in modo semplice e intuitivo.

Inoltre lo strumento di configurazione degli eventi su Facebook, è per ora disponibile solo negli USA come annuncia la stessa azienda in questa pagina.

Ma non preoccuparti, ho la soluzione per te 🙂

Modulo Facebook Pixel per Magento

Ho creato un modulo, per Magento 2, per integrare il Facebook Pixel e totalmente gratuito!

Ti basta registrarti qui, per riceverlo comodamente nella tua casella di posta! (Attenzione: Il modulo è compatibile per ora solo per Magento 2.2 e Magento 2.3)

Inoltre riceverai il mio E-Book Gratis “Ottimizza il tuo sito e-commerce in pochi semplici steps”, una guida pratica per ottimizzare il tuo ecommerce ed evitare alcuni degli errori più comuni.

Ma vediamo il modulo all’opera.

Modulo Pixel di Facebook: Attivazione e Configurazione

Il modulo è molto semplice da usare e configurare.

Vai in Negozi > Configurazione > NS Engineering > Facebook Pixel (oppure Stores > Configuration se il tuo backend è in lingua inglese) per accedere alle impostazioni generali del modulo:

Seleziona Si in corrispondenza della voce Activate Pixel per attivare il modulo.

Inserisci il Pixel ID, nella relativa casella di testo.

Puoi recuperare l’ID direttamente dalla schermata di configurazione del Pixel, nel Business Manager di Facebook.

Dalla schermata principale, in alto a sinistra è indicato l’ID del Pixel appena creato, ti è sufficiente copiarlo negli appunti, cliccando sul numero evidenziato in figura:

Una volta copiato l’ID non ti resta che incollarlo nella configurazione del modulo in Magento.

A questo punto non ti resta che salvare cliccando su “Salva Configurazione” e poi pulire la chache.

Attenzione! Non dimenticare mai di pulire la cache di Magento in Sistema > Gestione Cache o le modifiche apportate non saranno visibili.

Modulo Pixel di Facebook: Traccia gli eventi

Il modulo ti offre la possibilità di tracciare separatamente i seguenti eventi:

• Inizializzazione e matching avanzato dei dati dell’utente, se loggato.
• Visualizzazione Pagine sito
• Visualizzazione pagina articolo, con relativi attributi, quali prezzo, nome e altri a scelta.
• Evento Aggiungi al Carrello al click del bottone di aggiunta al carrello.
• Evento Aggiungi alla Wishlist, quando l’utente clicca sul link di aggiunta alla wishlist.
• Evento di Inizio Acquisto, quando l’utente si sposta nella pagina di acquisto
• Evento di Acquisto, quando l’utente conclude l’acquisto.
• Evento ricerca, quando l’utente esegue una ricerca veloce nel sito

Vediamo in ordine i vari eventi come lavoravo.

Evento Init

L’evento di inizializzazione (Init), viene aggiunto a tutte le pagine del tuo sito, prima della chiusura dell’intestazione </head>.

Contiene i dati dell’utente che sta navigando nel sito, qualora sia autenticato (compatibilmente con la tua privacy policy).

Questo permette a Facebook di fare il matching avanzato dei dati dell’utente e trovare corrispondenza tra i suoi dati e quelli presenti sulla sua piattaforma.

Evento PageView

L’evento PageView è comune a tutte le pagine del sito e viene installato automaticamente quando attivi il Pixel di Facebook (vedi immagine precedente)

Evento ViewContent

L’evento viewcontent viene tracciato quando l’utente naviga all’interno delle pagine articolo.

Per attivare il tracciamento devi impostare a Si la voce “Track Product View Content”:

In questo caso verranno tracciati i seguenti dati:

• Il codice dell’articolo
• Il prezzo dell’articolo (incluso di IVA)
• Il nome dell’articolo

Puoi eventualmente tracciare anche altri attributi aggiuntivi, tramite la voce “Additional Parameters”.

Per aggiungere un ulteriore attributo devi cliccare su “Add Parameter”.

In corrispondenza della colonna “Parameter”, inserisci il nome del parametro che sarà tracciato da Facebook e in corrispondenza della colonna “Attribute”, selezionare l’attributo che ti interessa tracciare.

In questo caso specifico, per esempio, il modulo sta inviando al Pixel di Facebook questi dati:

• WT09, ovvero il codice dell’articolo
• Breathe-Easy Tank, ovvero il nome dell’articolo
• 41.48, ovvero il prezzo incluso di IVA
• Cocona, performance fabric, Cotton rappresenta il materiale

Queste informazioni ovviamente, sono presenti nella scheda dell’articolo in Magento.

Evento AddToCart

Tramite l’opzione precedente, sei in grado anche di tracciare l’evento aggiungi al carrello.

Evento AddToWishlist

Il Pixel di Facebook permette anche di monitorare l’evento di aggiunta alla wishlist.

Puoi attivarlo nel modulo selezionando Si in corrispondenza dell’opzione Track Add to Wishlist.

In questo caso vengono usati i parametri aggiuntivi già usati per l’evento ViewContent.

Evento InitiateCheckout

Questo evento si attiva quando l’utente inizia la fase di acquisto, spostandosi alla pagina di checkout.

NOTA: gli eventi di inizio acquisto e acquisto funzionano correttamente con i principali moduli di checkout esistenti per Magento 2. Tuttavia, se dovessi riscontrare problemi, ti esorto a contattarmi tramite il modulo contatti che trovi sul sito oppure su Facebook!

Per attivare questo evento, devi attivare l’opzione Track Purchase.

Evento Purchase

Tramite l’opzione Track Purchase, attivi anche il tracciamento degli acquisti.

Affinché l’evento sia monitorato correttamente, l’utente deve completare correttamente l’acquisto e essere reindirizzato quindi alla Thank You Page.

L’evento ti permette di tracciare i seguenti dati:

• valore totale ordine (incluso di iva)
• codice valuta

Per ogni articolo nel carrello vengono tracciati:

• codice articolo (se configurabile, inserisce il codice della variante)
• prezzo articolo
• quantità

Puoi eventualmente aggiungere parametri aggiuntivi per ogni carrello, ad esempio taglia e colore.

Di seguito ti mostro il risultato per 3 articoli configurabili acquistati:

Evento Search

Infine il modulo traccia la ricerca degli utenti tramite lo strumento di ricerca veloce, normalmente disponibile con la lente di ingrandimento in alto.

Attento: Attualmente non funziona con la ricerca avanzata!

Se l’utente quindi digita una parola chiave nella ricerca, ad esempio il nome di un articolo, questo sarà tracciato e inviato al Pixel di Facebook.

Per attivare il tracciamento devi impostare a Si la voce Track Catalog Search.

Pixel di Facebook per Magento 2: Download

Se non l’hai già fatto puoi scaricare il mio modulo per il Pixel da qui:

Ti aggiornerò via email su tutti gli aggiornamenti riguardanti il modulo.

E, come già detto, riceverai gratuitamente il mio Ebook “Ottimizza il tuo sito e-commerce in pochi semplici steps”, una guida pratica che ti aiuta a evitare alcuni degli errori più comuni negli ecommerce.

Istruzioni di Installazione

L’installazione è semplicissima. Ti basta caricare il contenuto del file Zip nella cartella app/code della tua installazione Magento.

Una volta caricata la cartella, devi accedere tramite SSH al server su cui è installato Magento.

Spostati a questo punto nella cartella di root e digita i seguenti comandi:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:clean

Hai problemi con l’installazione?

Lascia un commento alla fine del post e vedrò come aiutarti.

Attenzione però, il supporto riguarda solo problemi relativi ad anomalie e malfunzionamenti legati all’installazione del modulo.

Se necessiti di una consulenza più approfondita, Puoi contattarmi tramite il modulo di contatto che trovi in basso, oppure su Facebook.

Fa riferimento alla mia sezione di Consulenza per ulteriori dettagli.

Pixel di Facebook e il GPDR

Come tutti gli script di terze parti anche quello per integrare il Pixel di Facebook, per funzionare rilascia un cookie sul dispositivo dell’utente, al fine di garantire il corretto tracciamento delle sue informazioni personali.

Tuttavia, secondo le regole già vigenti sulla privacy e rese più restrittive con l’introduzione del GDPR (o Regolamento per la protezione generale dei dati), devi dare la possibilità all’utente di scegliere se salvare o meno i cookie dei siti in cui navighi.

Bloccando i cookie non sarà possibile alcun tipo di tracciamento.

Sebbene questa scelta non sia quella desiderata, in quanto non potresti fare successivamente retargeting del tuo pubblico su Facebook, è obbligatoria per legge.

Così ho deciso di rendere il plug in GDPR Compliant.

Nel pannello di configurazione del modulo, troverai una sezione chiamata GDPR settings.

Impostando a Si la voce Enable Cookie banner attiverai il banner di controllo dei cookie, che sarà visualizzato in home page, alla prima visita dell’utente sul tuo sito.

Cliccando sul bottone Deny l’utente potrà decidere di bloccare il tracciamento dei suoi dati.

Cliccando sul bottone Allow invece, consentirà il tracciamento.

Il modulo gestisce soltanto il funzionamento del tracciamento tramite il Pixel di Facebook, tuttavia dopo, ti spiegherò come potrai estendere questa funzionalità ad altri condici di monitraggio (ad esempio quello di Google Analytics oppure Hotjar).

I contenuti visualizzati sono completamente personalizzabili.

Puoi personalizzare pertanto il Messaggio e il contenuto dei bottoni di Blocco e Consenso.

Puoi apportare questa modifica a livello di vetrina.

Pertanto, se hai una vetrina per l’estero e una per l’italia, potrai modificarle per entrambe, mostrando quindi un messaggio in inglese per chi naviga nello store estero e uno in Italiano, per chi naviga nello store Italia.

Una volta salvata al configurazione e pulita la cache di Magento potrai vedere sul sito il risultato:

Come controllare script di terze parti

Per controllare gli script di terze parti, come quello di monitraggio di Google Analytics, devi tuttavia intervenire lato codice.

Sebbene la modifica sia molto semplice, potresti dover richiedere l’aiuto di un personale esperto.

Ti è sufficiente modificare il tag <script> iniziale con quanto segue:

<script type="text/plain" data-gdpr="0">

Ad esempio:

NOTA IMPORTANTE: Se stai già usando un plug in che integra il cookie banner e che ti permette di gestire i cookie di terze parti, non è necessario attivare la sezione GDPR settings e puoi quindi lasciare tranquillamente a NO, l’opzione Enable Cookie Banner.

Pixel di Facebook per Magento 2: Conclusioni

Come hai visto, integrare il codice del Pixel non è difficile, tuttavia avrai bisogno di un modulo ad hoc per gestire e monitorare diversi Eventi.

Riepilogando il modulo ti permette di:

• Fare il matching avanzato dei dati utente
• Tracciare le visite alle pagine del tuo shop
• Tracciare la navigazione nelle schede articolo
• Tracciare l’aggiunta al carrello
• Tracciare l’aggiunta alla wishlist
• Tracciare l’inizio del checkout
• Tracciare l’evento di acquisto
• Tracciare le ricerche
• Infine è GDPR compliant

Questo modulo sarà costantemente aggiornato, per renderlo quanto più possibile compatibile al Pixel di Facebook e ovviamente alle release di Magento che usciranno di volta in volta.

Riceverai gli aggiornamenti, gratuitamente, inserendo l’email qui sotto:

Per suggerimenti, consigli su come migliorare il modulo, non esitare a contattarmi lasciando un commento qui sotto.