web-dev-qa-db-fra.com

Comment ajouter le plug-in de conversation client Facebook Messenger sur votre site à l'aide de Google Tag Manager

J'essaie d'installer le plug-in de chat client Facebook Messenger sur mon site Web à l'aide de Google Tag Manager afin qu'il puisse être contrôlé par des non-développeurs. Toutefois, après la création d'un bloc "HTML personnalisé" dans GTM, rejette la balise en disant que le code HTML est invalide.

Ce code fonctionne correctement lorsqu'il est ajouté manuellement, mais pas lorsqu'il est utilisé dans GTM:

<!-- FACEBOOK MESSENGER CHAT BOX -->
<div class="fb-customerchat" page_id="xxxxxxxxxx"></div>
<script>
  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Et l'erreur:

HTML, CSS ou JavaScript incorrect trouvé dans le modèle.

Quelle est la solution de contournement pour ce problème?

facebookgoogle-tag-manager
3
Simon East

J'ai découvert que GTM n'aimait pas quelque chose à propos du HTML (probablement l'attribut page_id). Donc, à la place, le <div> doit être créé dynamiquement à l'aide de JavaScript. C'est le code final que nous avons utilisé:

<!-- FACEBOOK MESSENGER CHAT BOX -->
<script>
  // We create the DIV dynamically to work correctly with Tag Manager
  var chatDiv = document.createElement('div');
  chatDiv.className = 'fb-customerchat';
  chatDiv.setAttribute('page_id', 'xxxxxxxxxxxxxxx'); // Facebook Page ID goes here
  document.body.appendChild(chatDiv);

  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
3
Simon East