Pixel di Facebook: guida step by step all’installazione con Google Tag Manager

Come installare il Pixel di Facebook tramite Google Tag Manager? E perché dovresti installarlo con GTM?

Non ti preoccupare in questo articolo risponderò a tutte queste domande sull’installazione del pixel attraverso Google Tag Manager e ti mostrerò in pratica alcuni degli eventi personalizzati che io stesso.

Quindi preparati perché sarà una vera e propria guida passo dopo passo 🙂

Che cos’è il Pixel di Facebook?

Per capire bene cos’è e che funzione ha il pixel di Facebook prendiamo la definizione dalle fonti ufficiali:  

Il pixel di Facebook è sostanzialmente una porzione di codice Javascript che carica una libreria di funzioni che possono poi essere utilizzate per monitorare l’attività dei visitatori di Facebook sul tuo sito Web.

Voglio parlarti dell’origine del pixel e come viene usato. 

Una storia curiosa.

I Web Beacons, o chiamati anche Pixel tracking, sono una delle varie tecniche utilizzate sulle pagine Web ed email che in modo discreto (di solito invisibili), consentono di verificare che un utente abbia avuto accesso ad alcuni contenuti. 

Inizialmente, consistevano in semplici immagini di 1×1 pixel che, ogni volta che venivano caricate dal browser mandava una chiamata al server e si conteggiava una “hit”.

Grazie ai pixel, le aziende e le organizzazioni possono tenere traccia del comportamento online degli utenti web.

Oggi, ovviamente i pixel non sono più immagini di 1×1, ma sono più complessi e quasi sempre associati a codici Javascript che permettono di trattenere sempre più informazioni. 

Il noto codice di monitoraggio di Facebook, prende il nome da questa tecnica. Pixel di Facebook.

Il pixel di Facebook ha questa forma:

<!–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’, ‘{id-del-pixel}’); fbq(‘track’, ‘PageView’); </script> <noscript> <imgheight=”1″ width=”1″ style=”display:none”  src=”<https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1>”/> </noscript> <!– End Facebook Pixel Code –>

Non ti spaventare per implementare il pixel di Facebook sul tuo sito non ti servirà uno sviluppatore 😀

Come funziona il pixel di Facebook? 

Prendiamo il tutte quelle righe di codice di poco fa, ma concentriamoci su due elementi fondamentali all’interno dello script: 

fbq(‘init’, ‘{id-del-pixel}’);
fbq(‘track’, ‘PageView’);

• La prima riga serve ad inizializzare il pixel.
• La seconda riga serve di fatto ad inviare un evento, in questo caso il page View.

Ogni volta che la pagina del tuo sito si carica viene caricato anche lo script e di conseguenza inviato a Facebook l’evento page View. Ovvero che qualcuno sta visualizzando la pagina.

Come ti ho detto esistono molteplici eventi da poter inviare al tuo Business Manager di Facebook.

Concludendo, il pixel serve ad monitorare vari azioni che un utente fa sul tuo sito per poi inviare le informazioni a Facebook. 

Ora che sai come funziona passiamo alla pratica di come installare il pixel di Facebook con google tag manager.

Tag Manager: gli elementi base

In questo articolo andremo ad installare il pixel di Facebook tramite google tag manager, quindi sarà necessaria una breve introduzione al funzionamento di google tag manager.

Gli elementi fondamentali di Tag Manager sono 3:

1. I Tag: sono piccole porzioni di codice, come quelle viste prima che vengono inserite all’interno del codice del tuo sito da google tag manager
2. Gli Attivatori: sono elementi che indicano a google tag manager quando “far partire il codice”
3. Le variabili: infine sono elementi che tag manager potrà riconoscere all’interno della pagina.

Se sei confuso è normale, ti sarà più chiaro quando seguirai step by step questa guida.

Ora, possiamo finalmente mettere insieme tutti i pezzi che abbiamo imparato fino ad ora.

Installare il pixel di Facebook con Tag Manager

Innanzitutto voglio dirti che esistono vari metodi per installare il pixel di Facebook sul tuo sito, io uso sempre GTM (Google Tag Manager), perché sostanzialmente funge da contenitore di vari codici di tracciamento.

Banalmente dovrai installare manualmente solo una volta il codice di GTM come nella guida ufficiale.

E tutti i tracking di cui avrai bisogno potrai aggiungerli da google tag manager. (Google Analytics, hotjar, Facebook Pixel, ecc…)

