Guida Base: Implementare Aggiungi al Carrello nel Pixel di Facebook con Google Tag Manager

[Aggiornata il 22 Febbraio 2019]

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/402791146561655?helpref=page_content

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.

Scopri come installare e gestire alla perfezione il Pixel di Facebook, evitando i frequenti e costosi errori in cui (quasi) TUTTI cadono... anche se parti da zero e anche se NON sei un tecnico

OK, voglio saperne di più sul corso Facebook Perfect Pixel!

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”.

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');

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

Nota bene

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

fbq('track', 'AddToCart');

Scopri come installare e gestire alla perfezione il Pixel di Facebook, evitando i frequenti e costosi errori in cui (quasi) TUTTI cadono... anche se parti da zero e anche se NON sei un tecnico

OK, voglio saperne di più sul corso Facebook Perfect Pixel!

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”.

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

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!

Altre Guide che potrebbero interessarti

Matteo Zambon

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

Previous « Guida Base: Come creare Virtual Page con Google Tag Manager

View Comments

Lisa says:

5 Aprile 2022 at 12:28

Ciao Matteo, grazie per questi articoli super utili e dettagliati!
Per tracciare solamente la pagina carrello, come devo impostare il tag di GTM?

Perchè il bottone mi apre apre direttamente la pagina carrello, non riesco a tracciare il clic sul tasto.

grazie mille
- Matteo Zambon says:
  
  11 Aprile 2022 at 17:06
  
  Ciao Lisa, grazie :)
  
  Ti consiglio di usare il template ufficiale come questo: https://www.tagmanageritalia.it/guida-base-come-tracciare-levento-lead-con-il-tag-ufficiale-del-pixel-di-facebook-in-google-tag-manager/ e scegliere ovviamente il tipo di azione addToCart.
  
  Se hai un ecommerce fatto bene con qualche CMS (prestashop, magento, wocommerce etc) dovresti avere già un push nel dataLayer con tutti i dati.
  Ti consiglio di valutare l'acquisto di Perfect Pixel (https://club.tagmanageritalia.it/corso-facebook-pixel-perfect/) o l'iscrizione la Club Tag Manager Italia (https://club.tagmanageritalia.it/lista-attesa-club-tmi/) troverai davvero tantissimi video e implementazioni già fatte :)
  
  La soluzione più easy è avere il push add_to_cart già nel dataLayer, altrimenti ti toccherà fare un po' di "scraping" dei dati.
  
  Fammi sapere!
Stefano says:

7 Luglio 2021 at 10:14

Ciao Matteo, avrei una domanda.
Posso gestire l'evento viewContent attraverso le push notifications?
Avevo provato con l'evento domReady su gtag, ma vorrei farlo anche in questo caso usando un customEvent come trigger e prendendo i dati entranti dal push.

https://developers.google.com/tag-manager/ecommerce-ga4

Altra cosa, non capisco se le variabili che passo devon essere camelCase o se va bene l'underscore, e se devo usare l'oggetto items dopo quello ecommerce (parallelamente a come facciamo per addToCart)

Tra un evento e l'altro che faccio partire, la riga $gtm.push({ ecommerce: null }) va sempre aggiunta?

const viewContent = (item) => ({
event: 'ViewContent',
ecommerce: {
content_type: 'product',
content_ids: ['123456'],
content_name: 'TEST PRODOTTO A',
content_category: '166', // 'Apparel & Accessories',
value: '120.00',
currency: 'USD',
},
})

Grazie per l'aiuto!
- Matteo Zambon says:
  
  21 Luglio 2021 at 16:04
  
  Ciao, personalmente uso un approccio diverso, non mi piace l'idea di svuotare il dataLayer. Uso infatti la mia variabile di GA4 (https://tagmanager.google.com/gallery/#/owners/matteo-zambon-gtm/templates/EEC-dataLayer-Builder-for-GA4) per mantenere i valori.
  Se vuoi fare il clean prima, allora devi fare il {{ecommerce:null}} prima di ogni push dell'oggetto ecommerce.
  Se hai già l'oggetto per GA4 puoi usare il template di Facebook e usare tranquillamente la mia variabile: https://github.com/matteo-zambon-gtm/GA4-Items-to-Facebook-Object-Converter di conversione.
  Ti consiglio di guardarti questo video: https://youtu.be/sKuCpgIv7b8
  
  Ho comunque fatto diversi corsi sull'argomento, se ti interessa saperne di più mandami una email su help@tagmanageritalia.it ;)
Massimo says:

26 Settembre 2019 at 16:15

Ciao Matteo, configurato tutto alla lettera ma l'add-to-cart non va.
Ho cambiato l'attivatore, scegliendo un evento personalizzato chiamandolo "gtm4wp.addProductToCart" che è il nome del datalayer che si attiva al click sul bottone di acquisto e funziona.
Secondo te cambia qualcosa?
- Matteo Zambon says:
  
  27 Settembre 2019 at 13:16
  
  Ciao Massimo, l'importante è che usi il nome dell'evento che appare sull'addtocart come hai fatto :)
  Quindi direi che va bene così!
mauro says:

1 Maggio 2019 at 21:09

Ciao Matteo, ho seguito la tua guida in maniera scrupolosa, anche la classe css è la stessa, ma nulla, non mi traccia in addToCart, hai qualche suggerimento?
E' un wordpress con Woocommerce, nulla di particolare, ma non si attiva.
- Matteo Zambon says:
  
  3 Maggio 2019 at 10:17
  
  Ciao Mauro, dovrei vedere esattamente il codice per dirti se effettivamente è la stessa :)
