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

16 minuti   Facebook Ads

By Enrico Chiolo

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

Come configurare il Pixel di Facebook? Questo articolo è una vera e propria guida completa per imparare a installare il pixel e gli eventi di cui hai bisogno con Google Tag Manager.

Dall’analisi dei dati del tuo sito web all’ottimizzazione delle tue campagne pubblicitarie, un Facebook Pixel installato correttamente sarà un grande supporto al raggiungimento dei tuoi obiettivi di Marketing.

Installare il Pixel di Facebook e monitorare gli eventi principali con Tag Manager non è un’operazione particolarmente complessa. Tuttavia, per poter eseguire al meglio un tracciamento completo è necessario comprendere alcuni concetti di base della piattaforma (Tag Manager) e del funzionamento del pixel di Facebook.

La maggior parte dei problemi nell’implementazione del pixel con Tag Manager possono essere risolti in modo semplice se si conoscono a fondo due cose:

  • Il modo in cui funziona il Pixel;
  • Il funzionamento di attivatori e tag.

Che cos’è il Pixel di Facebook?

Per comprendere il funzionamento del pixel di Facebook possiamo partire dalla guida per gli sviluppatori di Facebook, appunto.

Tranquillo, non ti servirà essere uno sviluppatore per installare e configurare il tuo pixel.

La documentazione ufficiale ci dice che: 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.

Il codice di installazione del 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 –>

Vedere tutte queste righe di codice ti spaventa?

Tranquillo, la maggior parte delle implementazioni potrai eseguirle con una sola riga di codice.

Puoi pertanto ignorare tutta la prima parte.

Nello specifico, ti chiedo di attenzionare solo le due righe di codice che iniziano con fbq.

….
fbq(‘init’, ‘{id-del-pixel}’);
fbq(‘track’, ‘PageView’);
</script>
….

Quelle che vedi sopra sono sostanzialmente due funzioni Javascript:
  • La prima serve ad inizializzare il pixel (di fatto il testo {id-del-pixe} va sostituito con l’ID del tuo pixel di Facebook);
  • La seconda serve ad inviare l’evento PageView al pixel.

Ogni volta che vorrai inviare un evento al pixel dovrai utilizzare la funzione fbq(), che per funzionare ha però bisogno del codice di installazione.

Gli elementi di base di Tag Manager

Non c’è il tempo in quest’articolo di illustrare nel dettaglio il funzionamento di Google Tag Manager. Tuttavia, la maggior parte delle funzioni di base possono essere utilizzate anche senza comprenderne i meccanismi che stanno alla base.

Nello specifico, gli elementi fondamentali di Tag Manager sono 3:
  • I Tag
  • Gli attivatori
  • Le variabili

I tag sono porzioni di codice (come quelli visti sopra) che vengono inseriti all’interno della pagina. Gli attivatori servono per indicare a Tag Manager quando inserire i Tag all’interno della pagina. Le variabili possono infine essere immaginate come delle scatole contenenti determinati oggetti.

Un esempio utile è quello di un incrocio: i tag rappresentano le macchine pronte ad immettersi nell’incrocio, gli attivatori i semafori che indicano alle auto quando partire, le variabili i pacchi nel bagagliaio dell’auto.

Tutto chiaro? Bene, allora direi che possiamo mettere insieme i pezzi e capire come sfruttare queste informazioni per l’installazione del pixel di Facebook con Tag Manager.

Installare il Pixel con Tag Manager

So bene che il pippone tecnico che hai appena letto (perché lo hai letto, vero?) può sembrare inutilmente pesante, ma ti assicuro che conoscere questo quattro nozioni in croce ti consentirà di risolvere il 90% dei problemi tecnici che incontrerai nell’installazione del pixel.

Detto questo, direi di cominciare ad installare il pixel sul nostro sito.

1. Crea il tuo Pixel

Prima di partire con l’installazione, hai bisogno di creare il pixel per il tuo sito. Accedi quindi al tuo Business Manager e recati nella sezione “Gestione eventi”.

