Guida Base: implementare la Transazione nel Pixel di Facebook con Google Tag Manager

[Aggiornata il 22 Febbraio 2022]

Bene. Se sei qui, significa che hai già implementato il Pixel di Monitoraggio di Facebook con Google Tag Manager.

In molti mi hanno detto: “sì, ok, il Pixel di Monitoraggio è facile da installare… ma tutto il resto? Transazioni, aggiunta al carrello, ecc.?“.

Ora te lo spiego.

Partiamo da una premessa: Facebook ha una gestione di tracking abbastanza semplice da implementare e ben spiegata in questa pagina ufficiale:
https://www.facebook.com/business/help/651294705016616/?ref=hc_fnav

Come vedi ogni azione ha un particolare codice (una funzione JavaScript) che inizia sempre con:

fbq('track', qualcosa, qualcosa, ...)

I parametri possono essere statici o dinamici, come ad esempio il Purchase. Vediamo come implementarlo con Google Tag Manager.

STEP 1 – Crea una variabile che contiene il valore della transazione

Partiamo dalla cosa forse più complessa (da fare), ma più facile da capire. Dobbiamo passare a Facebook il valore della transazione monetaria ovvero quello segnato in rosso:

fbq('track', 'Purchase', {value: '0.00', currency: 'EUR'});

In altre parole prenderemo il valore che sarà esposto nella pagina di riassunto transazione (thank-you page) e lo inseriremo in una variabile di Google Tag Manager.

Facciamo finta che nella nostra thank-you page la pagina di conferma abbia questo codice HTML (il caso di seguito è molto semplice):

<div>Totale Acquisto <span class="price">35.00</span>€</div>

Avendo una classe CSS “price” riusciamo ad intercettare perfettamente il valore della transazione. Andiamo quindi a creare la Variabile.

CREA LA VARIABILE

• Variabili > Nuova > Configurazione variabile.
• Tipo di variabile: Elemento DOM.
• Metodo di selezione: Selettore CSS.
• Selettore elemento: span.price.
• Nomina la Variabile: “Price – Total”.
• Salva.

Step 2 – Creiamo l’attivatore nella thank-you page

Solitamente preferisco creare l’attivatore prima, anche se GTM ti permette di crearlo anche direttamente nel Tag.

• Attivatori > Nuovo > Configurazione attivatore.
• Tipo di attivatore: Visualizzazione di pagina.
• Questo attivatore si attiva su: Alcune visualizzazioni di pagina.
• Aziona l’attivatore quando: inserisci l’URL della tua thank-you page. Nel mio caso ho inserito: Page Path contiene /order-received/.
• Chiama l’Attivatore ad esempio “Thank You Page – Facebook Pixel”.
• Salva.

*Page Path è una Variabile Integrata. Se non la trovi vuol dire che devi ancora attivarla: qua c’è la guida su Come attivare le Variabili Integrate in Google Tag Manager

Vuoi ricevere nuove guide, webinar formativi, sessioni di Q/A e news su aggiornamenti sul tracciamento e analisi dati per far crescere le prestazioni delle tue strategie di marketing o advertising, ottenendo un vantaggio competitivo concreto?

Allora iscriviti qui alla newsletter formativa gratuita sulla Marketing Analytics, già scelta da più di 7600 professionisti del web come te.

Step 3 – Creiamo il Tag HTML Personalizzato con il Pixel di Facebook

Creiamo ora il nuovo Tag HTML Personalizzato che si attiverà solo nella thank-you page con la funzione della transazione.

• Tag > Nuovo > Tag HTML Personalizzato.
• Incolliamo il Pixel di Monitoraggio Facebook aggiungendo prima della chiusura dello script la funzione con la variabile di GTM che contiene effettivamente il valore corretto:

fbq('track', 'Purchase', {value: '{{Price - Total}}', currency: 'EUR'});

• Attivazione: selezioniamo l’Attivatore “Thank You Page – Facebook Pixel” già creato.
• Nomina il Tag ad esempio “cHTML – Facebook Pixel – Transaction”.
• Salva.

Nota bene

Se hai già il PageView attivato non serve inserire tutto lo script, ma ti basterà inserire:

 

fbq('track', 'Purchase', {value: '{{Price - Total}}', currency: 'EUR'});

Step 4 – Verifichiamo che tutto funzioni con il debug

Attiviamo il Debug e Preview, andiamo nella thank-you page e verifichiamo che il Tag si attivo e che dentro ci sia effettivamente il valore.

Un ulteriore test? Usa l’estensione di Chrome Pixel Helper:

Se le nuove implementazioni funzionano correttamente, adesso puoi tornare su Google Tag Manager e cliccare sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.

Yuppieee!

Ora anche tu potrai tracciare comodamente le transazioni di Facebook con Google Tag Manager! Ovviamente allo stesso modo puoi tracciare il resto delle azioni del pixel di Facebook.

Ti è stata utile la guida? Lasciami un feedback (ed iscriviti alla newsletter, mi raccomando!).

A presto e buon Tag!