[Aggiornata il 19 Marzo 2018]

Dopo aver capito come si implementa il Pixel di Monitoraggio di Facebook con Google Tag Manager e come tracciare la transazione con il pixel di Facebook da Tag Manager, adesso vorresti implementare l’aggiunta al carrello.

“Ok, sarà simile alla transazione, no?“.

No, è ancora più semplice. Ora te lo spiego.

Partiamo dalla solita premessa (lo ripeto, che male non fa): 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 l’addToCart con Google Tag Manager.

STEP 1 – Crea un attivatore per l’aggiunta al carrello

Dunque, la prima cosa che consiglio di fare è creare un evento che “catturi” l’azione di aggiunta al carrello. Detta in modo banale individuiamo il click al pulsante “Aggiungi al carrello” o “Add to Cart”.

Come possiamo fare? La risposta è semplice, ovvero individuando un CSS o un ID che riesca ad individuare il click a quell’elemento. Se magari avete già incorporato un plugin per l’ecommerce avanzato di Google Analytics allora forse avrete anche un evento personalizzato.

Ok, vi faccio un esempio. Qui sotto è riportato il codice HTML di un pulsante di aggiunta al carrello. Notate niente di particolare?

<a rel="nofollow" href="/esempio/?add-to-cart=37" data-quantity="1" data-product_id="37" data-product_sku="" 
class="button product_type_simple add_to_cart_button ajax_add_to_cart">
Acquista
</a>

Sì, esattamente! La classe CSS add_to_cart_button. La useremo per far attivare l’Attivatore 🙂

Ecco come:

  • Attivatore > Nuovo > Configurazione attivatore.
  • Tipo Attivatore: Click solo link.
  • Flagga Attendi Tag e inserisci 2000 millisecondi.
  • Flagga anche Verifica Convalida.
  • Abilita questo attivatore quando: PagePath corrisponde espressione regolare .*
  • Questo attivatore si attiva su: Alcuni link sui click.
  • Aziona l’attivatore quando: Click Classes contiene add_to_cart_button.
  • Adesso rinomina l’Attivatore “AddToCart”.

 

attivatore tracciare aggiungi carrello pixel facebook google tag manager

Page Path e Click Classes sono Variabili Integrate.
Se non le trovi vuol dire che devi ancora attivarle: qua c’è la guida su Come attivare le Variabili Integrate in Google Tag Manager.

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

Non ci resta che creare il custom tag HTML con il Pixel di Facebook

Incolliamo il pixel di facebook di monitoraggio e aggiungiamo prima della chiusura dello script la chiamata all’AddToCart.

fbq('track', 'AddToCart');

tag tracciare aggiungi carrello pixel facebook google tag manager

Una volta creato il Tag non ci resta che associarlo all’Attivatore. Quale attivatore? Naturalmente a quello che abbiamo creato qualche istante fa 🙂

 

Step 3 – Verifichiamo che tutto funzioni con il debug

Attiviamo il Debug e Preview, andiamo in una pagina dove è presente il link di aggiungi al carrello e clicchiamo. Verifichiamo quindi che il Tag si attivi. Alla fine, se tutto funziona correttamente, pubblica le modifiche cliccando il pulsante blu “Invia”.

pixel facebook addtocart step4

Come sempre potete usare anche l’estensione di Chrome Pixel Helper per verificare effettivamente il valore.

pixel helper di facebook per carrello con google tag manager

 

Yuppieee!

Ora non potrai più dire di non riuscire a tracciare il carrello tramite il pixel di Facebook con Google Tag Manager!

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

A presto e buon Tag!

