Guida Base: Installare la Chat di Facebook Messenger sul sito con Google Tag Manager

[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