[Aggiornata il 22 Febbraio 2019]
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.
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.
Solitamente preferisco creare l’attivatore prima, anche se GTM ti permette di crearlo anche direttamente nel Tag.
*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
Creiamo ora il nuovo Tag HTML Personalizzato che si attiverà solo nella thank-you page con la funzione della transazione.
fbq('track', 'Purchase', {value: '{{Price - Total}}', currency: 'EUR'});
Se hai già il PageView attivato non serve inserire tutto lo script, ma ti basterà inserire:
fbq('track', 'Purchase', {value: '{{Price - Total}}', currency: 'EUR'});
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.
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!
Grazie alle Consent Management Platform puoi gestire in modo semplice ed efficace i consensi al…
Hai mai desiderato un luogo dove i commenti sulle ultime novità, i metodi delle migliori…
Se la GDPR ti sta a cuore e se ti occupi di advertising, allora questo…
[Aggiornata il 6 Febbraio 2024] Quante volte avrai sentito la classica frase “Siamo a Luglio,…
NetFerry è uno dei più grandi motori di ricerca di traghetti e aliscafi italiani, in…
Ora che anche il caro Google Optimize ci ha lasciati, quella che troverai in questa…
View Comments
Ciao Matteo,
ho un problema con un ecommerce custom. Effettuato l'ordine il datalayer mi restituisce i prezzi dei singoli prodotti a carrello e non il prezzo dell'intero carrello, come devo fare a sommare le variabili dei singoli prodotti a carrello?
Grazie
Ciao Chiara,
Nel push dell'acquisto che deve essere eseguito nel dataLayer oltre ai dati sui prodotti deve esserci anche un parametro per nella struttura di Universal Analytics si chiama "revenue" mentre in GA4 si chiama "value".
Questo parametro deve contenere il totale dell'ordine e puoi andarlo a prendere con una variabile di tipo dataLayer.
Se non ce l'hai allora devi chiedere al tuo sviluppatore di modificare il push seguendo la guida ufficiale di Google:
Questa la guida per UA:
https://developers.google.com/analytics/devguides/collection/ua/gtm/enhanced-ecommerce#purchases
Questa la guida per GA4:
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#purchase
Se hai ancora dubbi, ti chiederei di postare il tuo problema sul nostro gruppo Facebook "Fatti di Tag Manager" in modo da poterti assistere in modo più approfondito:
https://www.facebook.com/groups/TagManagerItalia
Ciao Matteo. Il selettore css del mio sito è così (scusa il post multiplo ma non mi prendeva il testo):
div class="post_payment_order_total" style="width: 100%" span class="post_payment_order_total_title" Totale /span 186,81 € /div
Posso seguire alla lettera il tuo tutorial, utilizzando span.post_payment_order_total come selettore elemento?
Il fatto che il mio sito restituisca l’importo dell’ordine compreso della valuta, potrebbe creare problemi?
Ciao, allora il selettore è span sì non dovresti usare la valuta. Potresti usare una variabile custom javascript per farlo.
Riesci a darmi il link e qualche screenshot? Puoi anche mandarmeli nel gruppo segreto di Facebook: https://www.facebook.com/groups/TagManagerItalia
Buon Tag!
ho implementato il parametro Purchase come da vostra guida, il debug mi ritorna:
fbq("track","Purchase",{value:"null",currency:"EUR"});
è giusto che il value sia null?
o deve tornare il valore dell'acquisto?
Ciao guido, la variabile con il valore è basata sull'esempio dell'HTML che ho proposto. Dovresti verificare bene come è nel tuo sito e se hai già il valore nel dataLayer ti conviene gestirlo con delle variabili di tipo livello dati (se hai già l'enhanced ecommerce sei a cavallo!).
Fammi sapere!
Ciao,
ho seguito letteralmente le istruzioni, quando invio il tag ricevoo questo messaggio d'errore:
Variabile sconosciuta "Price - Total" trovata in un tag. Modifica il tag e rimuovi il riferimento alla variabile sconosciuta
Ciao Pier Paolo, se vedi nello step 1 ho creato la variabile. Occhio alle maiuscole e minuscole. Ovviamente quello che fa la variabile è un esempio di quell'HTML. Se usi CMS come Woocommerce, prestashop o simili ti consiglio di usare il valore che avrai già nel dataLayer (perché sicuramente lo stai già tracciando per Google Analytics).
Fammi sapere :)
PS: Ti consiglio il corso Facebook Perfect Pixel https://club.tagmanageritalia.it/corso-facebook-pixel-perfect/ ;)
Ciao Matteo, grazie mille!
Ho un blog e ho già implementato il PageView del Pixel che mi traccia tutte le pagine (articoli, home, chi siamo, contatti, ecc) e mi va benissimo.
Ora volevo impostare il ViewContent, ma solo per gli articoli del blog (WordPress), in modo da avere questa distinzione tra le visite totali al sito e quelle agli articoli.
Purtroppo gli URL hanno la struttura Day and name di WordPress, quindi nomesito.it/2021/01/27/nome-articolo, e non ho modo di far sì che si attivi ad una URL specifica solo per gli articoli
Come posso fare? C'è un altro modo?
Grazie mille, a presto!
Ciao Matteo, grazie!
Sì, direi che la variabile pagePostType2 è sufficiente a identificare i miei articoli di WordPress, dato che si tratta di un blog di news con molte categorie (e ogni tanto ne vengono anche create di nuove). Non ho quindi necessità di identificare le categorie associate ai post, ma solo le visite totali a tutti gli articoli con il Pixel.
Comunque creando un Gruppo Attivatore con pagePostType2 e Iubenda Accettato funziona tutto alla grande, grazie mille!
A presto,
Riccardo
Di nulla :D
Ciao Matteo, scusami aggiungo una cosa all'ultimo commento... ho seguito anche la tua guida per l'implementazione di Iubenda in Tag Manager e adesso il ViewContent non funziona più correttamente.
Mi spiego: avendo inserito nel tag del ViewContent anche l'attivatore Iubenda Accettato (oltre a Visualizzazione di pagina solo quando pagePostType2 contiene single-post), adesso il ViewContent mi si attiva ogniqualvolta premo su Accetta nel banner cookie di Iubenda (anche quando non sono su una pagina articolo).
Forse il modo in cui ho implementato il ViewContent e che ti ho descritto non è ottimale... come posso ovviare?
Grazie!
Perché non puoi usare lo stesso attivatore "generale" di accetta iubenda. Devi creare una variante di quello dove il pagePostType2 è uguale a single-post e associarlo al tag.
Io se fossi in te creerei un trigger group dove metterei sia pagePostType2 + accettato iubenda come attivatore (oltre agli altri che hai già inserito: pageview con pagePostType e in eccezione che non ha accettato).
Fammi sapere
Ciao Matteo, intanto grazie mille!
Ho creato una Variabile di livello dati con valore pagePostType2,
successivamente ho creato un attivatore Visualizzazione di pagina che si attiva solo quando pagePostType2 contiene single-post (valore che corrisponde agli articoli di WordPress).
Poi da lì ho creato un tag HTML con l'evento standard di ViewContent del Pixel.
Attraverso il debug mi sembra funzionare bene.
È tutto corretto?
Grazie ancora!
Ciao Riccardo, se la condizione e l'utilizzo di quella variabile è sufficiente a identificare i tuoi contenuti, allora sì :)
Altrimenti verifica pageCategory che ti identifica le categorie associate al post.
Fammi sapere ;)
A presto!
Ciao Riccardo, sì. Nel plugin di Duracell Tomi abiliti nella "Basic data" i post type e la category e usi quei valori come distinzione (attraverso una variabile di livello dati). La chiave tua probabilmente è pageCategory.
Fammi sapere!
Ciao Matteo, due domande se mi permetti:
1) dagli ultimi test che ho fatto, il purchase riesco ad attivarlo se configuro il tutto con GTM. Se inserico lo script del purchase direttamente sulla mi pagina (con un blocco html) non scatta. Tenendo il pageview configurato con GTM.
Invece, se faccio tutto con GTM funziona. Quindi, posso inserire il purchase direttamente sulla mia pagina lasciando il pageview su GTM?
"Allora perchè non lasci GTM e non fai tutto sul sito?" perchè grazie alle tue guide ho implementato lo scroll pagina e il tempo di permanenza.
2) Mi servirebbe di inserire, insieme al page view, anche il View content. Solamente che quest'ultimo (da come mi segnala il pixel helper) va in conflitto con i tag dello scroll e del time, "The Facebook pixel activated 6 times on this web page, which can cause errors in your event tracking".
Posso risolvere in qualche modo? GRazie infinite.....
Scusa Matteo, per sbaglio ho scritto nel commento sotto.
:D No problem
Ciao Christofer
1) Sì, puoi avere una gestione di tracking ibrida. Diventerà un macello se dovrai aggiungere/modificare o se altri ci metteranno il naso.
2) Quello è solo un alert dove ti dice che lo stesso nome evento viene attivato più volte nella pagina (a lui ne servirebbe solo uno). Se hai più View Content nella stessa pagina non andrebbe bene. Se è lo scroll allora ti consiglio di diversificarlo aggiungendo (ad esempio) il valore percentuale di scroll nel nome evento.
Fammi sapere!
Sembra che funzioni tutto ma non vedo l'evento 'purchase' nel Facebook Pixel helper.
Lato GTM il tag si attiva e non c'è nessun errore.
Come faccio a capire se effettivamente Facebook tracci questa azione?
Grazie
Ciao Matteo, grazie per le dritte
1) ci sono riuscito, perfetto!
2) Qui nada. ma va bene ugualmente, al momento posso farne a meno. Grazie mille!
Un'altra cosa: ho notato che facendo alcune modifiche su GTM (dipende di che tipo), dopo pochissimi secondi vedo queste attuali modifiche sul mio sito, ma facendo altre modifiche (ad esempio, cambio pixel facebook) ci mette un po', è normale o sono io? Succede la stessa cosa anche mettendo in pausa alcuni tag.
Grazie per tutto!
Le modifiche che pubblichi o che metti in debug sono immediate. Forse sono gli strumenti di trakcing che ci mettono un po' a mostrarti il dato ricevuto.
Ti consiglio di usare sempre sistemi di debug (pixel helper, tag assistant) per fare una verifica. Non fidarti solo del debug di GTM.
A presto!
Ciao Matteo, se non vedi l'evento purchase sul pixel helper e nemmeno nel debug di Facebook (nella sezione pixel), allora c'è qualcosa che non va.
Quindi da quello che mi dici non sta funzioando a dovere.
Fammi sapere!
Ho segutio le tue sempre importantissime istruzioni ma alla fine in preview mi da questo errore;
cHTML – Facebook Pixel – Transaction
Unknown variable “Price - Total” found in a tag. Edit the tag and remove the reference to the unknown variable.
Cosa sbaglio?
Matteo scusa ma veramente non riesco a capire. Ho enachend ecommerce attivo e lato analytics funziona tutto alla meraviglia. Il problema sorge con il pixel del purchase volendo inserire il valore. Sulla guida di fb dice di inserire questo codice (
fbq('track', 'Purchase', {value: get_order_total(); ?> , currency: 'EUR'});
) ma da errore.
Quindi ho seguito la tua guida e ho impostato la variabile dom con css "span.woocommerce-Price-amount amount" ma anche qui non va. Il problema è che dice la variabile Proce -Total è sconosciuta... ma quindi vuol dire che in dom è sbagliata l'impostazione?
L'impostazione però è semplice quindi credo sia errato lo span, io ho selezionato questo:
woocommerce-Price-amount amount
però come vedi è lo stesso span per varie tipologie:
19,90€
Subtotale:
19,90€
Spedizione:
5,00€ tramite Spedizione con pagamento in contrassegno
Metodo di pagamento:
Pagamento alla consegna
Totale:
24,90€
Ecco qui mi sono fermato.
WP + WC con enhanced ecommerce attivo.
Spero possa anche essere di aiuto ad altri.
Ciao :)
Se hai Woocommerce e l'enhanced ecommerce attivo ti basta usare la variabile di tipo Data Layer: ecommerce.purchase.actionField.revenue
Così:
Fammi sapere ;)
Ciao Gianluigi, stai usando una variabile {{Price -Total}} che in realtà non esiste. Occhio alle maiuscole e minuscole nelle variabili :)
Fammi sapere!
Ciao Matteo,
ti ringrazio le risorse che condividi su questo sito, prima di tutto.
Io ho seguito il tuo tutorial ma una volta fatto tutto leggo questo messaggio nella diagnostica di Face:
Apri il codice sorgente del tuo sito web. Individua gli eventi Purchase e aggiorna lo snippet di codice dell'evento. Il campo del valore deve contenere un numero decimale superiore a zero e non deve includere lettere, caratteri speciali, simboli di valuta o virgole.
Me lo segnala come errore sostanzialmente...cosa posso fare? Ho controllato con l'anteprima, a me sembra tutto correttol...
Grazie mille
Ciao Luca, riesci a darmi il dettaglio? Il messaggio mi sembra troncato. Scrivi pure nel gruppo pubblico di Facebook: https://www.facebook.com/groups/TagManagerItalia/
:)
Ciao Matteo, complimenti e grazie per tutte le informazioni utilissime che si trovano all'interno del tuo sito.
Vorrei chiederti un aiuto se ti è possibile.
Nell'implementare l'evento purchase ho problemi in quanto il sito in questione usa la virgola nel valore. Non è possibile cambiare il codice del sito in quanto il cliente e il fornitore del servizio sono in forte tensione. Ci sarebbe un modo da Tag Manager per cambiare in automatico la virgola con il punto nella Variabile?
Scusa l'ignoranza e grazie in anticipo.
Grazie mille!!! In Italia sull'argomento Tag Manager sei il TOP!!!!
(non voglio sminuirti dicendo in Italia, ma il resto non lo conosco)
Grazie ancora un Saluto
Ciao Carlo e grazie :) No non mi stai sminuendo, anzi ti ringrazio ancora :)
A presto
Ciao Carlo e grazie del tuo feedback :)
Devi usare una funzione Javascript che ti pulisca:
function() {
var prezzo = document.querySelector('INSERISCI IL TUO SELETTORE');
if (prezzo) {
var regex = /([0-9.,]+)/;
if (regex.test(prezzo .innerText)) {
return prezzo .innerText.match(regex)[0];
}
}
}
e ti ciucci il valore di questa variabile :)