Crea il tuo Pixel di facebook

Segui la procedura di creazione e prendi nota dell’ID del pixel di Facebook. Una volta fatto questo, non ti servirà nient’altro.

2. Crea il tag di installazione del pixel

A questo punto, do per scontato che tu abbia già installato e verificato il funzionamento di Tag Manager sul sito. Se non lo hai fatto, questo è il momento giusto per iscriverti alla newsletter e rimanere così informato sull’uscita dei prossimi articoli.

Entra quindi all’interno dell’area di lavoro del container e fai clic su “nuovo” per creare un nuovo tag.

Tag manager ti chiederà 3 cose fondamentali:
  • Il nome del Tag
  • Il tipo di Tag
  • L’attivatore

Puoi scegliere il nome del tag che preferisci, ma ti consiglio di seguire una struttura unitaria per tutto l’account. In genere io utilizzo sempre questa:

PIATTAFORMA – TIPO TAG – NOME DESCRITTIVO

Per quanto riguarda invece la tipologia di Tag, c’è un piccolo appunto da fare. Come accennato sopra, i tag non sono altro che porzioni di codice che vengono poi aggiunte alla pagina su indicazione dell’attivatore.

Tag Manager presenta una serie di Tag già configurati per diverse piattaforme:
  • Google Analytics
  • Hotjar
  • Google Optimize
  • Il monitoraggio delle conversioni di Google ADS
  • ecc.

Tuttavia, non esiste ad oggi un’integrazione ufficiale con Facebook. Esistono dei template personalizzati creati dagli utenti. Il mio consiglio è quello di farsi (perlomeno all’inizio) tutto a manina, in modo da comprendere a pieno lo strumento.

Detto ciò, dato che Facebook non è direttamente integrato, seleziona come tipologia di Tag “Html personalizzato”.

Html personalizzato

Copia adesso il codice di installazione del pixel che ti ho mostrato all’inizio dell’articolo e sostituisci il testo “{id-del-pixel}” con l’ID del tuo pixel.

codice del pixel di facebook

Ora è arrivato il momento di scegliere l’attivatore e qui ti torneranno estremamente utili i concetti visti nel primo paragrafo. Quello che abbiamo inserito nel Tag è il codice che permette di fatto il funzionamento del pixel. Questo significa che, ogni qualvolta vorrai inviare un evento al tuo pixel, il codice sopra riportato dovrà essere presente nella pagina.

Ecco allora che diventa naturale chiedere a Tag Manager di attivare il nostro tag all’interno di tutte le pagine del sito. Per farlo, ti basterà fare clic sul riquadro “attivazione” e dal menù a tendina selezionare l’attivatore “All Pages”.

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.

NB: Il codice di installazione del pixel contiene già un primo evento che è il Pageview.

fbq(‘track’, ‘PageView’);

Attivatore  del Pixel di facebook

Salva quindi il tag e verrai riportato all’area di lavoro. È arrivato il momento di verificare che tutto funzioni. Fai clic sul tasto anteprima e carica una pagina del sito.

Utilizza Pixel Helper per verificare la corretta installazione del pixel di Facebook. Se hai seguito il processo correttamente, dovresti trovarti nella situazione illustrata qui sotto.

Pixel Helper

Eventi del Pixel

Ora che il pixel è stato installato sul tuo sito, sei ufficialmente in grado di tracciare le conversioni e le azioni degli utenti sulle pagine del tuo sito.

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

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

Eventi standard e personalizzati possono essere monitorati richiamando la funzione fbq(), come visto per l’installazione del pixel. Le conversioni personalizzate si basano invece sull’URL.

Eventi Standard

Gli eventi standard sono azioni predefinite che corrispondono in gran parte alle azioni più comuni che un utente può compiere sul tuo sito:

  • AddToCart: inserimento di un prodotto nel carrello;
  • Contact: richiesta di contatto;
  • Lead: autoesplicativo direi;
  • View Content: visualizzazione del contenuto della scheda prodotto.