Claudio says:

27 Gennaio 2019 at 19:27

Ciao Matteo, mi inserisco in questa disussione per chiederti se c'è un modo per inserire il Plug-in di incorporazione di Pagine tramite Tag Manager, almeno la prima parte del codice, quella che andrebbe inserita nella header.
Grazie anticipatamente.
- Claudio says:
  
  29 Gennaio 2019 at 14:22
  
  Ciao Matteo, grazie per la risposta. In realtà avevo premesso che entravo a gamba tesa in questa discussione perché la mia domanda non riguarda il pixel Facebook. Quello a cui mi riferivo è questo: https://developers.facebook.com/docs/plugins/page-plugin# praticamente l'inserimento del box Facebook su un sito (a me servirebbe per gli eventi Facebook. In quella pagina vengono forniti due pezzi di codice: il primo da inserire nell'header del sito in tutte le pagine e il secondo nella pagina specifica dove si vuol far apparire il box. Mi era venuta la geniale idea (più che altro per capire fino a dove ci si può spingere con GTM) di inserire la prima parte del codice in un tag personalizzato con attivatore su tutte le pagine e poi il secondo codice sulla pagina dove far apparire il box. Dirai tu a che serve usare GTM se puoi inserire il codice direttamente nella header con WordPress? Forse è una complicazione inutile, ma avendo già inserito il codice univoco GTM mi chiedevo se si potesse fare.
  
  Scusami nuovamente, se vuoi espellermi per essere andato off topic hai tutte le ragioni :-)
  - Matteo Zambon says:
    
    29 Gennaio 2019 at 14:56
    
    Ciao Claudio :)
    Quindi vuoi inserire semplicemente la pagina facebook come widget con GTM? Nel Club (le iscrizioni sono chiuse ma c'è la lista di attesa se ti interessa) ho fatto un video e un template e inserito nel Progetto Andromeda.
    La risposta ovviamente è che è fattibile :)
- Matteo Zambon says:
  
  29 Gennaio 2019 at 10:25
  
  Ciao Claudio non ho capito la domanda. Intendi che ci sia già la gestione dei dati del pixel dell'aggiunta al carrello tramite qualche plugin? Domanda: stai già gestendo il tracciamento dell'ecommerce avanzato di Google Analytics? Se la risposta è sì, allora potresti usare assolutamente i valori che usi per quel tracking e passarli al pixel di FB.
  Plugin pensati per FB ce ne sono come PixelYourSite o Pixel Caffeine ma questi non usano GTM, ma codice diretto.
  
  Fammi sapere :)
Alex says:

8 Novembre 2018 at 14:22

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 says:
  
  12 Novembre 2018 at 19:53
  
  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 :)
Alex says:

25 Settembre 2018 at 16:41

Quando utilizzeresti questo metodo e quando un plugin che fa tutto in autonomia?
- Matteo Zambon says:
  
  27 Settembre 2018 at 10:24
  
  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 :)
Gianluca says:

24 Luglio 2018 at 10:41

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 says:
  
  30 Luglio 2018 at 12:13
  
  Ciao Gianluca, puoi usare GTM Sonar è un'estensione di Chrome ;)
  
  A presto!
Stefano Petrone says:

17 Luglio 2018 at 13:07

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 says:
  
  18 Luglio 2018 at 12:53
  
  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.
  
  Ti torna?
Daniele Pignone Pignasmile says:

3 Novembre 2017 at 18:05

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 says:
  
  6 Novembre 2017 at 11:19
  
  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!