[Aggiornato 13 Novembre 2018]

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

variabile installare chat facebook messenger su sito con google tag manager new

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.

tag installare chat facebook messenger su sito con google tag manager new

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

anteprima installare customer chat facebook su sito google tag manager new

 

Questo alla fine sarà il risultato:

facebook chat messenger installato su sito google tag manager new

 

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:

Condividi anche tu Google Tag Manager!
  • Reply

    Loris

    05 12 2018

    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

    • Matteo Zambon

      06 12 2018

      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?

    • Loris

      07 12 2018

      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

    • Matteo Zambon

      07 12 2018

      Riesci a dirmi il sito? Se ti compare e poi scompare c’è qualcos’altro allora :\

    • Loris

      10 12 2018

      Si certamente Matteo il sito è questo:
      https://www.soloresidenceinsardegna.it/

      Grazie ancora per il tuo prezioso supporto

    • Matteo Zambon

      10 12 2018

      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?

    • Loris

      10 12 2018

      Certo, hai un contatto email?

    • Matteo Zambon

      12 12 2018

      Yep, manda tutto a info@tagmanageritalia.it 🙂

  • Reply

    Michele

    03 12 2018

    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

    • Matteo Zambon

      03 12 2018

      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 😉

  • Reply

    Dawid

    28 11 2018

    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!

    • Matteo Zambon

      03 12 2018

      Oh, thank you Dawid 🙂 I will translate in english all my articles in the future 🙂

  • Reply

    Matteo

    23 11 2018

    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!

    • Matteo Zambon

      03 12 2018

      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!

  • Reply

    Andrea

    26 10 2018

    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?

    • Matteo Zambon

      29 10 2018

      Ciao Andrea, no non l’avevo notato. Mi segno di indagare non appena ho un attimo di tempo libero 🙂

      A presto e grazie!

    • Davide

      10 11 2018

      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…

    • Matteo Zambon

      12 11 2018

      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 😉

  • Reply

    Giuseppe

    24 09 2018

    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è?

    • Matteo Zambon

      25 09 2018

      Ciao Giuseppe, in teoria il messaggio dipende anche dalla lingua che impostato quando sei loggato tu su Facebook.

      Fammi sapere!

  • Reply

    Michele

    13 09 2018

    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.

    • Matteo Zambon

      13 09 2018

      Attualmente la chat nativa di FB non supporta callback di eventi. In sostanza non si può nello stato attuale.

  • Reply

    Andrea Semonella

    27 08 2018

    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

  • Reply

    Andrea

    27 08 2018

    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

    • Matteo Zambon

      30 08 2018

      Ciao Andrea, grazie del feedback 😉

  • Reply

    Massimo

    21 07 2018

    Ciao Federico! Il mio sito è multilingua e vorrei mostrare la lingua italiana sulla versione italiana, mi sai dire come come fare?

    • Matteo Zambon

      23 07 2018

      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 😉

  • Reply

    Roberto

    24 05 2018

    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?

    • Matteo Zambon

      30 05 2018

      Ciao Roberto mettendolo ad hide non dovresti avere il messaggio di benvenuto ma solo il “logo” della chat. Non noti questa variazione?

  • Reply

    Federico

    19 04 2018

    Niente non compare

    • Matteo Zambon

      19 04 2018

      Hai autorizzato la chat a livello di impostazione pagina ad essere eseguita dal tuo dominio?

    • Federico

      19 04 2018

      si ho rifatto la procedura ma niente

    • Matteo Zambon

      19 04 2018

      Il tag ovviamente si abilita vero? Ed è pubblicato?

    • Federico

      20 04 2018

      funziona ora… si è svegliato bene il sito questa mattina!!

      Grazie del supporto Matteo

    • Matteo Zambon

      20 04 2018

      Uhhh bene 😉

      A presto!

  • Reply

    Federico

    19 04 2018

    Ciao Matteo ho seguito la tua guida, funziona tutto il tag è attivo ma non compare la chat sul sito

    • Matteo Zambon

      19 04 2018

      Ciao Federico, prova a guardare il sito da loggato su Facebook 😉

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.