Detto questo iniziamo!

Come installare il pixel di Facebook?

1. Crea il tuo pixel

Prima di installare il codice, se non l’hai già fatto, devi creare il tuo pixel.

Per farlo recati nel tuo “Business Manager” e clicca nella sezione “Gestione Eventi”

Segui i passaggi per la creazione del tuo Facebook pixel.

e quando arrivi a questa schermata:

Clicca su “Usa un partner”.

All’interno della lista dei partner Facebook, visualizzerai Google Tag Manager.

Cliccaci e continua con l’installazione.

Una volta conclusa l’installazione è ora di passare a Google Tag Manager.

2. Creare il tag di installazione su Google Tag Manager

A questo punto, do per scontato che tu abbia già installato e verificato il funzionamento di Tag Manager sul sito.

Ora che hai completato il collegamento tra Facebook e Google Tag Manager, recati nella tua dashboard di GTM

Assicurati di aver selezionato “Tag” dalla colonna a sinistra e visualizzerai il tuo tag creato in automatico da Facebook: “Facebook Pixel ID xxxxx”

Se non lo dovessi trovare puoi sempre inserirlo a mano.

1. Clicca su nuovo tag
2. Clicca su configurazione tag
3. seleziona dalla lista HTML personalizzato
4. Inserisci lo script relativo al codice

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

Puoi anche copiare ed incollare questo codice, ma assicurati di sostituire “il tuo pixel id va quì” con l’ID del tuo pixel.

Dopo aver Inserito lo script è arrivato il momento di selezionare l’attivatore.

Una volta fatto clic sulla sezione “attivatore” poco più in basso, seleziona dalla lista “tutte le pagine”.

In questo modo, stiamo comunicando a Tag Manager che la porzione di codice incollata sopra deve essere presente su tutte le pagine del nostro sito.

Ora è arrivato il momento di salvare e pubblicare il nuovo tag che hai appena creato.

3. Verificare il funzionamento del tag

Per verifica che tutto sia andato a buon fine ti invito a scaricare l’estensione Facebook Pixel Helper.

Con questo tool potrai vedere se il tuo pixel è correttamente installato sul tuo sito.

Una volta aperto il tuo sito, se tutto è funzionante, vedrai l’icona della tua estensione di Facebook Pixel Helper segnalarti l’evento “page view” come in figura.

Tracciare gli eventi con il Pixel

Una volta inserito il codice base all’interno del tuo sito Facebook, di default, assegnerà l’evento “page view” ogni volta che una pagina sul sito tracciato verrà caricata.

Poco fa ti ho detto che potevi tracciare moltissimi eventi e azioni che compiranno i tuoi utenti.

Infatti uno dei vantaggi di GTM è proprio la flessibilità di tracciamento degli eventi.

Il pixel di Facebook ci mette a disposizione tre modi diversi per monitorare le conversioni/eventi:

• Eventi Standard: definiti da Facebook;
• Eventi Personalizzati: definiti da te;
• Conversioni Personalizzate.

Eventi standard e personalizzati possono essere monitorati richiamando la funzione fbq() all’interno di un nuovo tag, oppure usando uno strumento molto utile di GTM.

Le conversioni personalizzate si basano invece sull’URL.

Eventi Standard

Facebook mette a disposizione gli eventi standard, ovvero le azioni predefinite più comuni come:

• Aggiunta al carrello:  fbq('AddToCart')
• Acquisto: fbq('Purchase')
• Lead: fbq('Lead')

Per far scattare l’evento bisogna usare la seguente funzione fbq('track') e sostituire all’interno delle virgolette l’evento che si vuole tracciare. Gli eventi standard supportano anche oggetti parametro con proprietà dell’oggetto specifiche, che consentono di includere informazioni dettagliate su un evento.

Alcuni esempi:

fbq('Lead');  Invia un evento “contatto”

fbq('AddToCart');  invia un evento “aggiungi al carrello”

fbq('AddToWishlist'); invia un evento “aggiunto alla wish list”

Puoi recuperare l’elenco delle proprietà dalla documentazione ufficiale per i developer di Facebook a questo link.

Non temere più avanti ti farò vedere alcuni esempi di tracciamenti utili passo dopo passo 🙂

Eventi Personalizzati

Allo stesso modo degli eventi predefiniti sono porzioni di codice che ci vengono in soccorso quando vogliamo tracciare un evento che non è previsto dalle azioni predefinite di Facebook.

