Améliorer sa boutique en ligne

Comment ajouter le chat Facebook Messenger sur sa boutique en ligne

Avec Google Tag Manager, vous avez les pleins pouvoirs sur votre boutique en ligne / site web, vous pouvez ajouter aisément des plugins et applications sans devoir faire appel à un développeur web.

Nous allons voir dans cet article comment ajouter le chat Messenger de Facebook sur votre boutique en ligne grâce au Google Tag Manager.

Afin d’ajouter le chat Facebook Messenger, vous devez réaliser 3 étapes :

  1. Ajouter le plugin « Customer Chat » sur votre page Facebook
  2. Personnaliser votre chat Messenger et récupérer le code (script)
  3. Ajouter Facebook Messenger sur votre boutique en ligne avec Google Tag Manager

Découvrez tous les autres avantages de Google Tag Manager (disponible à partir du forfait Or) dans cet article.

Ajouter le chat Facebook Messenger sur son site web grâce à Google Tag Manager

1ère étape : Ajouter le plugin « Customer Chat » sur votre page Facebook

1. Direction le site developers.facebook.com puis cliquez sur « Mes applications » puis sur « Ajouter une application »
  

2. Donnez un nom à votre appli (« Chat Messenger » par exemple), modifiez votre adresse mail de contact (si vous le souhaitez) puis cliquez sur « Créer un ID d’app ».
Passez simplement le contrôle de sécurité juste après cette étape.
 

3. Sur la nouvelle page, copiez l’ID App et collez-le sur un document de façon à l’utiliser plus tard.
Une fois cela fait, cliquez sur le « + » à côté de « Produits » et cliquez sur « Configurer » à l’onglet Messenger.

4. Sélectionnez votre page Facebook à lier à l’appli Messenger et autorisez toutes les demandes qui suivent.

Voilà ! Vous venez d’ajouter votre appli « Customer Chat » sur votre page Facebook.

2ème étape : Personnaliser le chat Messenger et récupérer le code (script)

1. Sur votre page Facebook, cliquez sur « Paramètres » puis sur l’onglet « Plate-forme Messenger ».
Descendez cette page et cliquez sur « Configurer » à côté de « Plug-in de discussion client ».

2. Une fenêtre s’ouvre, vous informant que vous allez configurer Messenger pour votre site web.
A la première étape, vous devez : choisir votre langue par défaut et configurer votre message d’accueil (en cliquant sur Modifier).
Puis cliquez sur Suivant.

3. Dans la 2ème étape, choisissez le sous-titre qui arrivera sous votre nom de page.
Choisissez également la couleur de votre chat. Vous pouvez choisir parmi la dizaine de couleurs proposées ou écrire vous-même votre code couleur avec le « # ».

4. Dans la 3ème étape, ajoutez l’adresse de votre boutique en ligne avec les « https:// » et cliquez sur « Enregistrer ».
Copiez le code dans l’encadré de droite en cliquant simplement dessus (et sauvez le quelque part, nous en aurons besoin par la suite).
Puis cliquez sur « Terminé » pour fermer cette fenêtre.

3ème étape : Ajouter Facebook Messenger sur votre boutique en ligne avec Google Tag Manager

Tout d’abord, assurez-vous que votre compte Google Tag Manager est lié à votre boutique en ligne (Aide ici).

1. Afin d’ajouter votre chat, on va devoir ajouter deux balises HTML personnalisé.
Connectez-vous à votre compte https://tagmanager.google.com
Sur votre espace de travail, cliquez sur « Ajouter une balise ».
Vous pouvez renommer votre balise « SDK Facebook » par ex.

2. Cliquez sur l’encadré « Configuration de la balise » et choisissez « HTML personnalisé ».

3. Dans l’encadré HTML, copiez-collez le code ci-dessous en changeant l’AppID avec l’ID de votre app que vous avez sauvé dans la 1ère étape.

<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Code de votre app à 15 chiffres',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.2'
});
};
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

4. Choisissez ensuite en déclencheur « All pages ».
Voici le rendu final que vous devez avoir (avec votre appID).
Et cliquez sur le bouton bleu « Enregistrer ».

5. Votre balise SDK Facebook est enregistré, maintenant refaites les étapes pour ajouter la balise de votre chat. Voici le code html qu’il faut ajouter :

<script>
(function() {
var page_id = 'Votre page ID';
var ref = '';
var theme_color = '#votre code couleur';
var logged_in_greeting = 'Votre texte de bienvenue';
var logged_out_greeting = 'Votre texte de bienvenue';

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', theme_color);
el.setAttribute('logged_in_greeting', logged_in_greeting);
el.setAttribute('logged_out_greeting', logged_out_greeting);
document.body.appendChild(el);
})();
</script>

Avec le code enregistré dans la 2ème partie de cet article vous trouverez les 4 informations à changer en gras (page ID, theme color, logged in et out).Voici un exemple de rendu final :

6. Une fois, vos deux balises enregistrées, vous pouvez les envoyer dans votre boutique, pour cela cliquez sur le bouton « Envoyer ».

7. Donnez un nom à votre « envoi » et cliquez sur « Publier ».

Et c’est fait !

Votre chat Messenger est en ligne sur votre boutique web.

(Si vous ne le voyez pas tout de suite, videz votre cache navigateur afin qu’il apparaisse).

Articles recommandés
Suivez-nous