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… ma tutto il resto? Transazioni, aggiunta al carello ecc?“.

Ora te lo spiego.

Partiamo prima 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

pixel-facebook-azioni-standard

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 implementare questo 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. A Facebook dobbiamo passare 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 faremo lo inseriremo in una varibile 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 su

Variabili ►Nuova
Nome ► Price – Total
Scegliamo il tipo ► Elemento DOM
Metodo di selezione ► Selettore CSS
Selettore elemento ► span.price

pixel transazione facebook step1

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.

Andiamo su

Attivatori ► Nuovo
Scegli evento ►Visualizzzazione di pagina
Tipo attivatore ► Visualizzazione di paginaAttiva su ►Page URL uguale a “inserisci l’url della tua thank-you page”

Step 2 - Creiamo l'attivatore nella thank-you page

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

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

Incolliamo il pixel di facebook di monitoraggio e aggiungiamo 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'});

pixel transazione facebook step3

 

Step 4 – Verifichiamo che tutto funzioni con il debug

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

pixel transazione facebook step4

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

pixel helper estensione

 

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!

  • Reply

    Fausto

    31 03 2017

    Scesa, cancella pure il mio commento.
    Ho risolto.
    Nominavo male la variabile
    Grazie

    • Matteo Zambon

      31 03 2017

      Ecco appunto 🙂 Lascio il commento perché potrebbe essere utile ad altri.

  • Reply

    Fausto

    31 03 2017

    Ciao Matteo, ottimo post.
    In pratica, non mi “accetta” la variabile Pice-Amount quando vado anche a fare anteprima.
    C’è da premettere però che nella mia configurazione di default (prima di aggiungere il price amount) ho già un Tag del Facebook Pixel con la funzione Page view.
    Ragion per cui ho leggermente “modificato” tag ed attivatore riferentisi alla funzione Purchase di Facebook.

    In pratica come Tag ho solo questo codice:
    fbq(‘track’, ‘Purchase’, {value: ‘{{price – total}}’, currency:’EUR’});

    Come Attivatore (si chiama ‘Facebook Pixel – Woocommerce Price’) ho:
    Visualizzazione di pagina solo su alcune pagine (Page URL contiene ‘order-received’).

    Come Variabile (si chiama “price – total”):
    Elemento DOM > Selettore CSS > Selettroe elemento ‘span.woocommerce-Price-amount’.

    Quando faccio l’anteprima o pubblico, ecco l’errore che mi restituisce:
    Tipo > Nome variabile sconosciuto
    Posizione > Facebook Pixel – Woocommerce Price
    Descrizione > La variabile sconosciuta “price – total” è stata rilevata in un tag. Modifica il tag e rimuovi il riferimento alla variabile sconosciuta.

    • Matteo Zambon

      31 03 2017

      Ciao Fausto, l’errore è ben esplicitato. Stai sbagliando il nome della variabile. Forse un errore di typo. 🙂

  • Reply

    Giorgia Palazzo

    22 02 2017

    Ciao Matteo,
    grazie mille per i tuoi consigli. Ma per implementare le lead o le altre azioni di conversioni su Facebook? Funziona nello stesso modo del Purchase?

    Grazie Ancora
    Giorgia

  • Reply

    alemarengo

    14 12 2016

    Perdona il ritardo Matteo! Da agosto ad oggi… il ViewContent corrisponde alla visualizzazione di pagine chiave. Io ho impostato un tag di modo che venga tracciato un ViewContent per le pagine prodotto. Banalmente, in Woocommerce, tutte quelle che contengono nella URL Path /shop/, che mi va bene anche per uno shop bilingue. 😉

  • Reply

    Manuel

    07 11 2016

    Ciao Matteo,
    Ti ringrazio per il fantastico lavoro che hai fatto e stai facendo.

    Ho una domanda da porto riguardante il pixel di Facebook, nel caso specifico il ViewContent.

    Ho implementato correttamente in GTM sia il AddToCart che il Purchase Tracking Event di Facebook, ma sono un pò in difficoltà con il ViewContent.

    Avendo installato il plugin che hai suggerito all’interno del mio sito in WordPress, mentre per gli altri due eventi già installati avevo un DataLayer al quale fare riferimento, per il ViewContent no.

    Hai un suggerimento?

    Grazie mille,

    Manuel

    • Matteo Zambon

      10 11 2016

      Ciao Manuel, ti basta implementarlo manualmente con un Tag HTML Custom con un attivatore che fa funzionare il Tag con il parametro ViewContent.
      Fammi sapere

      Matteo

  • Reply

    Elena

    24 10 2016

    Ciao Matteo,

    e complimenti per il tuo sito, ce n’è veramente bisogno!
    Implementando il codice che hai indicato allo STEP 3 GTM mi segnala un errore
    Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option..
    Non so se può influire ma io ho un tag per il pixel facebook generico che si attiva su tutte le pagine e stavo cercando di creare un altro tag solo per le azioni di conversione.

    Grazie mille

    Elena

    • Matteo Zambon

      24 10 2016

      Ciao Elena, grazie per i complimenti, fanno sempre piacere!
      È sicuramente un errore legato alla e virgola all’interno dell’istruzione che usi per la conversione:

      fbq(‘track’, ‘Purchase’, {value: ‘{{Price – Total}}’, currency: ‘EUR’});

      Verifica che siano ci siano gli apici singoli e le virgole. Sicuramente è lì il problema!
      A presto!

    • Elena

      27 10 2016

      Ciao Matteo,
      grazie per la risposta!

      Ti metto qui il codice del tag:

      fbq(‘track’, ‘Purchase’, {value: ‘{{price – total}}’, {currency:’EUR’});

      Vedi qualcosa di strano ?

      Grazie ancora

    • Elena

      27 10 2016

      Ecco il codice per intero, a parte > e
      fbq(‘track’, ‘Purchase’, {value: ‘{{price – total}}’, {currency:’EUR’});

      </noscript

    • Matteo Zambon

      27 10 2016

      Il problema è che metti una parentesi graffa prima di currency. Ecco la sintassi corretta

      fbq(‘track’, ‘Purchase’, {value: ‘{{price – total}}’, currency:’EUR’});

    • Elena

      27 10 2016

      Grazie Matteo, sono riuscita a correggere !
      Passiamo al secondo problema :
      Cambia qualcosa se nel mio caso il selettore Price oltre al valore variabile di conversione contiene anche il valore fisso€ ? devo modificare lo script del tag ?

      Grazie ancora

    • Matteo Zambon

      27 10 2016

      Si devi cambiarlo, il valore deve essere numerico, senza altri caratteri. Se noti la valuta la specifichi con l’altro parametro “currency”.

      A presto!

    • Elena

      27 10 2016

      Grazie ancora. Si può risolvere questa questione direttamente agendo su GTM, senza fare modifiche sul selettore (che non posso fare) ?

    • Matteo Zambon

      27 10 2016

      Potresti crearti delle variabili che eliminano il carattere della valuta con regular expression o variabili javascript (non conosco il dettaglio della variabile).

  • Reply

    Alessandro

    23 08 2016

    E’ la prima voce tra le Azioni del Pixel di FB, no? http://ge.tt/1o3gted2

    • Matteo Zambon

      23 08 2016

      Perdonami, pensavo intendessi su GTM 🙂
      Il viewcontent lo vedo esattamente come il ga(‘send’ ‘pageview’) di GA. Quindi non fai altro che dire a Facebook che l’utente ha visto la pagina (che poi sia totalmente caricata in Load non importa). É un modo per distiguere che l’utente ha visto un particolare contenuto e vuoi segmentare questi utenti su FB.
      A presto!

  • Reply

    Alessandro

    23 08 2016

    Ottima spiegazione Matteo! Grazie!
    Una domanda (sempre ignorante!): che differenza c’è tra PageView e ViewContent? Mi verrebbe da dire che ViewContent abbia senso se accompagnato da un timer o da uno script che interpreta lo scroll o l’evidenziazione di testo. No?

    • Matteo Zambon

      23 08 2016

      Ciao Alessandro, perdonami ma in che contensto lo vedi il ViewContent? Pageview (come spiegato bene nel corso 😛 ) è il primo evento che viene scatenato da GTM ovvero non appena il codice JS viene eseguito e corrisponde alla fase precedente del DOM e del Load. ViewContent mi vien da pensare (dal nome) che sia un’associazione alla visualizzazione del contenuto.

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

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