Facebook ha definito un elenco enorme di azioni standard che puoi recuperare da questo link.

Per monitorare un qualsiasi evento standard devi utilizzare la funzione fbq(‘track’) a cui va aggiunto il tipo di evento che vuoi monitorare.

Ecco alcuni esempi:

fbq(‘track’,’ViewContent’); //Invia un evento ViewContent
fbq(‘track’,’Lead’); //Invia un evento di tipo Lead

La sintassi da rispettare è quella vista sopra e mi raccomando, non dimenticare mai di inserire il punto e virgola alla fine dell’istruzione.

La maggior parte degli eventi standard accetta anche una serie di proprietà aggiuntive che possono essere passate tramite JSON.

Immagina ad esempio di voler inviare un evento purchase al tuo pixel, molto probabilmente ti sarà utile passare insieme all’evento anche l’importo della transazione.

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

Ti lascio anche alcuni semplici esempi della sintassi da utilizzare per il tracciamento di alcuni eventi standard in cui invii al pixel anche i parametri accessori.

//Evento Purchase in cui viene passato l’importo come parametro
fbq(‘track’, ‘Purchase’, {currency: “EUR”, value: 10.99});

//Evento Lead in cui viene passato tramite parametro il tipo di lead
fbq(‘track’, ‘Lead’, {content_name: ‘Iscrizione Webinar’});

Nei prossimi paragrafi ti farò vedere alcuni esempi pratici di tracciamento degli eventi standard. Fin qui dovresti comunque avere chiaro il funzionamento del pixel e della funzione fbq().

Eventi Personalizzati

Gli eventi personalizzati ci vengono in soccorso nel momento in cui si ha la necessità di tracciare un evento non previsto da quelli standardizzati da Facebook. Gli eventi personalizzati sono estremamente utili per definire segmenti di pubblico personalizzati.

Come nel caso degli eventi standard, anche gli eventi personalizzati supportano l’utilizzo di parametri aggiuntivi.

Per monitorare gli eventi personalizzati devi utilizzare in questo caso la funzione fbq(‘trackCustom’) con l’aggiunta del nome che vuoi passare per l’evento personalizzato.

Ecco un esempio:

fbq(‘trackCustom’,’Visualizzazione_Post’);

Facebook non ha previsto un evento per la visualizzazione del post sul blog. Ecco allora che attraverso il monitoraggio degli eventi personalizzati siamo in grado di tenere traccia degli utenti che hanno visualizzato un post sul nostro blog.

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

Conversioni Personalizzate

Sulle conversioni personalizzate mi soffermerò solo brevemente, anche perché non richiedono particolari operazioni con Tag Manager. Come visto sopra, ogni volta che il pixel viene caricato sul sito richiama automaticamente l’evento Pageview fbq(‘track’,’Pageview’).

L’evento di visualizzazione pagina registra come parametro anche l’URL della pagina. Dal BM puoi utilizzare questo URL per definire azioni di conversione.

Se ti interessa semplicemente monitorare azioni di conversione basate sull’URL ti basterà installare il codice del pixel come visto nei paragrafi precedenti. Dopo averlo fatto, potrai impostare le Conversioni Personalizzate direttamente dal Business Manager.

Direi che è arrivato il momento di vedere alcuni esempi pratici di tracking degli eventi con Tag Manager.

Tracciare la Percentuale di Scroll di una Pagina con Tag Manager e Il Pixel di Facebook

Come promesso, direi che possiamo cominciare a sporcarci le mani con alcuni esempi pratici. Supponiamo ad esempio di voler monitorare le percentuali di Scroll su una determinata pagina del nostro sito.

Facebook non prevede un evento standard per lo scroll della pagina e di conseguenza dovremo utilizzare un evento personalizzato.

Al contrario, Tag Manager ci fornisce già tutto il necessario per tracciare correttamente lo scroll della pagina sia in verticale che in orizzontale.

1. Abilitiamo le Variabili necessarie