La sintassi è molto simile:

fbq(‘trackCustom’,’Prenotazione_chiamata’);

In questo caso stiamo comunicando che si tratta di un evento personalizzato e successivamente di che tipo di evento si tratta. (la prenotazione di una chiamata.)

Facebook, in questo caso ci lascia totale libertà. Possiamo quindi aggiungere tutti i parametri personalizzati che vogliamo, nella forma che preferiamo.

Conversioni personalizzate

Una Conversione Personalizzata (o Custom Conversion) permette ai marketer di tracciare le azioni degli utenti senza aggiungere linee di codice aggiuntive al pixel di Facebook installato sul sito web.

In questo caso non mi soffermerò tanto in quanto utilizzando Google Tag Manager questa opzione non la andremo ad usare.

Eventi da tracciare con il pixel di Facebook tramite Google Tag Manager

Ora passiamo alla pratica, nei prossimi paragrafi ti mostrerò passo passo, come creare degli eventi personalizzati all’interno di Google Tag Manger.

Tracciare il click sulle CTA con il pixel di Facebook e Tag Manager

“Come tracciare i click sulle call to action sul mio sito con il pixel?” Sicuramente questo è uno degli eventi personalizzati più importanti.

Ti anticipo che non è un’operazione difficile, ti basterà seguire passo passo quello che ti spiegherò.

Partiamo subito dicendo che GTM ci mette a disposizione due attivatori per tracciare questa azione:

• Click sul link
• Click su tutti gli elementi

La differenza tra i due è che il primo tiene conto solo dei click su un link, mentre il secondo dei click su qualsiasi elemento della pagina.

1. Assicurati di avere le variabili sul click attive

Recati all’interno del tuo GTM e assicurati di aver selezionato nella colonna a sinistra la voce “variabili”.

Se non dovessi trovare questi parametri fai click su “configura” e aggiungile.

2. trova l’id o la classe della tua CTA

Ora in alto a destra fai click su “anteprima”

Collega il tuo sito e dopo averlo fatto ti si apriranno due schede nel tuo browser una con il tuo sito e una finestrella di debugging di Google Tag Manager e una del tuo Tag Assistant.

Naviga sul tuo sito e clicca sulla call to action che vuoi tracciare.

Dopo aver cliccato sulla call to action, dirigiti nella scheda del tag assistant.

Seleziona il click nella colonna a sinistra e clicca “variabili”

Memorizza il valore di questi tre parametri evidenziati e passiamo allo step successivo.

3. Creare l’attivatore

Torniamo su Google Tag Manager, nella sezione “attivatori” e crea un nuovo attivatore.

Successivamente fai click su “click -> tutti gli elementi”

Successivamente fai click su “alcuni click”, ti ricordi i parametri che ti avevo detto di memorizzare?

Bene 🙂

Scegli la variabile che preferisci tra i tre, nel mio caso ho scelto “click text”, e scrivi il parametro nello spazio vuoto.

Rinomina l’attivatore e poi salvalo.

Ora abbiamo appena creato un attivatore che comunica a Google Tag Manager di far scattare l’evento ogni volta che c’è un click su un elemento che come testo ha “Vai al blog”.

Ora procediamo a creare l’evento.

4. Creare il tag

Dirigiti nella sezione Tag e creane uno nuovo.

Clicca su nuovo, successivamente su configurazione tag -> HTML personalizzato.

Copia e incolla la funzione di Facebook degli eventi personalizzati che abbiamo visto prima.

In questo caso:

<script> fbq('trackCustom','Click_blog'); </script>

Scorri nelle opzioni avanzate e spunta “attiva un tag prima dell’attivazione” e seleziona il tag del tuo pixel. In questo modo stiamo chiedendo di caricare prima il tag base del pixel e successivamente l’evento.

Ora seleziona l’attivatore creato poco fa. In modo da comunicare a GTM quando deve far scattare il tag, in questo caso al click di Vai al blog.

Ecco uno screen di cosa dovresti vedere 🙂

5. Invia e testa l’evento

Una volta completato il processo, salva il tag e successivamente premi invia.

Ora non ti resta di controllare se l’evento scatta al click sulla tua call to action con Facebook Pixel Helper.

Il procedimento è sempre lo stesso:

1. Assicurarsi di avere le variabili che ci interessano
2. Creare l’attivatore
3. Impostare il tag

