3

I'm trying to install the Facebook Messenger Customer Chat Plugin onto my website using Google Tag Manager so that it can be controlled by non-developers, however after creating a 'Custom HTML' block in GTM, it is rejecting the tag saying that the HTML is invalid.

This code works fine when added manually, but not when used inside 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>

And the error:

Invalid HTML, CSS, or JavaScript found in template.

What's the workaround for this issue?

3

I discovered that GTM doesn't like something about the HTML (probably the page_id attribute). So, instead, the <div> needs to be created dynamically using JavaScript. This is the final code we used:

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

protected by Community Apr 5 '18 at 21:32

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.