La prima cosa da fare è sicuramente quella di abilitare alcune variabili necessarie. Nello specifico Tag Manager dispone di una serie di variabili integrate che ci saranno estremamente utili nelle operazioni di Tracciamento.

Come accennato sopra, una variabile è sostanzialmente una scatola contenente un oggetto.

Tra le variabili integrate di Tag Manager troviamo ad esempio:
  • Page URL: contenente l’URL della pagina attualmente visualizzata.
  • Clic Class: contenente la classe dell’oggetto coinvolto nell’evento click ecc.

Se è la prima volta che utilizzi Tag Manager, devi abilitare queste variabili così da poterle utilizzare liberamente nei tuoi tag. Recati nel contenitore, fai clic su variabili e, per finire, clicca sul tasto configura di fianco al testo “Variabili Integrate”.

 Variabili Tag Manager

Scorri quindi il menù laterale fino alla sezione “Scorrimento” e fai check sulle tre variabili presenti. Abilitale tutte e tre, anche se in questo caso ne utilizzerai soltanto una: “Scroll Depth Threshold”. Quest’ultima contiene infatti un valore numerico indicante la percentuale di scroll sulla pagina.

2. Creiamo l’attivatore

Ora che abbiamo abilitato le nostre variabili, possiamo procedere alla creazione dell’attivatore. Anche in questo caso, Tag Manager ci fornisce un attivatore per monitorare lo scroll sulla pagina.

Passa quindi alla sezione “Attivatori” e fai clic su “Nuovo”. Dal menù laterale seleziona quindi “Profondità di Scorrimento”.

Variabili Necessarie

Dai un nome facilmente riconoscibile all’attivatore.

Flagga “profondità di scorrimento verticale” e successivamente “percentuali”. Inserisci quindi nel campo di testo le percentuali di scroll per cui vuoi che l’attivatore invii un evento. Generalmente io setto le seguenti percentuali: 25%, 50%, 75% ,90%.

 Attivatore del pixel di facebook

Puoi lasciare invariate le altre configurazioni e, in questo caso, l’attivatore invierebbe gli eventi di scroll su tutte le pagine del sito.

Immagina però di voler monitorare gli eventi di scroll soltanto nelle pagine del blog.

Per farlo, puoi limitare l’azione dell’attivatore tramite l’ultimo campo “Questo attivatore si attiva su:”.

Percentuali Attivatore pixel di facebook

Nello screenshot sopra ho ad esempio indicato all’attivatore di generare un evento soltanto in quelle pagine che contengono il testo “blog” nell’URL.

Puoi limitare l’attivatore come preferisci e in questo caso le possibilità dipendono esclusivamente dalla tua conoscenza dello strumento e dalla struttura del sito web che andrai a tracciare.

3. Creiamo il Tag

Una volta definito l’attivatore, possiamo procedere alla creazione del nostro Tag. Anche in questo caso dobbiamo selezionare come tipologia di Tag “Html Personalizzato” e come Attivatore il nostro attivatore appena creato.

Creiamo il tag

Utilizziamo quindi la funzione fbq(‘trackCustom’) per generare un evento personalizzato.

Ecco il mio esempio:
esempio tag manager

Come puoi notare, per rendere il tutto più interessante, ho aggiunto due variabili. La prima è la variabile integrata che abbiamo attivato nel punto 1, la seconda è una variabile integrata contenente l’URL della pagina.