In ogni caso ti mostro altri due eventi personalizzati molto interessanti.

Tracciare il tempo speso sul sito di un utente con il Pixel di Facebook su Google Tag Manager

Perché tener traccia del tempo speso degli utenti su un sito.

Semplice.

Nel caso di un blog posso presupporre che se una determinata persona passa più di 20 secondi leggendo un articolo vuol dire che è interessato e che ha trovato quello che cercava.

Quindi a livello pubblicitario posso clusterizzarlo come un utente in target.

Ora procediamo alla creazione dell’evento sempre tramite gli eventi personalizzati.

1. Creazione dell’attivatore timer

Vai su “attivatori” e crea un nuovo attivatore.

Dalla lista degli attivatori seleziona “timer”

Una volta selezionato l’attivatore timer ci chiede una serie di parametri.

1. Intervallo: il numero di millisecondi tra l’attivazione di un evento e l’altra.
2. Limite: il numero massimo di attivazioni dell’evento.
3. Condizioni: quando si attiva l’attivatore

In questo caso con questi parametri ho creato un attivatore timer che si attiva dopo 20s su una pagina che contiene all’interno della url la parola “blog” (quindi un articolo) che si ripete una sola volta.

L’utilizzo dei timer è molto utile, con la quantità di attivatori presenti su Google Tag Manager l’unico limite che avrai per la creazione di eventi è la tua fantasia 😀

Ma andiamo avanti.

2. Creazione del tag

Vai nella sezione Tag e creane uno nuovo, come poco fa selezione HTML Personalizzato e inserisci la parte di codice relativa agli eventi custom di Facebook:

<script> fbq('trackCustom','20s_read'); </script>

Come prima ricordati di andare nelle impostazioni avanzate e dare priorità al tag generico del tuo pixel.

Salva, Invia e controlla tramite Facebook Pixel Helper.

Se dopo 20s di permanenza sulla pagina il tuo pixel helper ha rilevato l’evento appena creato, beh… complimenti, funziona tutto a dovere 🙂

Come tracciare la visualizzazione di un video su YouTube con Google Tag Manager

Può capitare di voler tracciare quante persone visualizzano un video incluso all’interno di una pagina di un sito.

Può essere un dato interessante, credetemi. Ci sono persone che preferiscono vedere un video rispetto a leggere un articolo di 20 minuti e ovviamente questi utenti volgiamo che ci trovino magari su Youtube.

Procediamo allo stesso modo.

1. Assicuriamoci di aver attive le variabili interessate

Andiamo nella sezione “variabili” ed aggiungiamo tutte le variabili che riguardano il video come in figura.

2. crea l’attivatore

Andiamo su attivatori e questa volta creiamo un attivatore di tipo “video di Youtube” Anche questo attivatore ha una serie di parametri.

• Nella sezione acquisizione andiamo a comunicare quando verrà attivato l’attivatore in questo caso all’inizio del video al completamento e all’avanzamento
• Avanzamento ci permette di tracciare la percentuale visualizzata del video, in questo caso ho inserito la percentuale del video visualizzata 25%, 50%, 75%, 90%
• In avanzate spunta gli API di Youtube
• Come condizioni spunta “tutti i video” se vuoi monitorare tutti i video altrimenti scegli quale video in particolare.

Una volta salvato l’attivatore passiamo al tag.

3. Crea il Tag visualizzazione video su Youtube

Vai nella sezione Tag e creane uno nuovo, come poco fa selezione HTML Personalizzato e inserisci la parte di codice relativa agli eventi custom di Facebook:

<script> fbq('trackCustom','Youtube views'); </script>

Come prima ricordati di andare nelle impostazioni avanzate e dare priorità al tag generico del tuo pixel.

Salva, Invia e controlla tramite Facebook Pixel Helper.

Conclusioni – installare il pixel di Facebook con Google Tag Manager

Spero che questo articolo ti sia tornato utile, spero che tu sia riuscito a cogliere le enormi possibilità di tracciamento di Google Tag Manager.

Ovviamente in questo articolo ti ho mostrato alcuni esempi di tracciamenti personalizzati molto interessanti, ti ripeto che l’unico limite che avrai sarà la tua immaginazione.

Ti invito a testare e sperimentare sulla piattaforma di GTM e ancora complimenti se sei arrivato fino a qui, magari fammelo sapere nei commenti! 🙂

Un abbraccio,

Matteo