Condividi anche tu Google Tag Manager!
  • Reply

    Alex

    08 11 2018

    Ciao Matteo vorrei farti una domanda..
    Quando all’evento standard voglio aggiungere delle informazioni avanzate per far funzionare, ad esempio, la retargetig dinamica…
    Creo ad esempio questo evento:

    fbq(‘track’, ‘AddToCart’, {
    content_name: Variabile-Nome-Prodotto,
    content_category: Categoria (sole-optical),
    content_ids: Sku,
    content_type: ‘product’,
    value: Valore-Prodotto,
    currency: ‘EUR’
    });

    Il valore delle diverse variabili le ho “gratis” inserendo il nome della variabile corrispondente, oppure devo intervenire a livello di datalayert?

    • Matteo Zambon

      12 11 2018

      Ciao Alex, se hai i dati già in pancia nel datalayer devi creare le variabili di livello dati per prelevare i valori da mandare a Facebook. Devi comunque ragionare con le variabili 🙂

  • Reply

    Alex

    25 09 2018

    Quando utilizzeresti questo metodo e quando un plugin che fa tutto in autonomia?

    • Matteo Zambon

      27 09 2018

      Ciao Alex, facendo sempre gestione con più piattaforme (GA, FB, Hotjar, Email marketing ecc) per me sarebbe sciocco usare più plugin o più sistemi a monoblocco. Traccio tutto con GTM e da GTM spalmo sui vari strumenti.

      Quindi io uso sempre questo metodo 🙂

  • Reply

    Gianluca

    24 07 2018

    Ciao, testando il clic sul bottone nel mio test si apre un altra pagina e non riesco a vedere bene se si attiva il pixel in anteprima, C’è un modo per non caricare la pagina dopo il clic? (nel mio caso il clic è su un bottone e non un link)
    Grazie

    • Matteo Zambon

      30 07 2018

      Ciao Gianluca, puoi usare GTM Sonar è un’estensione di Chrome 😉

      A presto!

  • Reply

    Stefano Petrone

    17 07 2018

    Grazie per le tue guide awesome e la tua competenza messa a disposizione della plebe, Facebook è in continua evoluzione sarebbe meglio aggiungere agli esempi i campi obbligatori indicati https://developers.facebook.com/docs/facebook-pixel/api-reference?

    Ad es per Purchase sono diventati obbligatori
    “value, currency. For Dynamic Product Ads; content_ids or contents, and content_type are also required.”
    idem per AddToCart ha aggiunto content_type
    “content_ids or contents, and content_type are required”

    se si segue pedissequamente il tuo esempio (oppure https://www.tagmanageritalia.it/guida-base-implementare-la-transazione-nel-pixel-facebook-google-tag-manager/) FB restituirà errori

    • Matteo Zambon

      18 07 2018

      Ciao Stefano, grazie del tuo commento. In realtà devo contraddirti. Se leggi bene la guida dice questo:

      – Per il Purchase i parametri obbligatori sono Value e Currency. Se usi però i prodotti dinamici allora devi aggiungere anche content_ids o contents, e content_type.
      – Per AddToCart ti dice “None”, poi sempre se usi i prodotti dinamici allora diventano obbligatori.

      Ti basta simulare anche con la console per vederlo.
      verifica pixel fb

      Ti torna?

  • Reply

    Daniele Pignone Pignasmile

    03 11 2017

    Ciao Matteo,
    io purtroppo non trovo la possibilità di selezionare click classes nella creazione dell’attivatore.
    Quale può essere il problema?

    Grazie mille

    • Matteo Zambon

      06 11 2017

      Ciao Daniele,

      per vedere la Variabile Click classes ti basta configurarla 🙂 Vai nella sezione Variabili, clicca su Configura e spunta la sezione Click.

      A presto!

  • Reply

    Martina

    13 10 2017

    Come Fabio suggerisce anche io ho installato unicamente il tag fbq(‘track’, ‘AddToCart’); precisando nelle impostazioni avanzate e, in particolare nella sequenza tag, che prima di questo tag deve attivarsi quello del pageview.
    I due procedimenti hanno lo stesso risultato finale o il metodo che spieghi in questa guida è per qualche motivo migliore?

    • Matteo Zambon

      13 10 2017

      Ciao Martina, in realtà se hai la pageview ti conviene non mettere la libreria di script. All’interno del Club Tag Manager Italia spiego esattamente con dei video qual è la configurazione perfetta con il pixel di Facebook.
      Rispondendo alla tua domanda, hai fatto bene solo con la chiamata dell’evento AddToCart.
      Se non avessi il pageview allora devi fare come ho scritto nella guida. È solo questione di sincronia tra librerie e chiamate eventi 🙂

      A presto!

    • Martina

      13 10 2017

      Grazie mille Matteo, sei stato velocissimo e precisissimo! Complimenti 🙂
      a presto!

    • Matteo Zambon

      13 10 2017

      Di nulla, figurati Martina 😉

  • Reply

    Fabio Faccin

    26 01 2017

    Ciao Matteo, grazie per l’articolo.

    Tips: se si ha già installato il Pixel “di base” in tutte le pagine, è sufficiente installare nel Tag attivato al momento del click solamente il codice:

    fbq(‘track’, ‘AddToCart’);

    Ciao!

    • Matteo Zambon

      26 01 2017

      Ciao Fabio! Infatti se noti nello screenshot non c’è il pageview 🙂

      Grazie comunque della precisazione!

    • Fabio Faccin

      26 01 2017

      Scusami, intendevo che basta inserire solamente il codice:

      fbq(‘track’, ”);

      senza tutto il resto.

    • Matteo Zambon

      26 01 2017

      Se esiste un altro Tag che gestisce sì. Devi però essere sicuro che venga attivato dopo 🙂

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

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.