[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.
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:
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.
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 🙂
Se hai già il PageView attivato non serve inserire tutto lo script, ma ti basterà inserire:
fbq('track', 'AddToCart'); 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.
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!
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
Greenpeace è un'associazione globale che con azioni dirette e concrete denuncia i problemi ambientali e…
Da quando hai configurato la Consent Mode v2 (CM v2) hai notato cali improvvisi o…
Premesso che non è possibile conoscere l'esatto funzionamento né di Chrome, né degli algoritmi di…
Da quale canale di marketing arriva il maggior numero di conversioni? Quale campagna di marketing…
View Comments
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
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!
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!
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 ;)
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?
Ciao Massimo, l'importante è che usi il nome dell'evento che appare sull'addtocart come hai fatto :)
Quindi direi che va bene così!
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.
Ciao Mauro, dovrei vedere esattamente il codice per dirti se effettivamente è la stessa :)
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.
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 :-)
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 :)
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 :)
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?
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 :)
Quando utilizzeresti questo metodo e quando un plugin che fa tutto in autonomia?
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 :)
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
Ciao Gianluca, puoi usare GTM Sonar è un'estensione di Chrome ;)
A presto!
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
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?
Ciao Matteo,
io purtroppo non trovo la possibilità di selezionare click classes nella creazione dell'attivatore.
Quale può essere il problema?
Grazie mille
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!