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” e salvalo

variabile installare chat facebook messenger su sito con google tag manager

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.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"
 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/it_IT/sdk.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):

<!-- Load Facebook SDK for JavaScript -->
 <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/it_IT/sdk.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 “Messenger Chat FB” e salvalo.

tag installare chat facebook messenger su sito con google tag manager

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

 

Questo alla fine sarà il risultato:

facebook chat messenger installato su sito google tag manager

 

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

    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.