Categories: Guida Base

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:

Matteo Zambon

View Comments

    • 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 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 :D

  • 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!

  • 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 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 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!

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

    • 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

    • Partiamo nel farmi vedere gli screen :D L'id della pagina l'hai inserito? Il tag si attiva da debug? Stai usando estensioni adblock o simili che bloccano?

Recent Posts

Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager

Grazie alle Consent Management Platform puoi gestire in modo semplice ed efficace i consensi al…

2 mesi ago

ANALYTIX TALK: il Podcast di Marketing e Digital Analytics

Hai mai desiderato un luogo dove i commenti sulle ultime novità, i metodi delle migliori…

2 mesi ago

Tutto sulla Consent Mode e come gestire la Consent Mode v2: guida completa

Se la GDPR ti sta a cuore e se ti occupi di advertising, allora questo…

3 mesi ago

Come migrare gli eventi da Google Universal Analytics (GA3) Google Analytics 4 (GA4)

[Aggiornata il 6 Febbraio 2024] Quante volte avrai sentito la classica frase “Siamo a Luglio,…

4 mesi ago