[Aggiornato 15 Aprile 2020]
Facebook consente di installare sul proprio sito la Facebook Customer Chat, un plugin che mette in contatto diretto i clienti col Messenger della propria pagina Facebook, il tutto senza lasciare il sito stesso.
Uuuuhh che figata 🙂
Il plugin è configurabile direttamente dalla tua pagina Facebook, andando in Settings, è personalizzabile con colori diversi e messaggi automatici, e naturalmente è installabile inserendo uno snippet di codice nel sito.
“Perchè non installare la Chat di Facebook tramite Google Tag Manager?”, magari con Tag HTML Personalizzato ti starai chiedendo.
Certo, come avrai intuito, tutto questo è possibile. L’unica cosa è che – ahimè – lo snippet fornito da Facebook contiene una parte HTML di <div> che a causa del funzionamento della libreria JavaScript non viene gestito in modo corretto da Google Tag Manager 🙁
Quindi se copi/incolli non succederà una fava (fava è un termine tecnico).
Come al solito, ho una buona notizia per te: grazie a un #barbatrucco, è possibile farlo funzionare ugualmente.
Ecco come 🙂
STEP 1 – CREA L’ATTIVATORE
Per prima cosa creiamo un semplicissimo Attivatore Pronto per il DOM.
- Attivatori > Nuovo > Configurazione Attivatore
- Tipo di Attivatore: Pronto per DOM
- Questo attivatore si attiva su: Tutti gli eventi pronti per il DOM
- Rinomina l’Attivatore “DOM Caricato” (DOM Ready) e salvalo
STEP 2 – CREA UN TAG HTML PERSONALIZZATO
Vai su Google Tag Manager e poi clicca su:
- Tag > Nuovo > Tag HTML Personalizzato
- Inserisci lo script composto come ti sto per dire in seguito.
Ti spiego. Questo è lo script che ti fornisce Facebook:
<!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- Your customer chat code --> <div class="fb-customerchat" attribution=setup_tool page_id="XXXXXXXXXXXXXXX"> </div>
Ecco quello che devi fare.
La prima parte dello script va ricopiata, eliminando la prima riga con il div, ovvero: <div id=”fb-root”></div>
Rimarrà dunque questa parte:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Dimentica quello che viene successivamente. Al suo posto inserisci questo script qua:
<script>
(function() {
// Modify the variable values below
var page_id = 'XXXXXXXXXXXXXXX';
var ref = '';
var colore = '#fa3c4c';
var logged_in_greeting = 'Ciao utente loggato';
var logged_out_greeting = 'Ciao utente sloggato';
// Don't touch the code below
var el = document.createElement('div');
el.className = 'fb-customerchat';
el.setAttribute('page_id', page_id);
if (ref.length) { el.setAttribute('ref', ref); }
el.setAttribute('theme_color', colore);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);
})();
</script>
Che dovrai però personalizzare con:
– page_id (al posto di XXXXXXXXXXXXXXX inserisci quello che Facebook ti ha fornito, lo ritrovi nella parte dello script che abbiamo ignorato. E’ importante che tu metta il tuo, mi raccomando!)
– colore (al posto di #fa3c4c metti quello che preferisci)
– messaggi chat personalizzati
Per riassumerti la faccenda, ecco come apparirà lo snippet nel complesso.
Sarà ciò che dovrai incollare nel Tag HTML Personalizzato (con le dovute personalizzazioni che ti ho appena detto):
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js#xfbml=1&version=v2.12&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
(function() {
// Modify the variable values below
var page_id = 'XXXXXXXXXXXXXXX';
var ref = '';
var colore = '#fa3c4c';
var logged_in_greeting = 'Ciao utente loggato';
var logged_out_greeting = 'Ciao utente sloggato';
// Don't touch the code below
var el = document.createElement('div');
el.className = 'fb-customerchat';
el.setAttribute('page_id', page_id);
if (ref.length) { el.setAttribute('ref', ref); }
el.setAttribute('theme_color', colore);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);
})();
</script>
- Attivazione: attiva su “DOM Caricato”, l’Attivatore creato nel primo step.
- Rinomina il Tag, ad esempio “FB Messenger Chat” e salvalo.
STEP 2 – VERIFICA IN MODALITA’ ANTEPRIMA
Come di consueto, prima di pubblicare il tutto puoi verificare di aver installato la Facebook Customer Chat correttamente, grazie alla funzionalità di Anteprima e Debug di Google Tag Manager.
Dopo aver attivato la modalità, entra nel tuo sito. Dovresti vedere il Tag “Messenger Chat FB” fra i Tags Fired on This Page. E naturalmente dovrebbe già comparirti la Chat di Facebook Messenger sul sito.
Figo, no? 🙂 Sei pronto per la pubblicazione delle modifiche. Per pubblicare ricorda che alla fine devi cliccare sul pulsante blu “Invia”.
Questo alla fine sarà il risultato:
Io lo trovo semplicemente geniale 😀 Tu cosa ne pensi? Lasciami un commento qua in fondo!
PS: Nel Club Tag Manager Italia troverai una video guida passo passo e il template da scaricare 😉
LINK UTILI:
- Maggiori informazioni sull’installazione di Facebook Customer Chat su Developers Facebook:
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin
Questa integrazione è ancora valida? C’è una versione più aggiornata?
Ciao Marco, mi risulta ancora valida. L’hai installata? Hai feedback contrari?
Fammi sapere!
ciao Matteo,
ho seguito la tua guida ma su Anayltics nè in Tag Manager vedo risultati quando apro la chat di Messenger.
C’è qualcosa che non va ?
Ciao Christian, sì non li vedi perché questa guida ti spiega come installare Messenger e non come tracciarlo. Nel Club Tag Manager Italia ho fatto un video che spiega invece come capire quando gli utenti interagiscono con Messenger.
Se ti interessano maggiori info sul Club, allora iscriviti a questa lista di attesa: https://club.tagmanageritalia.it/lista-attesa-club-tmi/
A presto!
Ciao Matteo, ho seguito la guida ma vorrei fare in modo che non si aprisse automaticamente quando entra nel sito,nel senso che mi viene fuori il messaggio come posso aiutarti, a io vorrei che uscisse solo quando l’utete ci clicca. come posso fare?
Ciao Dario, come già scritto in alcuni commenti, ti basta gestire il parametro “greeting_dialog_display” a valore hide.
Ti consiglio di dare un’occhiata ai parametri presenti nella guida ufficiale: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin#
A presto!
e nello specifico mi potresti dire che snippet devo aggiungere a quello già presente nella guida, per togliere il messaggio di benvenuto.
io ho provato ad aggiungere dopo var greeting_dialog_display = ‘hide’ ;
ma non funziona, si apre comunque
Ciao Dario, se hai copiato così occhio che hai un apice diverso. Devono essere tutti così: ‘
Nel caso mandami dettagli (con screenshot) sul gruppo pubblico di Facebook “Fatti di Tag Manager” che trovi a questo link: https://www.facebook.com/groups/TagManagerItalia/
Ti aspetto!
Ciao Matteo. C’è un modo per vedere se il messaggio dell’utente parte dal sito o dalla chat interna di Facebook?
Grazie 🙂
Ciao Marco, nope. Puoi sapere se interagisce ma non il contenuto. Almeno non con questa chat 😀
Ciao Matteo, complimenti per il sito!
Avresti un consiglio per riuscire a traccare l’interazione con la chat mandando magari un evento su Analytics?
Grazie e buona serata!
Ciao Alex e grazie 🙂
Sì, certo lo si fa attraverso delle API. Di questo argomento ne parlo dentro il Club Tag Manager Italia (non l’ho reso pubblico). Se ti interessa iscriviti alla lista di attesa: https://club.tagmanageritalia.it/lista-attesa-club-tmi/
A presto!
Ho seguito la guida su vari siti e su uno in particolare non funziona. Vedo tutto in anteprima e il tag è installato perfettamente (Analytics funziona), ma la chat di Facebook non da segni di vita.
Come si potrebbe risolvere?
Ciao Luca, forse c’è qualche altro script che “cozza”. Prova a cambiare l’attivatore mettendolo a Window Loaded (pagina caricata).
Fammi sapere!
Ciao Matteo!
Ho notato che la chat non compare (nonostante il tag scatti) su delle landing page fatte con clickfunnel su un sottodominio. Posso risolvere in qualche modo?
Ciao Claudio, riesci ad inviarmi su [email protected] l’URL così do un’occhiata per curiosità?
Grazie
Ciao sul sito di un mio cliente la chat di Facebook cliccandoci sopra non si minimizza in nessun modo, inoltre è scomparsa la X per chiuderla, è per caso qualche bug di Facebook strano?
Ciao Giuliano che io sappia no. Hai provato con browser diversi?
Ciao Matteo,
ho eseguito le tue istruzioni alla lettere cambiando anche il campo js.src con quello suggerito da Facebook in funzione a partire dall’8 Gennaio, tuttavia la pagina non funziona ancora.
Ti posso mandare via mail un link? Grazie infinite!
Inviami tutto su [email protected] 🙂
Ciao Matteo, non sono esperto ma ho eseguito tutto correttamente, ma non riesco!
Da dove partiamo?
Ho anche sostituito la variabile js.src con questo url: https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js
Partiamo nel farmi vedere gli screen 😀 L’id della pagina l’hai inserito? Il tag si attiva da debug? Stai usando estensioni adblock o simili che bloccano?
Grazie Matteo per il tuo supporto, allora:
– id pagina inserito
– da anteprima/debug se entro nel sito nel summary alla voce Tags Fired On This Page trovo appunto Fb Messenger Chat, ma la chat non compare, anzi è comparsa per 10 minuti poi scomparsa senza cambiare nulla
– non uso estensioni adblock o simili che bloccano
– purtroppo uso webnode per caricare il sito e penso che il problema sia quello
Riesci a dirmi il sito? Se ti compare e poi scompare c’è qualcos’altro allora :\
Si certamente Matteo il sito è questo:
https://www.soloresidenceinsardegna.it/
Grazie ancora per il tuo prezioso supporto
Ok, allora lo script di GTM ha dei problemi (non è installato dopo il body). Riesci a mandarmi gli screen di come ha configurato l’HTML e il debug che attiva il tag HTML?
Certo, hai un contatto email?
Yep, manda tutto a [email protected] 🙂
Ciao, sono un neofita, ma dopo aver fatto tutta la parte su google tag manager immagino ci sia una parte da fare sulle pagine del sito o sbaglio?
Ho fatto tutta la parte su Google Tag Manager ma non compare la chat sul sito (e non capisco perchè dovrebbe apparire visto che non ho fatto nulla sullo stesso).
Saluti e grazie in anticipo
Michele
Ciao Michele, sei loggato con facebook? Perchè altrimenti la chat non appare. Stai usando adblock o simili che interrompono l’esecuzione della chat?
Nel sito non devi far niente, fai tutto da GTM è proprio questo il bello 😉
Matteo!
I spend 2 days looking for that. Even in English, I didn’t find a solution. Thank you very much! You are the best!
Oh, thank you Dawid 🙂 I will translate in english all my articles in the future 🙂
Ciao Matteo, sto facendo dei test sulla velocità di caricamento del sito (sito wp su hosting condiviso) dopo aver installato la chat di facebook.
Su pagespeed insight di google perdo 15 punti appena attivo la chat e tra i miglioramenti suggeriti compare al primo posto “Attiva la compressione del testo”. Io in realtà ho già attivato la compressione gzip ma i file .js di facebook non riesce a gestirli.
Ti è mai capitato di vederlo su altri siti? Secondo te si può risolvere?
Ciao grazie!
Sì, certo è capitato. Ovviamente quando si usano librerie di terzi non può ottimizzarli. La soluzione sarebbe clonare la libreria e copiarla nel tuo host. Ovviamente devi verificare che tutto continui a funzionare.
A presto!
Ciao Matteo,
dalla console di Chrome, ultimamente mi viene fuori questo errore:
##########################
# The CustomerChat plugin will soon be removed from the main Facebook SDK.
# To continue using it please use the correct SDK URL.
# For more details see https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk
##########################
Ti risulta? é cambiato qualcosa?
Ciao Andrea, no non l’avevo notato. Mi segno di indagare non appena ho un attimo di tempo libero 🙂
A presto e grazie!
Ciao. Non so se sia legato a questo ma dal sito in cui avevo implementato non mostra più la chat nonostante non sia stato modificato nulla a livello strutturale.
Boo…
Ciao Andrea, a quanto pare hanno cambiato lo script da iniettare nel sito, per cui il vecchio plugin non è piu supportato. Da quanto ho letto nella guida bisogna cambiare nello script la variabile js.src con questo url: https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js
Aggiornerò la guida a breve 😉
Ciao Matteo e grazie per tutte le chicche che ci fai scoprire su TagManager Italia.
Ho un problema con l’implementazione della chat nel sito che seguo: sulla versione desktop funziona tutto ma sul mobile (Ios per certo) non appare in nessun browser. Ma inizialmente (verso inizio novembre) tutto funzionava perfettamente anche su mobile. Quale potrebbe essere l’errore?
Ciao Davide e grazie a te 🙂
Dunque prima cosa verifica se GTM gira sotto mobile, perché a volte capita che i template dei CMS usino HTML completamente diverso a seconda della richiesta del dispositivo ed è probabile che GTM non funzioni. Sei già il quarto negli ultimi giorni che mi chiede una cosa del genere 😀
A presto
Su mobile GTM mi sembra girare, anche perchè ho collegato GA e il Pixel di facebook e non ho notato anomalie nei report relativi agli accessi da mobile. O esiste un altro modo per verificare da Mobile? Ho provato la funzione anteprima su Chrome da Ios ma sembra non funzionare
Ciao Davide, modalità di Chrome va bene per testare. Se vuoi essere sicura ti consiglio di usare anche dei tag di test (semplici alert) in modalità anteprima e li testi.
Dovresti comunque avere un riscontro dai dispositivi nei vari report.
Fammi sapere!
Ciao Matteo, grazie per questa guida. Ti chiedo una info: la mia chat parla inglese nonostante ho verificato che il parametro nella libreria SDK è it_IT, come da tuo esempio. Non capisco perchè?
Ciao Giuseppe, in teoria il messaggio dipende anche dalla lingua che impostato quando sei loggato tu su Facebook.
Fammi sapere!
Ciao Matteo,
Come posso tracciare l’apertura della chat di Fb con un evento personalizzato, una volta che l’ho inserita con GTM?
Grazie.
Michele.
Attualmente la chat nativa di FB non supporta callback di eventi. In sostanza non si può nello stato attuale.
Ciao Matteo,
Grazie mille per il tuo aiuto.
Ho una domanda: come fare per far aprire la chat di Facebook in automatico appena l’utente entra sul sito?
Per ora appare solo l’icona ma non il messaggio “Ciao, come possiamo aiutarti?”.
Un caro saluto
Andrea
Ciao Andrea, dovresti forzare l’apertura trovi maggiori dettagli nella guida ufficiale: https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin
Ciao Matteo,
Ti ringrazio per la tua guida.
Sono riuscito a installare la chat di messenger sul mio sito in un minuto.
Un caro saluto
Andrea
Ciao Andrea, grazie del feedback 😉
Ciao Federico! Il mio sito è multilingua e vorrei mostrare la lingua italiana sulla versione italiana, mi sai dire come come fare?
Ciao Massimo, ti basta impostare come parametro nella libreria SDK. L’esempio imposta direttamente la lingua in italiano 🙂
Trovi maggiori informazioni sul link ufficiale di FB in fondo alla guida 😉
Ciao Matteo. Vorrei informazioni in merito alla visualizzazione della finestra di dialogo del saluto. Seguendo la guida indicata da Facebook, ho trovato l’attributo greeting_dialog_display:
Ho impostato la variabile nel seguente modo:
var greeting_dialog_display = ‘hide’;
e successivamente richiamato la variabile:
el.setAttribute(‘greeting_dialog_display’, greeting_dialog_display);
ma non ho ottenuto alcun cambiamento. Ho sbagliato qualcosa nell’impostazione della variabile?
Ciao Roberto mettendolo ad hide non dovresti avere il messaggio di benvenuto ma solo il “logo” della chat. Non noti questa variazione?
Niente non compare
Hai autorizzato la chat a livello di impostazione pagina ad essere eseguita dal tuo dominio?
si ho rifatto la procedura ma niente
Il tag ovviamente si abilita vero? Ed è pubblicato?
funziona ora… si è svegliato bene il sito questa mattina!!
Grazie del supporto Matteo
Uhhh bene 😉
A presto!
Ciao Matteo ho seguito la tua guida, funziona tutto il tag è attivo ma non compare la chat sul sito
Ciao Federico, prova a guardare il sito da loggato su Facebook 😉