Per richiamare una variabile in Tag Manager ti basterà inserirla tra le doppie parentesi graffe “{{“. Una volta che avrai scritto la doppia parentesi, sarà lo stesso tag a suggerirti tutte le variabili utilizzabili.

Parentesi Graffe Google Tag Manager

Perché ho aggiunto la variabile contenente la percentuale di scroll al nome dell’evento? La risposta è semplice: perché in questo modo posso generare i vari eventi di scroll senza la necessità di creare un attivatore per ogni percentuale.

Il risultato è quello che puoi vedere in questo screenshot:

Risultato Eventi

In totale ho 4 eventi di scroll per ognuna delle percentuali che ho deciso di abilitare nell’attivatore. In situazioni come questa, l’uso delle variabili può semplificarti la vita.

Ma come vedi, ho anche aggiunto un parametro URL che sfrutta la variabile integrata Page URL per passare all’evento anche l’indirizzo della pagina dove è avvenuto l’evento.

Evento e Page Url

Verifica quindi che tutto funzioni in modalità “Anteprima” e invia il tuo nuovo Tag 🙂

Tracciare il Click sulle CTA con Tag Manager ed il Pixel di Facebook

Tenere traccia dei clic sulle CTA non è un’operazione particolarmente complessa, ma a seconda della struttura della landing potresti incontrare alcune difficoltà.

Tag Manager ci mette a disposizione due attivatori per gli eventi di tipo clic:
  • Clic – Solo Link
  • Clic – Tutti gli elementi

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

L’evento sui clic va però configurato in modo da attivare il nostro Tag solo nel caso in cui venga cliccato un elemento specifico: in questo caso, la nostra call to action.

Per farlo, possiamo procedere in 3 modi:
  • Selezionando la classe o l’ID della nostra CTA;
  • Utilizzando il testo della CTA;
  • Combinando insieme classe/id e Testo.

Ma procediamo con ordine.

1. Trova l’ID o la Classe della CTA

Se hai la possibilità di chiedere al developer di inserire una classe specifica o degli ID nelle CTA, il mio consiglio è quello di farlo. Passa quindi direttamente al secondo punto.

Se non hai possibilità di far intervenire un developer sulla pagina, dovrai rimboccarti le maniche per trovare la classe di riferimento grazie al Browser.

I browser moderni mettono infatti a disposizione alcuni Tool per gli sviluppatori che ci torneranno particolarmente utili.

La modalità di accesso agli strumenti di sviluppo, cambia in base al Browser utilizzato. In particolare, nell’esempio che segue, utilizzeremo gli strumenti di sviluppo di Google Chrome, ma per gli altri Browser puoi far riferimento alla documentazione ufficiale:

Ispeziona quindi la pagina che vuoi tracciare e vai alla ricerca della classe o dell’ID relativo alla Call To Action.

Classe o Id Call to action

Nello screen sopra puoi ad esempio osservare la classe di un bottone presente sulla pagina. Devi però fare molta attenzione. C’è infatti una differenza non da poco tra classe e ID. La classe definisce in genere una serie di elementi, mentre l’ID si riferisce ad uno specifico elemento.

In questo caso, ad esempio, la classe elementor-button fa riferimento a tutti i bottoni di una pagina costruita con elementor. Questo significa che in presenza di altri bottoni, questi ultimi farebbero scattare l’attivatore anche se non si tratta di un clic sulla CTA.

Il modo più semplice per risolvere il problema (anche se non lo amo particolarmente) è quello di utilizzare il testo della CTA. In pratica, chiederemo “all’attivatore” di attivare il nostro Tag solo nel caso in cui il testo dell’elemento cliccato corrisponda effettivamente al testo della CTA.

Questo risolve in parte il nostro problema ma, come dicevo, non amo particolarmente quest’opzione. Se ad un certo punto, per un qualsiasi motivo, volessi cambiare il testo delle CTA, dovresti anche intervenire sull’attivatore per sistemarlo.

2. Crea l’attivatore

Indipendentemente dal fatto che tu abbia deciso di utilizzare il testo della Call To Action, la classe, l’id o qualsiasi altro elemento, il prossimo passo da compiere è quello di creare effettivamente il nostro attivatore.

Nel menù laterale fai quindi clic su “Attivatori” e poi su “Nuovo”. Dai un nome all’attivatore e fai clic sul riquadro “configura attivatore”. Seleziona quindi dal menù laterale il tipo di attivatore “Clic – Tutti gli elementi”.

È arrivato il momento di configurare il nostro attivatore. Fai quindi clic su “Tutti i Clic” e compila i campi in base alle tue necessità.

Configurazione attivatore per Call to action

Sii il più specifico possibile nella configurazione del tuo attivatore in modo da non generare falsi positivi per il tuo Pixel di Facebook.

Nell’esempio sopra io ho configurato l’attivatore in modo che si attivi solo se:
  • La classe dell’elemento cliccato contiene elementor-button
  • Il testo dell’elemento cliccato è esattamente “Richiedi Consulenza”
  • L’URL della pagina contiene richiesta-consulenza

Salva quindi l’attivatore e procediamo con la creazione del Tag.

3. Crea il Tag

Anche in questo caso, dovrai procedere alla creazione di un Tag HTML personalizzato. Vai quindi sulla Tab Attivatori, seleziona HTML Personalizzato e dopo avergli dato un nome descrittivo, fai clic su “Scegli attivatore” e seleziona l’attivatore appena creato.

Tag HTML personalizzato

Il clic sulle CTA non è un evento standard definito da Facebook. Dovremo quindi utilizzare la funzione fbq(‘trackCustom’). Richiamiamo quindi la nostra funzione e diamo un nome all’evento.

Funzione custom Fb

Salva ora il Tag, vai in modalità anteprima e testa il nuovo Tag. Se è tutto settato per bene, dovresti vedere l’evento al clic delle CTA.

Verifica con Pixel Helper

Ecco fatto. Adesso hai appena tracciato con Tag Manager ed il Pixel il clic degli utenti sulle CTA.

Tracciare la Permanenza sulla Pagina con Tag Manager e il Pixel

Hai la necessità di tenere traccia degli utenti che passano un determinato periodo di tempo sulla pagina? Tag Manager ci mette a disposizione un attivatore che fa al caso nostro.

Anche in questo caso, si tratta di un evento personalizzato e di conseguenza dovremo utilizzare la funzione fbq(‘trackCustom’). Il processo di creazione è però identico a quello visto negli esempi precedenti.

1. Creiamo l’attivatore

Torniamo alla sezione “attivatori” di Tag Manager e creiamo un nuovo attivatore di tipo “Timer”. Procediamo quindi alla configurazione dell’attivatore che ci richiede alcune informazioni:

  • Nome Evento: lascialo pure invariato;
  • Intervallo (in millisecondi): Il numero di secondi tra un evento e l’altro;
  • Limite: Il numero di volte in cui vogliamo che l’evento si attivi;
  • La Condizione: che da lo start al timer.
Attivatore permanenza sulla pagina

Cerchiamo quindi di comprendere come funziona esattamente l’attivatore. Si tratta di un vero e proprio timer che si attiva nel momento in cui la condizione indicata è vera.

Nel caso dello screenshot sopra, il timer si attiva 1 volta soltanto nel momento in cui l’URL della pagina contiene il testo “Blog”.

Con un settaggio simile andremo a far scattare l’attivatore quando gli utenti visitano una pagina del blog per più di 10 secondi.

La cosa più interessante è che siamo noi a decidere quando il timer dovrà cominciare il suo conto alla rovescia. Questo ci fornisce grandi possibilità. Potremmo ad esempio decidere di far scattare un evento timer quando l’utente comincia la compilazione del FORM, per capire quanti utenti impiegano più di un determinato numero di secondi/minuti per la sua compilazione.

Oppure potremmo far scattare timer diversi per gli utenti che cliccano sulle CTA o si fermano a leggere un determinato paragrafo, per capire come queste azioni influenzano la permanenza dell’utente sulla pagina e così via.

Gli utilizzi dell’attivatore “Timer”, come per il resto degli attivatori, dipendono esclusivamente dalla nostra fantasia e dai nostri obiettivi.

Salviamo comunque il nostro attivatore e procediamo con la creazione del TAG.

2. Creazione del TAG

Torniamo alla sezione TAG e creiamo un nuovo Tag “HTML Personalizzato”. Utilizziamo quindi la funzione fbq(‘trackCustom’) per creare il nostro evento e diamogli un nome sensato.

Selezioniamo il nostro attivatore, salviamo e andiamo in modalità anteprima sul sito.

Creazione del tag permanenza sulla pagina

Se tutto è andato per il meglio, dovresti vedere l’evento appena creato attivarsi dopo 10 secondi.

Utenti più esperti potrebbero ottenere lo stesso risultato con due righe di Javascript, tuttavia, credo che utilizzare l’attivatore Timer sia sicuramente più conveniente.

Tracciare la visualizzazione di una ThankYou Page con Google Tag Manager e il Pixel di Facebook

Concludiamo questa carrellata di esempi con una delle azioni di conversione più comuni e importanti: la visualizzazione delle tue ThankYou Page.

Qualsiasi sia la tua attività, ti troverai di certo a dover tracciare gli utenti che arrivano ad una TY dopo aver compilato un form, acquistato un prodotto o essersi iscritti alla tua Newsletter. In tutti questi casi, dovrai inviare un evento al tuo Pixel di Facebook in modo da registrare la conversione.

Facebook ci mette a disposizione una serie di eventi standard che possono tornarci utili, nello specifico:
  • Contact
  • Lead
  • Purchase
  • Schedule
  • SubmitApplication
  • Subscribe

A seconda dell’evento che precede la ThankYou page, potrai scegliere quello che più si adatta alle tue esigenze. Per la lista completa, puoi comunque leggere la documentazione ufficiale di Facebook.

1. Creiamo l’attivatore

Anche in questo caso, possiamo utilizzare un attivatore standard offertoci dalla piattaforma.

  • Recati nella sezione “attivatori”
  • Fai clic su nuovo
  • Seleziona “Visualizzazione di Pagina” come tipo attivatore

Dopo aver dato un nome all’attivatore, possiamo procedere con la sua configurazione. Nello specifico, abbiamo due possibilità:

  • Utilizzare il Page Patch
  • Utilizzare l’URL
Cosa cambia?

Il page patch restituisce la directory o sottodirectory sulla quale l’utente si trova in quel momento. Page URL restituisce invece l’URL completo.

Immagina ad esempio che l’utente si trovi sulla Home Page del tuo blog che ha il seguente URL:

<https://www.nomesito.com/blog/>

In questo caso:

Questa distinzione è ancora più importante se utilizzi parametri UTM all’interno dei link. Page Patch escluderà infatti qualsiasi parametro UTM presente e restituirà semplicemente la directory o sottodirectory dov’è presente la tua pagina.

Sapere questa distinzione ti aiuterà a prendere la decisione giusta 🙂

2. Creiamo il Tag

La creazione del tag segue lo stesso identico principio degli esempi precedenti. Crea quindi un nuovo Tag di tipo HTML Personalizzato e compila la funzione fbq() in base alle tue necessità.

Creazione Tag per visualizzazione di una thank you page

Salva quindi il Tag e procedi al controllo in modalità Anteprima. Se tutto è andato per il meglio, dovresti vedere l’evento desiderato alla visualizzazione della ThankYou page.

Ci tengo comunque a precisare, che per alcuni di questi eventi, potresti anche tracciare l’invio del Form. Tuttavia, tracciare un evento dal FORM senza redirect verso una ThankYou page può a volte essere difficoltoso.

Se non sei un utente esperto, ti consiglio di effettuare un redirect verso una semplice pagina di ringraziamento e di gestire questi eventi da lì 🙂

Conclusioni

Nello scrivere quest’articolo, non ho certo avuto la pretesa di creare una guida completa al monitoraggio degli eventi con il Pixel e Tag Manager. Ci sarebbero infatti da scrivere altri 30 articoli con tutte le casistiche particolari che potresti trovarti ad affrontare.

Tuttavia, ho cercato di passare alcune informazioni di base estremamente utili. Come accennavo sopra, se comprendi esattamente il funzionamento del pixel e di Tag Manager, non dovresti avere problemi a tracciare eventi anche molto diversi rispetto a quelli che ti ho mostrato.

Spero comunque che tu abbia trovato informazioni utili e ti ringrazio per essere arrivato fin qui. È stato un viaggio abbastanza lungo, ma spero ne sia valsa la pena.

Scritto da:
Enrico Chiolo

Commenti

  1. Alessandro Greco ha detto:

    Questo non è un post. Questo è… è… è roba che potrebbe essere venduta a 47€ a un platea piuttosto vasta di persone.
    Invece è qui, gratis.
    E c’è ancora gente che si chiede come facciano Agostinis e co. ad avere successo.

    Creano valore.
    Punto.

    P.s. Grazie.

  2. Giovanni ha detto:

    Ciao io ho configurato un nuovo pixel sul mio e commerce con woocommerce su google tag manager pero mi arrivano mail da facebook business che mi dicono che il pixel non e installato e di farlo tramite woocommerce pero su gestione eventi il pallino compare verde del pixel e gli eventi li registra ho fatto pure il test.

    Poi ce pure un altra coda sul sito ho due pixel uno messo precedentemente e uno nuovo creato con google tag manager ce un modo per cancellare il vecchio dal sito?su fb so che non si puo cancellare ma dal codice del mio sito come posso fare?

    • Loop ha detto:

      Ciao Giovanni, il vecchio pixel va rimosso dal sito. Ti ricordi com’era installato? Se tramite plugin, ti basterà disattivare il plugin coinvolto, se invece lo hai installato nel codice del template, dovrai rimuoverlo dall’editor del tema.

      Da pixel helper, vedi entrambi i pixel? Quest’ultimi sono entrambi installati correttamente? Purtroppo mi mancano un pò di specifiche per una risposta completa, tuttavia, procederei intanto con la rimozione del vecchio pixel e vedrei come procede.

  3. Carmine ha detto:

    Ciao, complimenti per questo articolo, davvero illuminante.

    Quando parli dell’evento di permanenza sulla pagina indichi che si può avviare il timer a partire da azioni quali l’inizio di compilazione di un form, la lettura di un paragrafo o il clic su un pulsante; è molto interessante questa possibilità.

    Nell’effettivo come si implementa in Tag Manager un evento di questo tipo, che fa scattare il timer a partire da azioni specifiche.
    Potresti darmi qualche dritta in merito?

    Grazie a prescindere 🙂

    • Loop ha detto:

      Ciao Carmine,
      è esatto. Quando crei l’attivatore timer, in fondo alle impostazioni trovi anche “attiva quest’attivore quando”. Qui puoi indicargli una serie di condizioni che devono essere vere o false per il lancio dell’attivatore. Quindi ad esempio, puoi chiedere all’attivatore timer ti attivarsi solo quando la pagina di destinazione è una specifica pagina o la variabile clic URL contiene un determinato valore.

      In questo caso, vai a settare specifiche condizioni per lo start dell’attivatore timer.

      In alternativa puoi concatenare più tag. Se inserisci l’attivatore timer in un tag puoi configurare una sequenza di TAG e fornire ulteriori istruzioni a Tag Manager. Ne ho parlato nell’articolo. Attenzione però che in questo caso è il TAG che attende l’attivazione di un altro TAG prima di attivarsi e quest’azione non ha effetti sull’attivatore.

      L’argomento comunque è molto interessante, quindi sicuramente torneremo a parlarne sul blog 😉 Iscriviti alla Newsletter per non perderlo!

  4. Carmine Giannattasio ha detto:

    Grazie per la risposta

    Sono un iscritto alla newsletter della prima ora 🙂

    Sono d’accordo con te, sono argomenti molto interessanti

    Sarò tra i primi lettori quando affronterete di nuovo questi argomenti 😉

Lascia un commento

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

© Copyright 2021 © LOOP Agency Loop srl, Viale Mazzini 134A, 00195 Roma - CF e P.IVA 10041740969 - loopsrl@pecditta.com - RM-1551855
Privacy Policy - Cookie Policy

Powered by MarchettiDesign